/* Capa de diseño del backoffice (se carga DESPUÉS de backoffice.css): el mismo lenguaje que la app y la web pública —Manrope, luz ambiente,
   paneles de cristal con filo de luz, esquinas generosas— con la identidad propia del backoffice (acento turquesa, para no confundirlo con la
   app de los clientes). Si no carga, el backoffice sigue con el estilo anterior. */
@font-face {
  font-family: "Manrope";
  src: url("ManropeVariable.woff2") format("woff2-variations"), url("ManropeVariable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root, :root[data-tema="oscuro"] {
  --cristal: rgba(15, 34, 38, 0.62); --cristal-2: rgba(255, 255, 255, 0.05); --cristal-2-hover: rgba(255, 255, 255, 0.09);
  --borde: rgba(180, 235, 240, 0.12); --resalte: inset 0 1px 0 rgba(255, 255, 255, 0.06); --sombra: 0 16px 40px -20px rgba(0, 0, 0, 0.7);
  --ambiente: radial-gradient(900px 560px at 92% -8%, rgba(59, 189, 201, 0.13), transparent 62%), radial-gradient(800px 640px at -8% 105%, rgba(63, 182, 124, 0.08), transparent 60%);
  --apagado: #9db6ba;
}
:root[data-tema="claro"] {
  --cristal: rgba(255, 255, 255, 0.78); --cristal-2: rgba(16, 40, 44, 0.045); --cristal-2-hover: rgba(16, 40, 44, 0.08);
  --borde: rgba(16, 40, 44, 0.12); --resalte: inset 0 1px 0 rgba(255, 255, 255, 0.95); --sombra: 0 14px 38px -20px rgba(16, 40, 44, 0.3);
  --ambiente: radial-gradient(900px 560px at 92% -8%, rgba(27, 138, 150, 0.14), transparent 62%), radial-gradient(800px 640px at -8% 105%, rgba(31, 157, 99, 0.09), transparent 60%);
  --apagado: #4d666a;
}
body { font-family: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background-image: var(--ambiente); background-attachment: fixed; background-repeat: no-repeat; -webkit-font-smoothing: antialiased; }
h1 { font-weight: 800; letter-spacing: -0.03em; font-size: 1.75rem; } h2, h3 { font-weight: 800; letter-spacing: -0.015em; }
code, .mono, pre, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
input, select, textarea, button { font-family: inherit; }

/* ---- Cristal ---- */
.tarjeta, .tabla-caja, .login-caja, .aviso, .datos-fila, .fila-interruptor, .eventos, .lista-notas li, .resumen-texto {
  background: var(--cristal); border: 1px solid var(--borde); box-shadow: var(--resalte), var(--sombra);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.tarjeta, .tabla-caja { border-radius: 20px; padding-inline: 20px; }
.tabla-caja { padding-inline: 0; }
.tarjeta.destacada { border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); }
.datos-fila, .fila-interruptor, .eventos, .lista-notas li, .resumen-texto { border-radius: 14px; box-shadow: none; background: var(--cristal-2); }
.dialogo, .panel-flotante { background: color-mix(in srgb, var(--superficie) 95%, transparent); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--resalte), 0 28px 70px -24px rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.dialogo::backdrop { background: rgba(3, 10, 12, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lateral { background: color-mix(in srgb, var(--lateral) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-right-color: var(--borde); }
.barra { border-bottom-color: var(--borde); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
a.tarjeta:hover, .enlace-tarjeta:hover, .carta:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 55%, var(--borde)); }
.enlace-tarjeta, .carta { transition: transform 0.16s ease, border-color 0.16s ease; }

/* ---- Navegación ---- */
.marca-logo { font-weight: 800; }
.nav-grupo { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 0.78rem; opacity: 0.9; }
.nav-enlace { border-radius: 12px; font-weight: 600; transition: background 0.14s ease; }
.nav-enlace:hover { background: var(--cristal-2-hover); }
.nav-enlace.activo { background: color-mix(in srgb, var(--acento) 18%, transparent); box-shadow: inset 2px 0 0 var(--acento); }

/* ---- Controles ---- */
.boton, .boton-icono { border-radius: 12px; font-weight: 700; background: var(--cristal-2); border-color: var(--borde); box-shadow: var(--resalte); transition: background 0.14s ease, border-color 0.14s ease; }
.boton:hover, .boton-icono:hover { background: var(--cristal-2-hover); }
.boton-primario { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 100%, #fff 12%), var(--acento-fuerte)); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px var(--acento); }
.boton-primario:hover { background: linear-gradient(180deg, var(--acento), var(--acento-fuerte)); }
.boton-peligro { background: color-mix(in srgb, var(--riesgo) 10%, transparent); }
input, select, textarea { background: var(--cristal-2); border: 1px solid var(--borde); border-radius: 12px; transition: border-color 0.14s ease, box-shadow 0.14s ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 26%, transparent); }
.buscador { background: var(--cristal-2); border-radius: 12px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }

/* ---- Tipografía de datos ---- */
.kpi small, .datos-fila dt, .datos-lista dt, .paleta-tipo { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; }
.kpi strong, .cifra { font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tabla th { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; background: transparent; }
.tabla th, .tabla td { border-bottom-color: var(--borde); }
.tabla tbody tr:hover { background: var(--cristal-2); }
.insignia { font-weight: 700; letter-spacing: 0; background: var(--cristal-2); }
.lista-datos li, .lista-salud li, .webhook { border-top-color: var(--borde); }

/* ---- Acceso ---- */
.login-caja { border-radius: 26px; padding: 36px 32px; box-shadow: var(--resalte), 0 30px 70px -30px rgba(0, 0, 0, 0.6); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-tema="oscuro"] { --cristal: rgba(15, 34, 38, 0.97); }
  :root[data-tema="claro"] { --cristal: rgba(255, 255, 255, 0.98); }
}
@media (prefers-reduced-motion: reduce) { .enlace-tarjeta, .carta, .nav-enlace { transition: none; } a.tarjeta:hover, .enlace-tarjeta:hover, .carta:hover { transform: none; } }
@media (max-width: 560px) { h1 { font-size: 1.45rem; } .tarjeta { padding-inline: 16px; border-radius: 18px; } }
.contenido > .tarjeta, .contenido > .tabla-caja, .contenido > .rejilla + .tarjeta { margin-bottom: 16px; }
.tarjeta + .rejilla, .rejilla + .rejilla { margin-top: 16px; }

/* ---- Desplegables nativos: siguen el tema del backoffice (antes el panel salía blanco con letras claras en oscuro) ------------------------ */
:root, :root[data-tema="oscuro"] { color-scheme: dark; }
:root[data-tema="claro"] { color-scheme: light; }
select option, select optgroup { background-color: var(--superficie); color: var(--texto); }
select option:checked { background-color: color-mix(in srgb, var(--acento) 30%, var(--superficie)); }
select option:disabled { color: var(--apagado); }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: inherit; }

/* ---- Acceso: la misma foto de montaña y tarjeta de cristal que el inicio de sesión de la app (tests/test_superficies.py mide el contraste) ---- */
body.pagina-login {
  background-color: #0a0a0c;
  background-image: linear-gradient(rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.2)), url("fotos/montana-login.jpg");
  background-image: linear-gradient(rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.2)), image-set(url("fotos/montana-login.webp") type("image/webp"), url("fotos/montana-login.jpg") type("image/jpeg"));
  background-size: cover; background-position: 40% 50%; background-attachment: scroll;
}
.pagina-login .login-caja {
  width: min(420px, 100%); border-radius: 28px; padding: 36px 32px;
  background: rgba(10, 16, 18, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 28px 70px -28px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --texto: #e8f2f3; --apagado: #aab9bc; --acento: #4fd0db;
  color: var(--texto);
}
:root[data-tema="claro"] .pagina-login .login-caja { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 28px 70px -30px rgba(10, 20, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8); --texto: #10282c; --apagado: #4d666a; --acento: #0e5a63; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pagina-login .login-caja { background: rgba(10, 16, 18, 0.96); }
  :root[data-tema="claro"] .pagina-login .login-caja { background: rgba(255, 255, 255, 0.97); }
}
.pagina-login .login-caja h1 { margin-top: 12px; }
.pagina-login .login-caja .muted { color: var(--apagado); }
.pagina-login .login-caja a { color: var(--acento); }
@media (max-width: 560px) { .pagina-login .login-caja { padding: 28px 22px; border-radius: 24px; } }