/* ------------------------------------------------------------------ */
/* Estilos de la app de seguimiento de mantenimientos fotovoltaicos     */
/* ------------------------------------------------------------------ */

:root {
  --verde: #1f9d55;
  --amarillo: #e8a33d;
  --rojo: #d64545;
  --azul: #1d4ed8;
  --texto: #1f2933;
  --texto-suave: #6b7280;
  --borde: #e2e6ea;
  --fondo: #f5f7fa;
  --blanco: #ffffff;
  --sombra: 0 2px 10px rgba(16, 24, 40, 0.08);
  --radio: 10px;
}

/* Modo daltónico: azul / naranja oscuro / carbón. Elegidos midiendo la distancia
   entre ellos al simular protanopía, deuteranopía y tritanopía: se separan el
   doble que la paleta verde-amarillo-rojo, y los tres contrastan con el fondo
   claro del mapa. Se combinan con los símbolos ✓ ! !! para que el estado nunca
   dependa únicamente del color. */
body.daltonico {
  --verde: #0072b2;
  --amarillo: #b35c00;
  --rojo: #2b2b2b;
}
body.daltonico .item-estado.amarillo,
body.daltonico .popup .popup-estado.amarillo { color: #b35c00; }
body.daltonico .item-estado.rojo,
body.daltonico .popup .popup-estado.rojo { color: #2b2b2b; }

.simbolo { display: none; }
body.daltonico .simbolo {
  display: inline;
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 0.15rem;
  letter-spacing: -0.04em;
}

* { box-sizing: border-box; }

/* Necesario porque varias secciones usan display:flex, que tendría prioridad
   sobre el display:none que el navegador aplica al atributo hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

body {
  display: flex;
  flex-direction: column;
}

/* ---------------------------- Cabecera ---------------------------- */
.cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.2rem;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra);
  z-index: 500;
}

.titulo { display: flex; align-items: center; gap: 0.7rem; }
.logo { font-size: 1.7rem; }
.cabecera h1 { font-size: 1.15rem; margin: 0; }
.subtitulo { margin: 0; font-size: 0.8rem; color: var(--texto-suave); }

/* ----------------------------- Menú ------------------------------- */
.menu { display: flex; gap: 0.25rem; margin-left: 0.5rem; }
.pestana {
  font: inherit;
  font-size: 0.87rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: none;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
}
.pestana:hover { background: var(--fondo); }
.pestana.activa {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--azul);
  font-weight: 600;
}

/* La leyenda ocupa siempre su propia línea, debajo y alineada a la derecha.
   Antes iba en el hueco que quedara y era ella la que llevaba el `margin-left: auto`
   que empujaba a la derecha lo que viniera detrás. Eso se rompía de tres maneras:
   al ocultarla (fuera del mapa, ver `cambiarVista`) los botones se quedaban pegados
   a las pestañas; al partirse la cabecera en dos líneas el margen automático solo
   alineaba la línea de la leyenda, no la de los botones; y los botones cambiaban de
   línea según el ancho de la ventana. Con la leyenda en su propia línea, la primera
   siempre es la misma: título, pestañas y botones a la derecha. */
.leyenda {
  display: flex;
  gap: 0.35rem;
  flex: 1 0 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  color: var(--texto-suave);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

.punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.punto.verde { background: var(--verde); }
.punto.amarillo { background: var(--amarillo); }
.punto.rojo { background: var(--rojo); }

/* ---------------------------- Botones ----------------------------- */
.boton {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--texto);
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.boton:hover { filter: brightness(0.97); }
.boton.primario {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
  font-weight: 600;
}
.boton.primario:hover { filter: brightness(1.1); }
.boton.peligro { color: var(--rojo); border-color: #f0c4c4; background: #fff5f5; }
.boton:disabled { opacity: 0.55; cursor: not-allowed; }

.boton.icono {
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 999px;
}
.boton.icono.activo {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: var(--azul);
}

.boton.flotante {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 400;
  box-shadow: var(--sombra);
  background: var(--blanco);
}

/* Los botones llevan su propio margen automático: así quedan pegados a la derecha
   de la línea en la que caigan, esté la leyenda visible o no. */
.acciones-cabecera { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
a.boton { text-decoration: none; display: inline-flex; align-items: center; }

/* --------------------- Modal de avisos por correo ------------------ */
.contenido-modal { padding: 1.2rem 1.3rem 1.1rem; }
.contenido-modal h2 { margin: 0 0 0.9rem; font-size: 1.1rem; }
.detalle-avisos dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.85rem;
  margin: 0 0 0.9rem;
}
.detalle-avisos dt { color: var(--texto-suave); }
.detalle-avisos dd { margin: 0; font-weight: 600; word-break: break-word; }
.ayuda-avisos { font-size: 0.78rem; color: var(--texto-suave); margin: 0 0 1rem; }
.ayuda-avisos code { background: var(--fondo); padding: 0.1rem 0.3rem; border-radius: 4px; }

/* ------------------------ Pantalla de acceso ---------------------- */
body.pagina-acceso {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #eef2f7 0%, #e3e9f2 100%);
}

.tarjeta-acceso {
  width: min(400px, 100%);
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.14);
  padding: 1.6rem 1.7rem 1.4rem;
}
.acceso-cabecera { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.3rem; }
.acceso-cabecera h1 { font-size: 1.05rem; margin: 0; }
.tarjeta-acceso form { display: flex; flex-direction: column; }
.tarjeta-acceso label { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }
.tarjeta-acceso input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.9rem;
}
.tarjeta-acceso input:focus { outline: 2px solid #c7d2fe; border-color: var(--azul); }
.boton.ancho { width: 100%; padding: 0.6rem; font-size: 0.95rem; }
.pie-acceso {
  font-size: 0.76rem;
  color: var(--texto-suave);
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  line-height: 1.45;
}

/* ------------------------ Menú de usuario ------------------------- */
.menu-usuario { position: relative; }
.desplegable {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.16);
  min-width: 220px;
  padding: 0.3rem;
  z-index: 1200;
}
.desplegable button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.86rem;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
}
.desplegable button:hover { background: var(--fondo); }

.modal.ancho { width: min(860px, 96vw); }
.tabla-usuarios { max-height: 46vh; margin-bottom: 1rem; }
.fila-inactiva { opacity: 0.55; }
.etiqueta-yo {
  font-size: 0.7rem;
  background: #eef2ff;
  color: var(--azul);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}
#detalle-nuevo-usuario {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
}
#detalle-nuevo-usuario summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; }
#detalle-nuevo-usuario form { margin-top: 0.9rem; }
.rejilla-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.9rem;
}
.rejilla-formulario label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.25rem; }
.rejilla-formulario input[type="text"] {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.7rem;
  width: 100%;
}
.casilla { display: flex; align-items: center; gap: 0.45rem; padding-top: 1.5rem; }
.casilla label { margin: 0; font-weight: 400; }

/* ---------------------------- Layout ------------------------------ */
.contenido {
  display: flex;
  flex: 1;
  min-height: 0;
}

.panel {
  width: 330px;
  flex: none;
  background: var(--blanco);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel-cabecera { padding: 0.75rem; border-bottom: 1px solid var(--borde); }

#buscador {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.filtros { display: flex; gap: 0.35rem; margin-top: 0.55rem; }
.filtro {
  font: inherit;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--texto-suave);
  cursor: pointer;
}
.filtro.activo { background: #eef2ff; border-color: #c7d2fe; color: var(--azul); font-weight: 600; }

.lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

.item {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--borde);
  border-left: 4px solid transparent;
  cursor: pointer;
}
.item:hover { background: #f8fafc; }
.item.seleccionado { background: #eef2ff; }
.item.verde { border-left-color: var(--verde); }
.item.amarillo { border-left-color: var(--amarillo); }
.item.rojo { border-left-color: var(--rojo); }

.item-nombre { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.15rem; }
/* Qué le pasa a la planta, debajo de su nombre */
.item-incidencia {
  font-size: 0.83rem;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marca-prioridad {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: #1b1f24;
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  vertical-align: 0.05rem;
}
.item-datos { font-size: 0.78rem; color: var(--texto-suave); display: flex; justify-content: space-between; gap: 0.5rem; }
.item-estado { font-size: 0.78rem; margin-top: 0.2rem; font-weight: 600; }
.item-estado.verde { color: var(--verde); }
.item-estado.amarillo { color: #b97e19; }
.item-estado.rojo { color: var(--rojo); }

.vacio { padding: 1.5rem 1rem; text-align: center; color: var(--texto-suave); font-size: 0.85rem; }

.panel-pie {
  padding: 0.55rem 0.8rem;
  border-top: 1px solid var(--borde);
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.mapa-contenedor { position: relative; flex: 1; min-width: 0; }
#mapa { position: absolute; inset: 0; }

/* ---------------------- Historial de actuaciones ------------------- */
.vista-historial {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem 1.3rem 0;
  overflow: hidden;
}

.barra-historial {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.barra-historial h2 { margin: 0; font-size: 1.05rem; }
#buscador-historial,
#buscador-instalaciones {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  min-width: 260px;
}
.resumen-historial { font-size: 0.82rem; color: var(--texto-suave); margin-left: auto; }

.tabla-envoltorio {
  flex: 1;
  overflow: auto;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}

.tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tabla thead th {
  position: sticky;
  top: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--texto-suave);
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
  z-index: 1;
}
.tabla thead th[data-orden] { cursor: pointer; user-select: none; }
.tabla thead th[data-orden]:hover { color: var(--azul); }
.tabla thead th.ordenada::after { content: " ▲"; font-size: 0.7em; color: var(--azul); }
.tabla thead th.ordenada.descendente::after { content: " ▼"; }

.tabla tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.tabla tbody tr:hover { background: #f8fafc; }

.celda-obra { font-weight: 600; display: inline; }
.celda-secundaria { display: block; font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.1rem; }
.celda-comentario { white-space: pre-wrap; max-width: 460px; }
.sin-comentario { color: #aab1ba; font-style: italic; }
/* Ojo: nada de display:flex aquí. Un <td> con flex deja de ser celda de tabla y
   su borde inferior se despega del resto de la fila. */
.celda-acciones { text-align: right; white-space: nowrap; }
.celda-acciones .boton + .boton { margin-left: 0.35rem; }
.boton.pequeno { font-size: 0.78rem; padding: 0.28rem 0.6rem; }
.etiqueta-baja {
  font-size: 0.7rem;
  background: #fdecec;
  color: #a33;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* --------------------------- Marcadores --------------------------- */
.marcador-fv, .marcador-incidencia { background: none; border: none; }
.marcador-fv svg,
.marcador-incidencia svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }

/* --------------------------- Incidencias -------------------------- */
/* El tipo se distingue por la FORMA del marcador (pin / triángulo) y por el
   icono del listado, nunca solo por el color: así el modo daltónico no necesita
   nada especial para diferenciarlos. */
.icono-tipo { font-size: 0.9em; margin-right: 0.15rem; }

.chip.separador { border-left: 2px solid var(--borde); }

.filtros-tipo { margin-top: 0.4rem; }
.conmutador {
  font: inherit;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--texto-suave);
  cursor: pointer;
  opacity: 0.55;
}
.conmutador.activo { opacity: 1; background: #eef2ff; border-color: #c7d2fe; color: var(--azul); font-weight: 600; }

.item.incidencia { background: #fffdf7; }
.item.incidencia:hover { background: #fff8ea; }
body.daltonico .item.incidencia { background: #f6f8fb; }

/* Selector «Mantenimiento / Incidencia» del formulario de alta */
.selector-tipo { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.opcion-tipo {
  font: inherit;
  font-size: 0.88rem;
  flex: 1;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto-suave);
  cursor: pointer;
}
.opcion-tipo.activa {
  background: #eef2ff;
  border-color: var(--azul);
  color: var(--azul);
  font-weight: 700;
}

.modal select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.7rem;
  width: 100%;
  background: var(--blanco);
}

/* Aviso de garantía debajo de la fecha de puesta en marcha */
.ayuda.garantia { font-weight: 600; }
.ayuda.garantia.si { color: var(--verde); }
.ayuda.garantia.no { color: var(--rojo); }

/* Bloque de cobro del modal de resolución */
.bloque-cobro {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.75rem 0.8rem 0.35rem;
  margin: 0.3rem 0 0.9rem;
}
.aviso-garantia {
  font-size: 0.82rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  line-height: 1.4;
}
.aviso-garantia.si { background: #eaf7ef; color: #14663a; border: 1px solid #bfe3cd; }
.aviso-garantia.no { background: #fdf1e7; color: #8a4b12; border: 1px solid #f2d3b6; }
.aviso-garantia.desconocida { background: #f1f3f6; color: #4b5563; border: 1px solid var(--borde); }
.casilla-garantia { padding-top: 0; margin-bottom: 0.6rem; }
.bloque-cobro input[type="number"] { margin-bottom: 0.4rem; }
.bloque-cobro input:disabled { background: #eef0f3; color: var(--texto-suave); }

/* Etiquetas de tipo del historial: icono + texto, no solo color */
.etiqueta-tipo {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.etiqueta-tipo.mantenimiento { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.etiqueta-tipo.incidencia { background: #fdf1e7; color: #8a4b12; border: 1px solid #f2d3b6; }

.celda-importe { white-space: nowrap; }
.marca-garantia { font-size: 0.78rem; font-weight: 600; }
.marca-garantia.si { color: var(--verde); }
.marca-garantia.no { color: var(--rojo); }
.sin-dato { color: var(--texto-suave); font-weight: 400; }

.filtros-historial { margin: 0; }

/* Incidencias abiertas dentro del popup de una planta */
.popup-incidencias { margin: 0 0 0.6rem; }
.popup-incidencias h4 { margin: 0 0 0.35rem; font-size: 0.82rem; color: var(--texto-suave); }
.popup-incidencia {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  border-left: 3px solid var(--borde);
  background: var(--fondo);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.3rem;
}
.popup-incidencia.verde { border-left-color: var(--verde); }
.popup-incidencia.amarillo { border-left-color: var(--amarillo); }
.popup-incidencia.rojo { border-left-color: var(--rojo); }
.popup-incidencia-titulo { font-weight: 600; }
.popup-incidencia-estado { color: var(--texto-suave); margin-right: auto; }
.popup .popup-estado.sin-dato { color: var(--texto-suave); font-weight: 600; }

/* ------------------- Elegir ubicación en el mapa ------------------- */
.barra-eligiendo {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--blanco);
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  font-size: 0.86rem;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  max-width: 92%;
}
/* La cruz solo mientras se está señalando: el resto del tiempo, la manita de siempre. */
body.eligiendo-ubicacion .leaflet-grab,
body.eligiendo-ubicacion .leaflet-container { cursor: crosshair; }
#btn-elegir-mapa { margin: -0.35rem 0 0.7rem; }

/* ----------------------------- Popup ------------------------------ */
.leaflet-popup-content { margin: 0.8rem 0.9rem; min-width: 240px; }
.popup h3 { margin: 0 0 0.15rem; font-size: 1rem; }
/* Qué le pasa a la planta: debajo del nombre y en pequeño */
.popup-subtitulo { font-size: 0.85rem; margin: 0 0 0.25rem; }
.popup .popup-estado { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.5rem; }
.popup .popup-estado.verde { color: var(--verde); }
.popup .popup-estado.amarillo { color: #b97e19; }
.popup .popup-estado.rojo { color: var(--rojo); }

.popup dl { margin: 0 0 0.6rem; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; font-size: 0.82rem; }
.popup dt { color: var(--texto-suave); }
.popup dd { margin: 0; font-weight: 600; }
.popup .popup-notas {
  font-size: 0.8rem;
  background: var(--fondo);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  margin: 0 0 0.6rem;
  white-space: pre-wrap;
}
.popup-acciones { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.popup-acciones .boton { font-size: 0.8rem; padding: 0.35rem 0.6rem; }

/* ----------------------------- Modales ---------------------------- */
.modal {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(460px, 94vw);
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.22);
}
.modal::backdrop { background: rgba(15, 23, 42, 0.45); }
.modal form { padding: 1.2rem 1.3rem 1.1rem; display: flex; flex-direction: column; }
.modal h2 { margin: 0 0 0.9rem; font-size: 1.1rem; }
/* Las etiquetas y los textos de ayuda son <label> y <small>, que de serie van en
   línea: sin esto, una etiqueta se pega al final del texto de ayuda anterior. */
.modal label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }
.modal .casilla label { display: inline; }
.modal .opcional { font-weight: 400; color: var(--texto-suave); }
.modal input, .modal textarea {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 0.7rem;
  width: 100%;
}
/* Las casillas de verificación no son campos de texto: sin esto se estiran al
   100% del ancho y empujan su etiqueta al otro extremo de la línea. */
.modal input[type="checkbox"] {
  width: auto;
  flex: none;
  margin: 0;
}
.modal input:focus, .modal textarea:focus { outline: 2px solid #c7d2fe; border-color: var(--azul); }
.modal input.invalido { border-color: var(--rojo); background: #fff7f7; }
.modal textarea { resize: vertical; }
.ayuda { display: block; font-size: 0.75rem; color: var(--texto-suave); margin: -0.55rem 0 0.75rem; }
.error { display: block; font-size: 0.78rem; color: var(--rojo); font-weight: 600; margin: -0.55rem 0 0.75rem; }
.descripcion { font-size: 0.85rem; color: var(--texto-suave); margin: -0.4rem 0 0.9rem; }

.error-formulario {
  background: #fff5f5;
  border: 1px solid #f3c9c9;
  color: #a33;
  font-size: 0.82rem;
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  margin: 0 0 0.8rem;
}

.acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.2rem; }

/* ----------------------------- Avisos ----------------------------- */
.avisos {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.aviso {
  background: #1f2933;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--sombra);
  animation: aparecer 0.2s ease;
}
.aviso.exito { background: var(--verde); }
.aviso.fallo { background: var(--rojo); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}


/* ------------------ Bandeja de avisos de los inversores ------------------ */
/* Contador de avisos sin tratar, dentro de la pestaña de la cabecera. */
.contador-pestana {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0 0.32rem;
  margin-left: 0.2rem;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

.ayuda-bandeja {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  color: var(--texto-suave);
  max-width: 90ch;
}

#vista-papelera h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
#vista-papelera .tabla-envoltorio { flex: 1; min-height: 0; margin-bottom: 0.8rem; }

/* ------------------- Adjuntos de una actuación --------------------- */
.marca-adjuntos {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.75rem;
  color: var(--texto-suave);
  white-space: nowrap;
}

.bloque-adjuntos {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
}

.lista-adjuntos { list-style: none; margin: 0 0 0.5rem; padding: 0; }

.adjunto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}
.adjunto a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adjunto-datos { font-size: 0.75rem; color: var(--texto-suave); white-space: nowrap; }

#campo-adjunto { font: inherit; font-size: 0.82rem; }

/* La severidad se dice con TEXTO, no solo con color: en modo daltónico, y en
   general, "crítica" tiene que leerse, no adivinarse. */
.etiqueta-severidad {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.etiqueta-severidad.critica { background: #fdecec; color: #a12626; border-color: #f0c4c4; }
.etiqueta-severidad.mayor   { background: #fdf3e3; color: #8a5a10; border-color: #f0dcb4; }
.etiqueta-severidad.menor   { background: #eef2ff; color: #3742a3; border-color: #c7d2fe; }
.etiqueta-severidad.aviso   { background: var(--fondo); color: var(--texto-suave); border-color: var(--borde); }
/* Sin clasificar: el fabricante no dice la gravedad (Growatt). Va en gris y con
   borde discontinuo para que se vea de un vistazo que falta clasificarla, sin
   dar a entender que es leve. */
.etiqueta-severidad.sin-clasificar {
  background: var(--fondo);
  color: var(--texto-suave);
  border-color: var(--borde);
  border-style: dashed;
}

/* Incidencia abierta por la aplicación, sin que haya llamado ningún cliente. */
.marca-automatica {
  display: inline-block;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--azul);
  border: 1px solid #c7d2fe;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.marca-sin-emparejar {
  display: inline-block;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: #fdecec;
  color: #a12626;
  border: 1px solid #f0c4c4;
  font-size: 0.72rem;
  font-weight: 700;
}

.marca-apagada {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--texto-suave);
  font-style: italic;
}

.fila-aviso.critica td { background: #fffafa; }
.fila-aviso .celda-alarma { max-width: 480px; }
.celda-causa {
  display: block;
  font-size: 0.78rem;
  color: var(--texto-suave);
  margin-top: 0.15rem;
  white-space: pre-wrap;
}
.nota-aviso {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #8a5a10;
}

#detalle-plantas-portal {
  margin: 1rem 0 1.2rem;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.8rem 0.9rem;
}
#detalle-plantas-portal summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; }
#detalle-plantas-portal .ayuda { display: block; margin: 0.6rem 0 0.8rem; max-width: 90ch; }
#detalle-plantas-portal .tabla-envoltorio { max-height: 40vh; }
.celda-codigo { font-size: 0.78rem; color: var(--texto-suave); display: block; }
.campo-emparejado {
  width: min(320px, 100%);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  font-size: 0.85rem;
}
.campo-emparejado:focus { outline: 2px solid #c7d2fe; border-color: var(--azul); }

/* De qué cuenta del portal es cada planta y cada aviso. Solo aparece cuando hay
   varias cuentas configuradas, porque entonces el código de planta ya no basta
   para saber de quién es: dos servidores regionales pueden repetirlo. */
.fila-cuenta td {
  background: var(--fondo);
  font-size: 0.85rem;
  padding-top: 0.6rem;
  padding-bottom: 0.4rem;
}
.fila-cuenta .celda-codigo { display: inline; margin-left: 0.4rem; }

/* Cabecera de sección que se puede recoger/expandir (cuentas en «Plantas del
   portal», y «alarmas activas» / «ya no se reportan» en la bandeja). */
tr.plegable { cursor: pointer; user-select: none; }
tr.plegable:hover td { background: var(--fondo-suave, #eef1f5); }
tr.plegable:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.marca-plegar {
  display: inline-block;
  width: 1em;
  color: var(--texto-suave);
  font-size: 0.8rem;
}

.fila-seccion td {
  background: var(--fondo);
  font-size: 0.9rem;
  padding-top: 0.7rem;
  padding-bottom: 0.45rem;
}
.fila-seccion .celda-codigo {
  display: inline-block;
  margin-left: 0.4rem;
  background: var(--fondo-suave, #eef1f5);
  border-radius: 999px;
  padding: 0 0.5rem;
  font-weight: 600;
}

.etiqueta-cuenta {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--texto-suave);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* Nombre escrito que todavía no es ninguna instalación: no es un error, es una
   planta nueva. Se ofrece darla de alta sin salir de esta pantalla. */
.ayuda-emparejado {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* --------------------------- Responsive --------------------------- */
@media (max-width: 820px) {
  .menu { order: 2; width: 100%; margin-left: 0; }
  .barra-historial h2 { width: 100%; }
  #buscador-historial { min-width: 0; flex: 1; }
  .vista-historial { padding: 0.8rem 0.7rem 0; }
  .celda-comentario { max-width: none; }
  .contenido { flex-direction: column; }
  .panel { width: 100%; max-height: 42%; border-right: none; border-bottom: 1px solid var(--borde); }
  .mapa-contenedor { flex: 1; min-height: 55vh; }
  .leyenda { order: 3; }
}