/* ============================================================================
   ExpedienteGine — Themes (Instagram & iOS Glassmorphism)
   Variables CSS por tema: Claro, Oscuro y Auto (Sistema).
   ============================================================================ */

/* ── Claro (DEFAULT) ──────────────────────────────────────────────────────── */
[data-theme="claro"],
[data-theme="sistema"],
:root {
  --color-bg-primary:      #FAFAFA;
  --color-bg-secondary:    #F4F5F7;
  --color-surface:         #FFFFFF;
  /* Superficies de tarjeta y cajas internas (usadas en estilos inline de plantillas) */
  --color-bg-card:         #FFFFFF;
  --color-bg-inner:        #F2F2F7;
  --color-text-primary:    #0F172A;
  --color-text-secondary:  #475569;
  --color-navy:            #0F172A;
  --color-accent:          #007AFF;
  --color-accent-soft:     #F1F5F9;
  --color-accent-rgb:      0, 122, 255;
  /* Alias usado por varias plantillas (cirugía, perfil, reportes). Se definía
     en ninguna parte → caía a un fallback BLANCO y rompía el modo oscuro.
     Referencia accent-soft, así que sigue el tema (claro/oscuro) solo. */
  --color-bg-sidebar:      var(--color-accent-soft);
  /* Color de relleno para botones de acción primaria (azul en ambos temas) */
  --color-action:          #007AFF;
  --color-action-text:     #FFFFFF;
  --color-secondary:       #10B981;
  --color-secondary-soft:  #ECFDF5;
  --color-olive:           #64748B;
  --color-border:          #E2E8F0;
  --color-error:           #EF4444;
  --color-success:         #10B981;
  --color-warning:         #F59E0B;
  --color-sidebar-bg:      #FFFFFF;
  --color-sidebar-text:    #475569;
  --color-sidebar-active:  #007AFF;
  --color-topbar-bg:       #FFFFFF;
  --color-input-bg:        #FFFFFF;
  --color-input-border:    #E2E8F0;
  --swatch-color:          #007AFF;
  /* Material "vidrio" (Liquid Glass, iOS 26/27): SOLO para cromo — barras,
     chips, sheets, FAB. El contenido clínico (formularios, notas, recetas)
     permanece opaco por legibilidad. Las guardas al final de este archivo
     vuelven estos tokens opacos con transparencia reducida / contraste alto /
     modo de bajo consumo, exactamente como hace el propio iOS 27. */
  --glass-bg:        rgba(255, 255, 255, 0.66);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-blur:      blur(22px) saturate(180%);
  --glass-inner:     rgba(255, 255, 255, 0.60);
  --glass-edge:      rgba(15, 23, 42, 0.10);
  --glass-shadow:    0 10px 30px rgba(15, 23, 42, 0.14);
}

/* ── Oscuro ───────────────────────────────────────────────────────────────── */
[data-theme="oscuro"] {
  --color-bg-sidebar:      #1E293B;
  --color-bg-primary:      #000000;
  --color-bg-secondary:    #121212;
  --color-surface:         #1E1E1E;
  /* Superficies de tarjeta y cajas internas (usadas en estilos inline de plantillas) */
  --color-bg-card:         #1E1E1E;
  --color-bg-inner:        #2C2C2E;
  --color-text-primary:    #F8FAFC;
  --color-text-secondary:  #94A3B8;
  --color-navy:            #000000;
  --color-accent:          #FFFFFF;
  --color-accent-soft:     #1E293B;
  --color-accent-rgb:      255, 255, 255;
  /* En oscuro el acento es blanco; los botones de acción usan azul iOS visible */
  --color-action:          #0A84FF;
  --color-action-text:     #FFFFFF;
  --color-secondary:       #34D399;
  --color-secondary-soft:  #064E3B;
  --color-olive:           #A7F3D0;
  --color-border:          #262626;
  --color-error:           #F87171;
  --color-success:         #34D399;
  --color-warning:         #FBBF24;
  --color-sidebar-bg:      #000000;
  --color-sidebar-text:    #94A3B8;
  --color-sidebar-active:  #FFFFFF;
  --color-topbar-bg:       #000000;
  --color-input-bg:        #121212;
  --color-input-border:    #262626;
  --swatch-color:          #FFFFFF;
  /* Vidrio en oscuro: base gris-negra (no negro puro: el blur necesita algo de
     luminancia para leerse como material) y brillo interior tenue. */
  --glass-bg:        rgba(22, 22, 24, 0.64);
  --glass-bg-strong: rgba(28, 28, 30, 0.82);
  --glass-blur:      blur(22px) saturate(160%);
  --glass-inner:     rgba(255, 255, 255, 0.10);
  --glass-edge:      rgba(255, 255, 255, 0.10);
  --glass-shadow:    0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Modo oscuro: las cajas de CONTENIDO con bg-light/bg-white de Bootstrap son
   claras y su texto hereda el color claro del tema → texto invisible. Se vuelven
   oscuras y legibles. Se excluyen badges/code/botones que usan bg-light + text-dark
   intencionalmente (deben permanecer claros con texto oscuro). */
[data-theme="oscuro"] .bg-light:not(.text-dark):not(.badge):not(.btn):not(code),
[data-theme="oscuro"] .bg-white:not(.text-dark):not(.badge):not(.btn):not(code) {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary);
  border-color: var(--color-border) !important;
}

/* Modo oscuro: los botones "outline" de Bootstrap pintan el texto con su color
   base (primary/secondary), que sobre fondo negro queda casi invisible (texto
   oscuro sobre oscuro). Se redefinen las variables --bs-btn-* del tema para que
   el texto y el borde sean legibles. Los semánticos (danger/success/warning)
   usan sus colores claros del tema oscuro. Aplica a TODOS los templates, no solo
   al menú de acciones de la consulta. */
[data-theme="oscuro"] .btn-outline-primary,
[data-theme="oscuro"] .btn-outline-secondary {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-bg: var(--color-bg-inner);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-border-color: var(--color-text-secondary);
  --bs-btn-active-bg: var(--color-bg-inner);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-border-color: var(--color-text-secondary);
}
[data-theme="oscuro"] .btn-outline-danger {
  --bs-btn-color: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-bg: var(--color-error);
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: var(--color-error);
  --bs-btn-active-color: #000;
}
[data-theme="oscuro"] .btn-outline-success {
  --bs-btn-color: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: var(--color-success);
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: var(--color-success);
  --bs-btn-active-color: #000;
}
[data-theme="oscuro"] .btn-outline-warning {
  --bs-btn-color: var(--color-warning);
  --bs-btn-border-color: var(--color-warning);
  --bs-btn-hover-bg: var(--color-warning);
  --bs-btn-hover-color: #000;
  --bs-btn-active-bg: var(--color-warning);
  --bs-btn-active-color: #000;
}

/* Swatches para selector visual */
.swatch-sistema { background: linear-gradient(135deg, #FAFAFA 0%, #007AFF 50%, #000000 50%, #FFFFFF 100%); }
.swatch-claro   { background: #FAFAFA; border: 1px solid #E2E8F0; }
.swatch-oscuro  { background: #121212; border: 1px solid #262626; }

/* ── Guardas del material vidrio ─────────────────────────────────────────────
   iOS 27 degrada Liquid Glass a superficies opacas cuando el usuario pide
   menos transparencia o más contraste; aquí se replica vía tokens para que
   TODO el cromo (tabbar, topbar, chips, sheets) caiga junto, sin excepciones
   por componente. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-theme="claro"],
  [data-theme="sistema"],
  :root {
    --glass-bg:        #FFFFFF;
    --glass-bg-strong: #FFFFFF;
    --glass-blur:      none;
    --glass-inner:     transparent;
    --glass-edge:      var(--color-border);
  }
  [data-theme="oscuro"] {
    --glass-bg:        #1E1E1E;
    --glass-bg-strong: #1E1E1E;
    --glass-blur:      none;
    --glass-inner:     transparent;
    --glass-edge:      var(--color-border);
  }
}

/* Bajo consumo: el blur es de lo más caro en GPU; el cromo se vuelve sólido.
   (Va al final del archivo para ganar por orden a los bloques de tema.) */
body.ios-low-power {
  --glass-bg:        var(--color-surface);
  --glass-bg-strong: var(--color-surface);
  --glass-blur:      none;
  --glass-inner:     transparent;
}