/* =====================================================================
   SICO-AP · Tema "Apple"
   Capa de estilo que se monta ENCIMA de los estilos existentes (Tailwind y
   los <style> de cada página). No cambia ninguna funcionalidad.
   Los selectores llevan "body" delante para ganarle a Tailwind sin usar
   !important salvo donde Tailwind o la página ya lo usan.
   Se activa/desactiva en Configuración > Apariencia.
   ===================================================================== */

:root {
    --ap-canvas: #F5F5F7;
    --ap-surface: #FFFFFF;
    --ap-ink: #1D1D1F;
    --ap-ink-2: #6E6E73;
    --ap-ink-3: #86868B;
    --ap-hairline: rgba(0, 0, 0, 0.08);
    --ap-hairline-strong: #D2D2D7;
    --ap-accent: var(--md-primary, #0083B3);
    --ap-accent-soft: color-mix(in srgb, var(--ap-accent) 12%, transparent);
    --ap-accent-ring: color-mix(in srgb, var(--ap-accent) 28%, transparent);
    --ap-red: #E30000;
    --ap-radius-card: 18px;
    --ap-radius-field: 10px;
    --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* El texto del menú pasa a ser oscuro sobre vidrio claro */
    --md-menu-text-rgb: 29, 29, 31;
}

/* ---------- Base ---------- */
html body {
    font-family: var(--ap-font);
    background: var(--ap-canvas);
    color: var(--ap-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body .page-content { background: var(--ap-canvas); padding: 28px; }
@media (max-width: 640px) { body .page-content { padding: 16px; } }

body h1, body h2, body h3 { letter-spacing: -0.022em; color: var(--ap-ink); }
body h1 { font-weight: 700; }
body h2, body h3 { font-weight: 600; }
body .text-gray-800, body .text-gray-900 { color: var(--ap-ink); }
body .text-gray-500, body .text-gray-600 { color: var(--ap-ink-2); }
body .text-gray-400 { color: var(--ap-ink-3); }

body a { -webkit-tap-highlight-color: transparent; }
body ::selection { background: var(--ap-accent-ring); }

/* ---------- Barra superior: vidrio esmerilado ---------- */
body .topnav {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: none;
    border-bottom: 1px solid var(--ap-hairline);
}
body .topnav-brand span { color: var(--ap-ink); font-weight: 600; letter-spacing: -0.01em; }
body .topnav-tab {
    color: rgba(29, 29, 31, 0.8);
    font-weight: 500;
    border-radius: 980px;
    padding: 7px 14px;
}
body .topnav-tab:hover,
body .topnav-tab-group.open .topnav-tab { background: rgba(0, 0, 0, 0.05); color: var(--ap-ink); }
body .topnav-tab-group.active-tab .topnav-tab { background: var(--ap-accent); color: #fff; }
body .topnav-tab-group.active-tab .topnav-tab i { color: #fff; }

body .topnav-dropdown {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--ap-hairline);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 6px;
}
body .topnav-dropdown a { border-radius: 8px; color: var(--ap-ink); font-weight: 400; }
body .topnav-dropdown a:hover { background: var(--ap-accent); color: #fff; }
body .topnav-dropdown a:hover i { color: #fff; }
body .topnav-dropdown a.active-link { background: var(--ap-accent-soft); color: var(--ap-accent); font-weight: 600; }
body .topnav-dropdown a.active-link i { color: var(--ap-accent); }

body .topnav-clock, body .topnav-timer { color: var(--ap-ink-2); }
body .topnav-user-btn { background: rgba(0, 0, 0, 0.05); }
body .topnav-user-btn .avatar { background: var(--ap-accent); color: #fff; }
body .topnav-mobile-btn { background: rgba(0, 0, 0, 0.05); color: var(--ap-ink); border-radius: 50%; }
body .topnav-overlay { background: rgba(0, 0, 0, 0.18); }
/* El botón "Vista lateral" y similares dentro de la barra */
body .topnav a[class*="bg-white"], body .topnav button[class*="border"] { color: var(--ap-ink); }

body .mobile-menu {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}
body .mobile-menu-group summary { color: var(--ap-ink); font-weight: 600; border-bottom-color: var(--ap-hairline); }
body .mobile-menu-group a { color: var(--ap-ink); border-bottom-color: var(--ap-hairline); }
body .mobile-menu-group a.active-link { background: var(--ap-accent-soft); color: var(--ap-accent); }

/* ---------- Menú lateral: estilo barra lateral de macOS ---------- */
body .sidebar {
    background: rgba(246, 246, 248, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-right: 1px solid var(--ap-hairline);
}
body .sidebar-brand span.sidebar-text { color: var(--ap-ink); font-weight: 600; letter-spacing: -0.01em; }
body .sidebar-brand img { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
body .sidebar-user .name { color: var(--ap-ink); }
body .sidebar-user .role { color: var(--ap-ink-2); }
body .sidebar-section-label { color: var(--ap-ink-3); text-transform: none; letter-spacing: 0; font-weight: 600; }
body .sidebar-link { color: var(--ap-ink); font-weight: 400; border-radius: 8px; }
body .sidebar-link i { color: var(--ap-accent); }
body .sidebar-link:hover { background: rgba(0, 0, 0, 0.05); color: var(--ap-ink); }
body .sidebar-link.active-link { background: var(--ap-accent); color: #fff; font-weight: 500; }
body .sidebar-link.active-link i { color: #fff; }
body .sidebar-collapse-btn { background: #fff; color: var(--ap-ink-2); border: 1px solid var(--ap-hairline-strong); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
body .sidebar-toggle-menu-btn { background: #fff; border: 1px solid var(--ap-hairline); color: var(--ap-ink); border-radius: 980px; }
body .sidebar-footer { border-top-color: var(--ap-hairline); }
body .sidebar-footer .reloj-lateral { color: var(--ap-ink-2); }
body .sidebar-footer a.logout-lateral { color: var(--ap-red); }
body .sidebar-mobile-btn { background: rgba(255,255,255,0.85); color: var(--ap-ink); border-radius: 50%; backdrop-filter: blur(12px); }

/* ---------- Tarjetas y paneles ---------- */
body .bg-white.shadow,
body .bg-white.shadow-sm,
body .bg-white.shadow-md,
body .bg-white.rounded-lg,
body .bg-white.rounded-xl {
    border-radius: var(--ap-radius-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-color: transparent;
}
body .bg-white.shadow-lg, body .bg-white.shadow-xl {
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    border-color: transparent;
}
/* Tarjetas de color (indicadores): esquinas a juego y sin borde duro */
body [class*="bg-"][class*="-50"].rounded-lg,
body [class*="bg-"][class*="-50"].rounded-xl { border-radius: 16px; }

/* ---------- Botones ---------- */
body button[class*="bg-"][class*="text-white"],
body a[class*="bg-"][class*="text-white"],
body input[type="submit"][class*="bg-"] {
    border-radius: 980px;
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition: filter 0.15s ease, transform 0.08s ease;
}
body button[class*="bg-"][class*="text-white"]:hover,
body a[class*="bg-"][class*="text-white"]:hover { filter: brightness(1.08); }
body button[class*="bg-"][class*="text-white"]:active,
body a[class*="bg-"][class*="text-white"]:active { transform: scale(0.98); }
/* Botón principal = acento del sistema */
body .bg-blue-600[class*="text-white"], body .bg-blue-700[class*="text-white"] { background-color: var(--ap-accent); }
/* Botones secundarios (borde gris): estilo "píldora gris" de Apple */
body button.border.border-gray-300,
body a.border.border-gray-300,
body button[class*="bg-gray-100"],
body button[class*="bg-gray-200"] {
    border-radius: 980px;
    border-color: transparent;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ap-ink);
}
body button.border.border-gray-300:hover,
body a.border.border-gray-300:hover { background-color: rgba(0, 0, 0, 0.08); }

/* ---------- Campos de formulario ---------- */
body input[type="text"], body input[type="search"], body input[type="email"], body input[type="number"],
body input[type="password"], body input[type="date"], body input[type="time"], body input[type="tel"],
body input[type="url"], body input[type="month"], body select, body textarea {
    border-radius: var(--ap-radius-field);
    border-color: var(--ap-hairline-strong);
    background-color: #fff;
    color: var(--ap-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body input:focus, body select:focus, body textarea:focus {
    outline: none;
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 4px var(--ap-accent-ring);
    --tw-ring-shadow: 0 0 #0000;
}
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--ap-accent); }
body label { color: var(--ap-ink); }

/* Foco visible con teclado en todo lo que se puede accionar */
body a:focus-visible, body button:focus-visible, body summary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--ap-accent-ring);
    border-radius: 8px;
}

/* ---------- Tablas ---------- */
body table thead, body table thead tr, body thead.bg-gray-50, body tr.bg-gray-50 { background: transparent; }
body table th {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--ap-ink-2);
    border-bottom: 1px solid var(--ap-hairline);
}
body table td { border-color: var(--ap-hairline); }
body table tbody tr { transition: background-color 0.12s ease; }
body table tbody tr:hover { background-color: rgba(0, 0, 0, 0.025); }
body .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--ap-hairline); }
body .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
body .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ap-hairline); }
body .border-gray-100, body .border-gray-200 { border-color: var(--ap-hairline); }

/* Etiquetas de estado: tipo "pastilla" suave */
body span.rounded-full[class*="bg-"][class*="-100"] { font-weight: 500; letter-spacing: 0; }

/* Etiquetas en mayúsculas pequeñas → sentence case, como en Apple */
body .uppercase.tracking-wide, body .uppercase.tracking-wider { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ---------- Ventanas emergentes ---------- */
body .fixed.inset-0[class*="bg-gray-"][class*="bg-opacity"],
body .fixed.inset-0[class*="bg-black"] {
    background-color: rgba(0, 0, 0, 0.28) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---------- Avisos (éxito / error) ---------- */
body [class*="bg-green-100"][class*="border"], body [class*="bg-red-100"][class*="border"],
body [class*="bg-yellow-100"][class*="border"], body [class*="bg-blue-100"][class*="border"] {
    border-radius: 14px;
}

/* ---------- Pestañas tipo segmento (Mes/Año, Rango...) ---------- */
body .inline-flex.rounded-md.shadow-sm,
body .inline-flex.rounded-lg.border { border-radius: 980px; overflow: hidden; }

/* ---------- Barras de desplazamiento discretas (escritorio) ---------- */
@media (hover: hover) {
    body ::-webkit-scrollbar { width: 10px; height: 10px; }
    body ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
    body ::-webkit-scrollbar-track { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    body * { transition: none !important; }
}

/* ---------- Impresión: el tema nunca debe afectar lo impreso ---------- */
@media print {
    html body, body .page-content { background: #fff !important; }
    body .bg-white.shadow, body .bg-white.shadow-sm, body .bg-white.rounded-lg, body .bg-white.rounded-xl { box-shadow: none !important; }
}

/* ---------- Ajustes finos ---------- */
/* Logo sobre la barra blanca: anillo fino para que no se pierda */
body .topnav-brand img { box-shadow: 0 0 0 1px var(--ap-hairline-strong); }

/* Botones grises (enlaces o botones) también en píldora */
body a[class*="bg-gray-100"], body a[class*="bg-gray-200"],
body button[class*="bg-gray-100"], body button[class*="bg-gray-200"] {
    border-radius: 980px;
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ap-ink);
}
body a[class*="bg-gray-100"]:hover, body a[class*="bg-gray-200"]:hover,
body button[class*="bg-gray-100"]:hover, body button[class*="bg-gray-200"]:hover { background-color: rgba(0, 0, 0, 0.08); }

/* Íconos de acción en tablas: gris en reposo, su color al pasar el cursor */
body td a:not([class*="bg-"]) > i.fas, body td a:not([class*="bg-"]) > i.far,
body td button:not([class*="bg-"]) > i.fas, body td button:not([class*="bg-"]) > i.far {
    color: var(--ap-ink-3);
    transition: color 0.12s ease;
}
body td a:not([class*="bg-"]):hover > i, body td button:not([class*="bg-"]):hover > i,
body td a:not([class*="bg-"]):focus-visible > i, body td button:not([class*="bg-"]):focus-visible > i { color: inherit; }

/* ---------- Inicio de sesión ---------- */
body .btn-login { border-radius: 980px; font-weight: 500; letter-spacing: -0.01em; box-shadow: none; }
body .btn-login:hover { transform: none; box-shadow: none; filter: brightness(1.08); }

/* ---------- Consulta pública del cliente (estado_cuenta.php) ---------- */
/* Encabezado claro como apple.com en lugar del degradado oscuro */
body > .header {
    background: var(--ap-surface);
    color: var(--ap-ink);
    border-bottom: 1px solid var(--ap-hairline);
    padding: 28px 0 22px;
}
body > .header .title { color: var(--ap-ink); font-weight: 700; letter-spacing: -0.025em; font-size: 28px; }
body > .header .subtitle { color: var(--ap-ink-2); letter-spacing: 0; }
body > .header .logo { box-shadow: 0 0 0 1px var(--ap-hairline-strong), 0 4px 14px rgba(0,0,0,0.06); }
body .card { border-radius: var(--ap-radius-card); border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
body .card button[type="submit"] { border-radius: 980px !important; background: var(--ap-accent) !important; font-weight: 500; }
body .btn-recibo { border-radius: 980px; background: var(--ap-accent); }
body .footer { border-top-color: var(--ap-hairline); color: var(--ap-ink-3); }