/* Tema AWEMIO sobre Bulma 1.0.4: el morado #681AF6 manda (primario, enlaces, foco e "info"); los grises
   llevan un toque morado (nada de azul). Verde, ámbar y rojo solo para estados. Claro, oscuro y automático
   (data-theme en <html>, lo pone js/inicio.js). Sensación suave: transiciones cortas y sombras difusas. */
:root {
  --bulma-primary-h: 261deg; --bulma-primary-s: 92%; --bulma-primary-l: 53%;
  --bulma-link-h: 261deg; --bulma-link-s: 92%; --bulma-link-l: 53%;
  --bulma-info-h: 261deg; --bulma-info-s: 60%; --bulma-info-l: 62%;
  --bulma-success-h: 134deg; --bulma-success-s: 54%; --bulma-success-l: 40%;
  --bulma-warning-h: 35deg; --bulma-warning-s: 100%; --bulma-warning-l: 50%;
  --bulma-danger-h: 0deg; --bulma-danger-s: 74%; --bulma-danger-l: 54%;
  --bulma-primary-invert-l: 100%; --bulma-success-invert-l: 100%; --bulma-danger-invert-l: 100%; /* letra blanca en botones de color */
  --bulma-focus-h: 261deg; --bulma-focus-s: 92%; --bulma-focus-l: 53%;
  --bulma-scheme-h: 261; --bulma-scheme-s: 12%;
  --bulma-family-primary: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  --bulma-family-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bulma-radius: .5rem; --bulma-radius-small: .375rem; --bulma-radius-medium: .625rem; --bulma-radius-large: .875rem;
  --bulma-card-radius: .875rem; --bulma-box-radius: .875rem;
  --bulma-body-background-color: var(--bulma-scheme-main-bis);
  --bulma-shadow: 0 1px 2px hsla(261, 30%, 20%, .05), 0 4px 14px hsla(261, 30%, 20%, .06);
  --bulma-card-shadow: var(--bulma-shadow); --bulma-box-shadow: var(--bulma-shadow);
  --awemio-sombra-alta: 0 2px 4px hsla(261, 30%, 20%, .06), 0 12px 28px hsla(261, 40%, 30%, .12);
  --awemio-lateral: #0b0b0f; --awemio-lateral-texto: #b4b4be; --awemio-lateral-hover: #1c1c22;
  --awemio-transicion: 180ms cubic-bezier(.2, .8, .2, 1);
  --awemio-alto-superior: 3.25rem;
  --awemio-tinte: hsl(261, 92%, 96.5%); --awemio-tinte-fuerte: hsl(261, 92%, 92%); --awemio-tinte-texto: hsl(261, 75%, 45%);
  --awemio-verde: hsl(134, 54%, 40%); --awemio-ambar: hsl(35, 100%, 50%); --awemio-rojo: hsl(0, 74%, 54%); --awemio-gris: hsl(261, 6%, 66%);
  --awemio-reposo: hsl(261, 70%, 72%);
}
/* color-scheme: Bulma no lo declara y el navegador seguía tratando la página como clara (barras de
   desplazamiento, controles y el lienzo de fondo en blanco). Cada tema lo dice explícito. */
:root[data-theme="light"] { color-scheme: light; }
/* En oscuro las tarjetas quedan un poco más claras que el fondo (como en claro, al revés no se lee la profundidad) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bulma-body-background-color: hsl(261, 12%, 7%);
    --bulma-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
    --awemio-sombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .45);
    --awemio-tinte: hsl(261, 35%, 16%); --awemio-tinte-fuerte: hsl(261, 40%, 22%); --awemio-tinte-texto: hsl(261, 95%, 80%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bulma-body-background-color: hsl(261, 12%, 7%);
  --bulma-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
  --awemio-sombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 30px rgba(0, 0, 0, .45);
  --awemio-tinte: hsl(261, 35%, 16%); --awemio-tinte-fuerte: hsl(261, 40%, 22%); --awemio-tinte-texto: hsl(261, 95%, 80%);
}

/* En oscuro, los tags y avisos "is-light" de color quedan en tono oscuro (Bulma los deja casi blancos) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tag, .notification):is(.is-primary, .is-success, .is-warning, .is-danger, .is-info, .is-link).is-light {
    --bulma-tag-background-l: 20%; --bulma-tag-color-l: 80%; --bulma-notification-background-l: 18%; --bulma-notification-color-l: 82%;
  }
}
:root[data-theme="dark"] :is(.tag, .notification):is(.is-primary, .is-success, .is-warning, .is-danger, .is-info, .is-link).is-light {
  --bulma-tag-background-l: 20%; --bulma-tag-color-l: 80%; --bulma-notification-background-l: 18%; --bulma-notification-color-l: 82%;
}

/* El fondo lo pinta también el body (no solo el lienzo de <html>): algunos navegadores no repintaban el lienzo al cambiar el tema */
body { min-height: 100vh; background-color: var(--bulma-body-background-color); }
input[type="checkbox"], input[type="radio"] { accent-color: hsl(261, 92%, 53%); width: 1rem; height: 1rem; vertical-align: -.15em; }
.checkbox { display: inline-flex; align-items: center; gap: .5rem; font-weight: 550; }
.table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bulma-text-weak) !important; }
.card-content { padding: 1.25rem 1.5rem; }
code, pre, .is-mono { font-family: var(--bulma-family-code); }
code { padding: .1em .35em; border-radius: var(--bulma-radius-small); font-size: .875em; color: var(--awemio-tinte-texto); background: var(--awemio-tinte); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Íconos del sprite dentro de .icon de Bulma */
.icon .ico { width: 1.125rem; height: 1.125rem; }
.button.is-small .icon .ico, .tag .icon .ico { width: .9375rem; height: .9375rem; }

/* "Espuma": todo lo que se toca responde suave */
a, .button, .tag, .card, .box, .input, .textarea, .select select, .tabs a, .menu-list a {
  transition: background-color var(--awemio-transicion), color var(--awemio-transicion), border-color var(--awemio-transicion),
    box-shadow var(--awemio-transicion), transform var(--awemio-transicion);
}
.button:active:not(:disabled) { transform: scale(.97); }
.card.se-eleva:hover, .box.se-eleva:hover { transform: translateY(-2px); box-shadow: var(--awemio-sombra-alta); }
.card, .box { border: 1px solid hsla(261, 30%, 50%, .08); }
:focus-visible { outline: 2px solid hsla(261, 92%, 60%, .55); outline-offset: 2px; }
.input:focus, .textarea:focus, .select select:focus { box-shadow: 0 0 0 .2em hsla(261, 92%, 60%, .18); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .card.se-eleva:hover, .box.se-eleva:hover, .button:active:not(:disabled) { transform: none; }
}

/* Estados: punto de color (los colores solo aquí y en tags de estado) */
.punto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--awemio-gris); flex: none; }
.punto.verde { background: var(--awemio-verde); box-shadow: 0 0 0 3px hsla(134, 54%, 40%, .15); }
.punto.ambar { background: var(--awemio-ambar); box-shadow: 0 0 0 3px hsla(35, 100%, 50%, .15); }
.punto.rojo { background: var(--awemio-rojo); box-shadow: 0 0 0 3px hsla(0, 74%, 54%, .15); }
.punto.gris { background: var(--awemio-gris); }
.punto.morado { background: var(--awemio-reposo); } /* en reposo (bajo demanda): no es falla */
.estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--awemio-gris); }
.estado.verde::before { background: var(--awemio-verde); }
.estado.ambar::before { background: var(--awemio-ambar); }
.estado.rojo::before { background: var(--awemio-rojo); }
.estado.morado::before { background: var(--awemio-reposo); }

/* Ícono en círculo morado suave (tarjetas de resumen, cabeceras) */
.icono-circulo {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  background: var(--awemio-tinte); color: var(--awemio-tinte-texto);
}
.icono-circulo .ico { width: 1.25rem; height: 1.25rem; }
.card-header-title .icon { color: var(--awemio-tinte-texto); margin-inline-end: .5rem; }
.nota { color: var(--bulma-text-weak); font-size: .875rem; }
.acerca { margin-top: 1.25rem; }
.acerca .icon { vertical-align: middle; color: var(--awemio-tinte-texto); }
.formatos-fila { margin: -.25rem 0 0; }
.llave-nueva { display: block; padding: .5rem .75rem; overflow-wrap: anywhere; background: var(--bulma-scheme-main); }
.resumen-bloqueos { margin: 0; padding: .75rem 1.5rem 0; }
.bloqueos { margin-top: 1.25rem; overflow: hidden; }
.bloqueos .sin-filas, .sesiones .sin-filas { margin: 0; padding: 1rem 1.5rem 1.25rem; color: var(--bulma-text-weak); }
.vacio-pagina .icono-circulo.grande, .vacio .icono-circulo.grande { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; }