/* Aspecto del panel interno de Flouxia.
 *
 * Se carga vía UNFOLD["STYLES"], después del CSS de Unfold, así que puede
 * ajustar lo que él define. Va aquí y no en clases de Tailwind porque Unfold
 * compila su CSS solo sobre sus propias plantillas: una clase que él no use
 * no existe en el archivo final.
 */

:root {
  --fx-bg:      #0b0b0d;   /* fondo de la página */
  --fx-surface: #141418;   /* tarjetas y paneles */
  --fx-raised:  #1b1b21;   /* elementos sobre una tarjeta */
  --fx-border:  #26262e;
  --fx-red:     #e5484d;   /* acento */
  --fx-red-dim: #7f1d20;
  --fx-text:    #ededf0;
  --fx-muted:   #8b8b96;
  --fx-ok:      #3dd68c;
  --fx-warn:    #e0b341;
}

/* ---------- fondo general ---------- */
html.dark body,
html.dark #page,
html.dark #main { background: var(--fx-bg) !important; color: var(--fx-text); }

html.dark #nav-sidebar,
html.dark #nav-sidebar-inner { background: #0e0e12 !important; border-color: var(--fx-border) !important; }

/* ---------- micro-etiquetas en mayúscula ---------- */
.fx-label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fx-muted);
}

/* ---------- título de página ---------- */
.fx-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -.01em; text-transform: uppercase; line-height: 1.05;
  color: var(--fx-text); margin: 0;
}
.fx-subtitle { font-size: .8125rem; color: var(--fx-muted); margin-top: .25rem; }

/* ---------- tarjetas de indicadores ---------- */
.fx-kpis { display: grid; gap: .75rem; }
.fx-kpis.c6 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fx-kpis.c4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.fx-kpi {
  background: var(--fx-surface); border: 1px solid var(--fx-border);
  border-radius: .625rem; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.fx-kpi .v {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--fx-text);
}
.fx-kpi .d { font-size: .75rem; color: var(--fx-muted); }
.fx-kpi.destacada { border-color: var(--fx-red-dim); background: linear-gradient(180deg, #1a1013, var(--fx-surface)); }
.fx-kpi .v.bien   { color: var(--fx-ok); }
.fx-kpi .v.mal    { color: var(--fx-red); }
.fx-kpi .v.aviso  { color: var(--fx-warn); }

/* ---------- barra lateral en mayúscula, acento rojo ---------- */
html.dark #nav-sidebar-apps h2 {
  font-size: .6875rem !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fx-muted) !important;
}
html.dark #nav-sidebar-apps ol a {
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fx-text) !important; border-radius: .375rem;
}
html.dark #nav-sidebar-apps ol a:hover { background: var(--fx-raised); }
html.dark #nav-sidebar-apps ol a.active {
  background: var(--fx-red) !important; color: #fff !important; font-weight: 700;
}
html.dark #nav-sidebar-apps ol a.active .material-symbols-outlined { color: #fff !important; }

/* ---------- barra horizontal, mismo lenguaje ---------- */
html.dark .fx-topbar { background: #0e0e12 !important; border-color: var(--fx-border) !important; }
html.dark .fx-trigger { text-transform: uppercase; letter-spacing: .06em; color: var(--fx-text); }
html.dark .fx-trigger:hover, html.dark .fx-trigger[data-open="true"] {
  background: var(--fx-raised); border-color: var(--fx-border);
}
html.dark .fx-trigger[data-active="true"] { color: var(--fx-red); }
html.dark .fx-panel { background: var(--fx-surface); border-color: var(--fx-border); }
html.dark .fx-item:hover { background: var(--fx-raised); }

/* ---------- conmutador de disposición ---------- */
.fx-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fx-muted); text-decoration: none;
  border: 1px solid var(--fx-border); border-radius: .375rem;
  padding: .3rem .55rem; margin-right: .75rem; white-space: nowrap;
}
.fx-toggle:hover { color: var(--fx-text); border-color: var(--fx-red); }

/* ---------- tablas y tarjetas del admin sobre fondo oscuro ---------- */
html.dark .bg-white { background-color: var(--fx-surface) !important; }
html.dark .border-base-200 { border-color: var(--fx-border) !important; }


/* ---------- barra horizontal (estructura) ---------- */
.fx-topbar { position: sticky; top: 0; z-index: 45; }
  /* Una sola fila: con nueve menús, envolver a dos líneas se ve desordenado.
     En pantallas angostas se desplaza en horizontal, que es más limpio. */
  /* Sin `overflow` en la barra: los desplegables van posicionados en absoluto
     dentro de ella, y cualquier recorte los vuelve invisibles. Se prefiere que
     envuelva a dos filas en pantallas angostas antes que romper los menús. */
  .fx-nav {
    display: flex; align-items: center; gap: .125rem;
    flex-wrap: wrap; overflow: visible;
  }
  .fx-group { position: relative; }
  .fx-trigger {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .45rem .6rem; border-radius: .375rem;
    font-size: .8125rem; font-weight: 500; line-height: 1;
    background: none; border: 1px solid transparent; cursor: pointer;
    color: inherit; white-space: nowrap;
  }
  .fx-trigger:hover, .fx-trigger[data-open="true"] {
    background: rgb(0 0 0 / .05); border-color: rgb(0 0 0 / .08);
  }
  .fx-trigger[data-active="true"] { font-weight: 700; }
  .fx-panel {
    position: absolute; top: calc(100% + .375rem); left: 0; min-width: 15rem;
    padding: .375rem; border-radius: .5rem; z-index: 60;
    background: #fff; border: 1px solid rgb(0 0 0 / .1);
    box-shadow: 0 10px 30px rgb(0 0 0 / .12);
  }
  .fx-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .625rem; border-radius: .375rem;
    font-size: .875rem; text-decoration: none; color: inherit;
  }
  .fx-item:hover { background: rgb(0 0 0 / .05); }
  .fx-item[data-active="true"] { font-weight: 600; }
  .fx-chev { font-size: 16px; opacity: .5; transition: transform .15s; }
  @media (prefers-color-scheme: dark) {
    .fx-trigger:hover, .fx-trigger[data-open="true"] { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); }
    .fx-panel { background: #18181b; border-color: rgb(255 255 255 / .12); box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
    .fx-item:hover { background: rgb(255 255 255 / .08); }
  }
  html.dark .fx-trigger:hover, html.dark .fx-trigger[data-open="true"] { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); }
  html.dark .fx-panel { background: #18181b; border-color: rgb(255 255 255 / .12); box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
  html.dark .fx-item:hover { background: rgb(255 255 255 / .08); }

/* x-cloak: oculta los desplegables hasta que Alpine toma el control, para que
   no parpadeen abiertos al cargar la página. */
[x-cloak] { display: none !important; }

/* ---------- conmutador de disposición (temporal) ---------- */
.fx-switch {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--fx-red);
  border-radius: .375rem; padding: .45rem .7rem;
}
.fx-switch:hover { filter: brightness(1.12); }
.fx-switch-now {
  font-weight: 500; letter-spacing: .04em; opacity: .8;
  border-left: 1px solid rgb(255 255 255 / .35); padding-left: .5rem; margin-left: .2rem;
}