/* ==========================================================================
   aero.css — Tema luivo-aero · CAPA 2 (glassmorphism, ADITIVA sobre base.css).
   Regla mental (web.md): el vidrio va en CONTENEDORES GRANDES (sidebar, topbar,
   tarjetas, modales, login). NUNCA en tablas densas ni en cada fila/badge.
   ========================================================================== */

/* 2.1 — Subir el radius a esquinas suaves. */
:root{ --radius:14px; }

/* 2.2 — Fondo con vida detrás del vidrio (INDISPENSABLE para que no se vea gris).
   Panel claro: dos manchas de marca (azul + naranja) sobre degradado suave. */
body{
  background:
    radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(230,126,34,.10), transparent 60%),
    linear-gradient(180deg, #EEF3FB, #F6F8FC);
  background-repeat:no-repeat;
  min-height:100vh;
}

/* 2.3 — Paneles de vidrio (superficies claras: tarjetas, topbar, modales, login,
   toasts, confirmación). Siempre con -webkit-backdrop-filter para Safari. */
.card, .topbar, .modal-content, .login-card, .confirm-card{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 30px rgba(13,38,76,.12);
}
.topbar{ background:rgba(255,255,255,.58); border-bottom:1px solid rgba(255,255,255,.55); }
/* Footer con el mismo vidrio que la topbar (parte del marco fijo). */
.app-footer{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-top:1px solid rgba(255,255,255,.55);
}
.modal-content{ background:rgba(255,255,255,.82); }        /* modal: blur más fuerte abajo */
.modal-content{ backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); }
/* Modales y diálogos SIN borde de vidrio: dibujaba una línea blanca alrededor
   de la banda de color de la cabecera. La sombra difusa define el contorno. */
.modal-content, .confirm-card{ border:none; }

/* Sidebar: vidrio OSCURO. */
.sidebar{
  background:rgba(18,28,44,.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-right:1px solid rgba(255,255,255,.08);
}

/* Tablas: legibilidad numérica es prioridad → fondo casi sólido, sin blur.
   El hover usa el mismo token que en la capa base (nada de rgba suelto). */
table.tabla thead th{ background:rgba(255,255,255,.90); }
table.tabla tbody tr:hover{ background:var(--primary-lt); }

/* 2.4 — Brillo/gloss en el botón primario + glow al hover de tarjetas. */
.btn-primary{
  background:linear-gradient(180deg, var(--primary-gloss), var(--primary));
  border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px color-mix(in srgb, var(--primary) 25%, transparent);
}
.btn-primary:hover, .btn-primary:focus{
  background:linear-gradient(180deg, var(--primary-gloss-dk), var(--primary-dk));
}
.card:hover{ box-shadow:0 10px 34px color-mix(in srgb, var(--primary) 16%, transparent); }
.login-logo{ box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px color-mix(in srgb, var(--primary) 28%, transparent); }

/* Cabeceras de modal/diálogo con el mismo gloss de marca del botón primario. */
.modal-header, .confirm-cab{
  background:linear-gradient(180deg, var(--primary-gloss), var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.confirm-cab.peligro{
  background:linear-gradient(180deg, color-mix(in srgb, var(--danger) 82%, var(--blanco)), var(--danger));
}
.confirm-cab.aviso{
  background:linear-gradient(180deg, color-mix(in srgb, var(--warning) 82%, var(--blanco)), var(--warning));
}

/* 2.5 — Sombras difusas y detalles: dropdown, badges pill, scrollbar. */
.dropdown-menu{ border-radius:8px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.badge-estado, .badge-rol, .badge-pill, .badge-super{ border-radius:20px; }
.menu-item{ border-radius:10px; }
/* Scrollbar global: oculto por defecto */
::-webkit-scrollbar{ width:0; height:0; }
::-webkit-scrollbar-thumb{ background:transparent; }
::-webkit-scrollbar-track{ background:transparent; }

/* Scrollbar thin solo en el listado de tablas, visible al hover */
.tabla-wrap{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.tabla-wrap:hover{ scrollbar-color:#cbd5e1 transparent; }
.tabla-wrap::-webkit-scrollbar{ width:6px; height:6px; }
.tabla-wrap::-webkit-scrollbar-thumb{ border-radius:6px; background:transparent; }
.tabla-wrap:hover::-webkit-scrollbar-thumb{ background:#cbd5e1; }
.tabla-wrap::-webkit-scrollbar-track{ background:transparent; }
.tabla-wrap::-webkit-scrollbar-button{ display:none; }

/* Inputs y controles un poco más suaves en Aero (sin exagerar). */
.form-control, .form-select, .btn{ border-radius:10px; }
.segmentado{ border-radius:10px; }
.btn-icono{ border-radius:10px; }

/* 2.6 — Accesibilidad (obligatorio): respetar reduce-motion. */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTILO "PLANO" — neutraliza la capa Aero (vidrio + esquinas suaves) para el
   look Tabler denso. Se activa con data-estilo="plano" (módulo Apariencia).
   ══════════════════════════════════════════════════════════════════════════ */
[data-estilo="plano"]{ --radius:3px; }
[data-estilo="plano"] body{
  background:var(--body-bg) !important;
}
[data-estilo="plano"] .card,
[data-estilo="plano"] .topbar,
[data-estilo="plano"] .app-footer,
[data-estilo="plano"] .modal-content,
[data-estilo="plano"] .login-card,
[data-estilo="plano"] .confirm-card{
  background:var(--surface);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--border); box-shadow:var(--shadow-card);
}
[data-estilo="plano"] .topbar{ border:none; border-bottom:1px solid var(--border); }
[data-estilo="plano"] .app-footer{ border:none; border-top:1px solid var(--border); }
[data-estilo="plano"] .modal-content, [data-estilo="plano"] .confirm-card{ border:none; }
[data-estilo="plano"] .sidebar{
  background:var(--sidebar-bg); backdrop-filter:none; -webkit-backdrop-filter:none; border-right:none;
}
[data-estilo="plano"] table.tabla thead th{ background:var(--surface); }
[data-estilo="plano"] .card:hover{ box-shadow:var(--shadow-card); }
/* Botón primario sólido (sin gloss). */
[data-estilo="plano"] .btn-primary{ background:var(--primary); box-shadow:none; }
[data-estilo="plano"] .btn-primary:hover,
[data-estilo="plano"] .btn-primary:focus{ background:var(--primary-dk); }
/* Cabeceras de modal/diálogo sólidas (sin gloss). */
[data-estilo="plano"] .modal-header, [data-estilo="plano"] .confirm-cab{ background:var(--primary); box-shadow:none; }
[data-estilo="plano"] .confirm-cab.peligro{ background:var(--danger); }
[data-estilo="plano"] .confirm-cab.aviso{ background:var(--warning); }
/* Radios planos en controles. */
[data-estilo="plano"] .form-control,
[data-estilo="plano"] .form-select,
[data-estilo="plano"] .btn,
[data-estilo="plano"] .btn-icono,
[data-estilo="plano"] .segmentado,
[data-estilo="plano"] .menu-item{ border-radius:var(--radius); }

/* En el modo plano, la caja desplegada es completamente rectangular */
[data-estilo="plano"] .custom-select .dropdown-menu {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}