/* Tema OSCURO por defecto (valores de siempre). Se añaden --pill-bg/--ok-bg/--warn-bg, que
   antes iban escritos a mano en las etiquetas de la portada, para que el tema claro los mande. */
:root{--bg:#14141c;--panel:#1d1d29;--line:#2e2e40;--tx:#e8e8f0;--mut:#8a8aa0;--acc:#c9a227;--ok:#3fb96a;--warn:#e0a93f;--err:#e05252;
--pill-bg:#2e2e40;--ok-bg:#1d3a28;--warn-bg:#3d3320;--btn-tx:#ffffff;--sombra:rgba(0,0,0,.45);--cuadro-hover:#191621;
--pulso-rojo-dim:#7a2b2b;--pulso-rojo-glow:rgba(224,82,82,.45);--pulso-ambar-dim:#7a5f22;--pulso-ambar-glow:rgba(224,169,63,.45)}
/* Tema CLARO: mismo crema calido que los modulos. Solo con data-tema="claro". */
:root[data-tema="claro"]{--bg:#f7f5f0;--panel:#ffffff;--line:#e2ded4;--tx:#23211d;--mut:#6f6a60;--acc:#a8801a;--ok:#1c7c43;--warn:#9a6b12;--err:#b3342f;
--pill-bg:#eceae4;--ok-bg:#e6f4ea;--warn-bg:#fdf3e0;--btn-tx:#ffffff;--sombra:rgba(0,0,0,.18);--cuadro-hover:#ffffff;
--pulso-rojo-dim:#e7b3b1;--pulso-rojo-glow:rgba(179,52,47,.30);--pulso-ambar-dim:#e3cfa3;--pulso-ambar-glow:rgba(154,107,18,.30)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font:14px/1.5 system-ui,Segoe UI,Arial;min-height:100vh}
header{padding:16px 26px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
header h1{font-size:17px;color:var(--acc);letter-spacing:.5px}
header .sub{color:var(--mut);font-size:13px}
header .sp{flex:1}
a.volver{color:var(--acc);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 14px;font-size:13px}
a.volver:hover{border-color:var(--acc)}
main{padding:26px}
.intro{color:var(--mut);font-size:13px;margin-bottom:20px;max-width:900px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dep{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;text-decoration:none;color:var(--tx);display:block;transition:border-color .15s,transform .15s}
.dep:hover{border-color:var(--acc);transform:translateY(-2px)}
.dep .ico{font-size:30px;line-height:1;margin-bottom:10px}
.dep .nom{font-size:16px;font-weight:700;margin-bottom:4px}
.dep .res{color:var(--mut);font-size:12px;min-height:34px}
.dep .est{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;font-size:11px}
.tag{border-radius:20px;padding:2px 9px;background:var(--pill-bg);color:var(--mut)}
.tag.on{background:var(--ok-bg);color:var(--ok);font-weight:700}
.tag.pa{background:var(--warn-bg);color:var(--warn)}
.dep.vacio{opacity:.62}
.mod{background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:var(--tx)}
.mod.on{border-left-color:var(--ok)}
.mod.pa{border-left-color:var(--warn)}
.mod.pe{border-left-color:var(--line)}
a.mod.on:hover{border-color:var(--acc)}
.mod .cuerpo{flex:1}
.mod .nom{font-size:15px;font-weight:600}
.mod .nota{color:var(--mut);font-size:12px;margin-top:3px}
.mod .flecha{color:var(--acc);font-weight:700;align-self:center}
.pie{color:var(--mut);font-size:12px;padding:10px 26px 24px}
/* Tarjeta de Avisos en la portada: parpadeo suave cuando hay avisos que reclaman atencion.
   El color (rojo si hay algun aviso alto, ambar si no) llega por variables en linea:
   --pulso, --pulsoDim y --pulsoGlow. */
@keyframes avisoPulso{
  0%,100%{border-color:var(--pulso);box-shadow:0 0 0 1px var(--pulso),0 0 14px var(--pulsoGlow)}
  50%{border-color:var(--pulsoDim);box-shadow:0 0 0 1px var(--pulsoDim),0 0 0 var(--pulsoGlow)}
}
.dep.aviso-pulso{border-color:var(--pulso);animation:avisoPulso 2s ease-in-out infinite}
.dep.aviso-pulso:hover{transform:translateY(-2px)}
.dep .est .tag.sinavisos{background:var(--ok-bg);color:var(--ok);font-weight:700}
/* Botón de tema en la cabecera de portada y de departamento (mismo aspecto que en los modulos). */
button.tema{background:transparent;border:1px solid var(--line);color:var(--tx);border-radius:8px;padding:5px 10px;font-size:15px;line-height:1;cursor:pointer}
button.tema:hover{border-color:var(--acc)}
/* Respeto a quien pide menos movimiento: sin parpadeo, borde de color fijo. */
@media (prefers-reduced-motion: reduce){
  .dep.aviso-pulso,.cuadro.aviso-pulso{animation:none;border-color:var(--pulso);box-shadow:0 0 0 1px var(--pulso)}
}

/* ============================================================
   CUADRICULA ORDENABLE (portada de departamentos y modulos de un departamento)
   Un mismo componente (comun.js · rejillaOrdenable) para las dos pantallas.
   Los cuadros van de arriba abajo: (icono en la portada), nombre, descripcion
   y, al final, las etiquetas de estado. Se reordenan arrastrando (raton y dedo).
   ------------------------------------------------------------
   SIN altura fija: el cuadro CRECE con el contenido (una descripcion larga no se
   corta ni se solapa). Todos los de una fila igualan la altura del mas alto por
   el stretch de la rejilla, y las etiquetas quedan pegadas abajo por el espacio
   sobrante (margin-top:auto), no ancladas a una distancia fija.
   Al pasar por encima el realce lo llevan el BORDE dorado y una sombra que
   levanta el cuadro; el fondo solo se acerca a su propio extremo (nunca al gris
   medio, donde el cursor se camufla). Todo por variable, con valor en los dos temas.
   ============================================================ */
.rejilla-ord{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-items:stretch}
.cuadro{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;color:var(--tx);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .15s,background .15s,transform .12s,box-shadow .12s}
.cuadro:hover{border-color:var(--acc);background:var(--cuadro-hover);box-shadow:0 6px 18px var(--sombra);transform:translateY(-2px)}
.cuadro:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.cuadro .cuadro-nom{font-size:18px;font-weight:700;color:var(--tx);line-height:1.2}
.cuadro .cuadro-sub{color:var(--mut);font-size:12px;line-height:1.35;flex:1}
.cuadro .cuadro-estado{margin-top:auto;padding-top:4px;display:flex;gap:6px;flex-wrap:wrap;font-size:11px}
.cuadro.apagado{opacity:.5;cursor:default}   /* por construir: no se entra; sin cursor de mano, pero se puede mover */
.cuadro.apagado:hover{transform:none;box-shadow:none;background:var(--panel)}
.cuadro.vacio{opacity:.62}           /* departamento sin modulos activos */
.cuadro.arrastrando{cursor:grabbing;opacity:.96;border-color:var(--acc);box-shadow:0 10px 26px var(--sombra)}
.cuadro-hueco{border:2px dashed var(--acc);border-radius:14px;background:var(--pill-bg);opacity:.6}
/* Boton discreto de "Restablecer orden". */
.btn-orden{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer}
.btn-orden:hover{border-color:var(--acc);color:var(--acc)}
.barra-orden{display:flex;justify-content:flex-end;margin-bottom:12px}
/* Aviso de la portada: parpadeo por variables (ambar por defecto, rojo si hay algo alto). */
.cuadro.aviso-pulso{--pulso:var(--warn);--pulsoDim:var(--pulso-ambar-dim);--pulsoGlow:var(--pulso-ambar-glow);border-color:var(--pulso);animation:avisoPulso 2s ease-in-out infinite}
.cuadro.aviso-pulso.alto{--pulso:var(--err);--pulsoDim:var(--pulso-rojo-dim);--pulsoGlow:var(--pulso-rojo-glow)}