/* ═══════════════════════════════════════
   GARGOT — TEMA LUMINOSO METRICOOL-STYLE
   SOBRESCRIBE DARK THEME CON !important
   ═══════════════════════════════════════ */

:root {
  /* VARIABLES OSCURAS → CLARAS (sobrescribiendo dark theme) */
  --bg: #FFFFFF !important;
  --surface: #F7F9FB !important;
  --surface-alt: #FFFFFF !important;
  --border: #E3E8EF !important;
  --accent: #FFC700 !important;
  --accent-dim: rgba(255, 199, 0, 0.08) !important;
  --text: #1A1F36 !important;
  --text-secondary: #697386 !important;
  --text-muted: #9FA6B2 !important;
  --shadow: rgba(26, 31, 54, 0.08) !important;
  --error: #EF4444 !important;
  --success: #10B981 !important;
  --warning: #F59E0B !important;

  /* NUEVAS VARIABLES PARA COMPONENTES */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7F9FB;
  --bg-tertiary: #EDF1F5;
  --bg-hover: #F0F3F7;

  /* GOLD/DORADO (color destacado) */
  --accent-orange: #FFC700;
  --accent-orange-hover: #FFB300;
  --accent-orange-light: #FFE082;
  --accent-orange-dark: #FFA500;
  --accent-orange-text: #FFFFFF;

  /* GRISES NEUTROS */
  --text-primary: #1A1F36;
  --text-secondary-new: #697386;
  --text-disabled: #C9CFD8;

  /* BORDES Y LÍNEAS */
  --border-color: #E3E8EF;
  --border-color-hover: #CBD5E1;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;

  /* SOMBRAS */
  --shadow-xs: 0 1px 2px rgba(26, 31, 54, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 31, 54, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 31, 54, 0.08);
  --shadow-lg: 0 12px 24px rgba(26, 31, 54, 0.10);
  --shadow-xl: 0 20px 40px rgba(26, 31, 54, 0.12);

  /* ESPACIADO */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* ═══════════════════════════════════════
   RESET Y BASE
   ═══════════════════════════════════════ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: #FFFFFF !important;
}

body {
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Syne', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  background: #FFFFFF !important;
  color: #1A1F36 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════ */

h1 {
  font-size: 36px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: #1A1F36 !important;
}

h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: #1A1F36 !important;
}

h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #1A1F36 !important;
}

h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #1A1F36 !important;
}

p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #697386 !important;
}

small {
  font-size: 14px !important;
  color: #9FA6B2 !important;
}

a {
  color: #FFC700 !important;
  text-decoration: none;
}

a:hover {
  color: #FFB300 !important;
  text-decoration: underline;
}

/* ═══════════════════════════════════════
   BOTONES - TODOS LOS TIPOS
   ═══════════════════════════════════════ */

button,
.btn,
.btn-primary,
input[type="submit"],
input[type="button"],
button.primary,
button[onclick*="guardar"],
button[onclick*="Guardar"],
button[onclick*="enviar"],
button[onclick*="Enviar"],
button[onclick*="crear"],
button[onclick*="Crear"],
button[onclick*="Iniciar"],
button[onclick*="iniciar"],
button[onclick*="Aceptar"],
button[onclick*="aceptar"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  background: #FFC700 !important;
  color: #FFFFFF !important;

  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'Syne', sans-serif !important;

  border: none !important;
  border-radius: 8px !important;

  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(255, 199, 0, 0.15) !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button.primary:hover {
  background: #FFB300 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 199, 0, 0.25) !important;
}

button:active,
.btn:active,
.btn-primary:active {
  transform: translateY(0) !important;
}

button:disabled,
button:disabled:hover {
  background: #C9CFD8 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Fix: permitir ocultar botones via style="display:none" inline */
button[style*="display: none"],
button[style*="display:none"],
.btn[style*="display: none"],
.btn[style*="display:none"] {
  display: none !important;
}

/* BOTONES SECUNDARIOS */
button.secondary,
button[onclick*="cancelar"],
button[onclick*="Cancelar"],
button[onclick*="cerrar"],
button[onclick*="Cerrar"] {
  background: #F7F9FB !important;
  color: #1A1F36 !important;
  border: 1px solid #E3E8EF !important;
  box-shadow: none !important;
}

button.secondary:hover,
button[onclick*="cancelar"]:hover {
  background: #EDF1F5 !important;
  border-color: #CBD5E1 !important;
}

/* ═══════════════════════════════════════
   INPUTS Y FORMULARIOS
   ═══════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  font-family: 'Syne', sans-serif !important;

  background: #FFFFFF !important;
  color: #1A1F36 !important;

  border: 1px solid #E3E8EF !important;
  border-radius: 8px !important;

  transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #FFC700 !important;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.08) !important;
  background: #FFFFFF !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #FFC700 !important;
}

label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1F36 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

placeholder {
  color: #9FA6B2 !important;
}

input::placeholder,
textarea::placeholder {
  color: #9FA6B2 !important;
}

/* ═══════════════════════════════════════
   CARDS Y CONTENEDORES
   ═══════════════════════════════════════ */

.card,
.container,
[class*="card"],
[class*="modal"],
[class*="dialog"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
  border: 1px solid #E3E8EF !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(26, 31, 54, 0.06) !important;
}

.card:hover,
[class*="card"]:hover {
  box-shadow: 0 4px 12px rgba(26, 31, 54, 0.08) !important;
  border-color: #CBD5E1 !important;
}

/* ═══════════════════════════════════════
   TABLAS
   ═══════════════════════════════════════ */

table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #FFFFFF !important;
  color: #1A1F36 !important;
}

thead {
  background: #F7F9FB !important;
  border-bottom: 1px solid #E3E8EF !important;
}

thead th {
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  color: #1A1F36 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #E3E8EF !important;
  color: #697386 !important;
}

tbody tr:hover {
  background: #F7F9FB !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

/* ═══════════════════════════════════════
   BADGES Y ETIQUETAS
   ═══════════════════════════════════════ */

.badge,
.tag,
[class*="badge"],
[class*="label"] {
  display: inline-block !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

.badge-primary,
.badge-success {
  background: #D1FAE5 !important;
  color: #065F46 !important;
}

.badge-warning {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

.badge-error,
.badge-danger {
  background: #FEE2E2 !important;
  color: #7F1D1D !important;
}

.badge-info {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}

/* ═══════════════════════════════════════
   MODALES Y OVERLAYS
   ═══════════════════════════════════════ */

[class*="modal"],
[class*="dialog"] {
  background: #FFFFFF !important;
  border: 1px solid #E3E8EF !important;
  box-shadow: 0 20px 40px rgba(26, 31, 54, 0.12) !important;
}

[class*="modal-overlay"],
[class*="backdrop"],
.overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════
   HEADER Y NAVEGACIÓN
   ═══════════════════════════════════════ */

header,
[class*="header"],
nav,
[class*="navbar"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
  border-bottom: 1px solid #E3E8EF !important;
  box-shadow: 0 1px 3px rgba(26, 31, 54, 0.06) !important;
}

nav a,
[class*="navbar"] a {
  color: #697386 !important;
  text-decoration: none !important;
}

nav a:hover,
[class*="navbar"] a:hover,
nav a.active,
[class*="navbar"] a.active {
  color: #FFC700 !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════
   ENTRADAS Y CONTENIDOS DINÁMICOS
   ═══════════════════════════════════════ */

/* Sobrescribir TODOS elementos oscuros #1a1a1a (div, span, input, etc.) */
*[style*="background:#1a1a1a"],
*[style*="background: #1a1a1a"],
[class*="entrada"],
[class*="card-entrada"],
[class*="item-entrada"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
  border: 1px solid #E3E8EF !important;
}

/* Sobrescribir bordes oscuros #333 en TODOS elementos */
*[style*="border:1px solid #333"],
*[style*="border: 1px solid #333"],
*[style*="border-bottom: 1px solid #333"],
*[style*="border-right: 1px solid #333"],
*[style*="border-left: 1px solid #333"],
*[style*="border-top: 1px solid #333"] {
  border-color: #E3E8EF !important;
}

/* Sobrescribir backgrounds oscuros #111 en TODOS elementos */
*[style*="background:#111"],
*[style*="background: #111"],
*[style*="background-color:#111"] {
  background: #F7F9FB !important;
  color: #1A1F36 !important;
}

/* Sobrescribir backgrounds oscuros #0a0a0a en TODOS elementos */
*[style*="background:#0a0a0a"],
*[style*="background: #0a0a0a"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
}

/* Sobrescribir textos claros #fff en TODOS elementos */
*[style*="color:#fff"],
*[style*="color: #fff"] {
  color: #1A1F36 !important;
}

/* Sobrescribir texts grises #666 en TODOS elementos */
*[style*="color:#666"],
*[style*="color: #666"] {
  color: #697386 !important;
}

/* Sobrescribir textos claros #ccc, #ddd, #eee en TODOS elementos */
*[style*="color:#ccc"],
*[style*="color: #ccc"],
*[style*="color:#ddd"],
*[style*="color: #ddd"],
*[style*="color:#eee"],
*[style*="color: #eee"],
*[style*="color:#e0e0e0"],
*[style*="color: #e0e0e0"] {
  color: #697386 !important;
}

/* Sobrescribir grises medios (#aaa, #999, #888, #555) */
*[style*="color:#aaa"],
*[style*="color: #aaa"],
*[style*="color:#999"],
*[style*="color: #999"],
*[style*="color:#888"],
*[style*="color: #888"],
*[style*="color:#555"],
*[style*="color: #555"] {
  color: #697386 !important;
}

/* Sobrescribir color lima #c8f135 (highlight oscuro) → gold */
*[style*="color:#c8f135"],
*[style*="color: #c8f135"],
*[style*="background:#c8f135"],
*[style*="background: #c8f135"] {
  color: #FFFFFF !important;
  background: #FFC700 !important;
}

/* Sobrescribir backgrounds lima oscuro (#c8f135) */
*[style*="background-color:#c8f135"],
*[style*="background-color: #c8f135"] {
  background: #FFC700 !important;
  color: #FFFFFF !important;
}

/* Sobrescribir backgrounds oscuros #333 */
*[style*="background:#333"],
*[style*="background: #333"] {
  background: #F7F9FB !important;
  color: #1A1F36 !important;
}

/* Sobrescribir backgrounds navy oscuro #1a1a2e */
*[style*="background:#1a1a2e"],
*[style*="background: #1a1a2e"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
}

/* Sobrescribir rojo error #f44336 → nuestro error color */
*[style*="color:#f44336"],
*[style*="color: #f44336"] {
  color: #EF4444 !important;
}

/* Sobrescribir verde success #4CAF50 → nuestro success color */
*[style*="color:#4CAF50"],
*[style*="color: #4CAF50"] {
  color: #10B981 !important;
}

/* Sobrescribir naranja #ff9800 → nuestro gold */
*[style*="color:#ff9800"],
*[style*="color: #ff9800"],
*[style*="background:#ff9800"],
*[style*="background: #ff9800"] {
  background: #FFC700 !important;
  color: #FFFFFF !important;
}

/* Sobrescribir backgrounds con rgb oscuro en TODOS elementos */
*[style*="background:rgba(26,26,26"],
*[style*="background: rgba(26,26,26"],
*[style*="background:rgba(10,10,10"],
*[style*="background: rgba(10,10,10"],
*[style*="background:rgba(0,0,0"],
*[style*="background: rgba(0,0,0"] {
  background: #FFFFFF !important;
  color: #1A1F36 !important;
}

/* ═══════════════════════════════════════
   BOTONES Y ELEMENTOS INTERACTIVOS
   ═══════════════════════════════════════ */

button,
input[type="button"],
input[type="submit"],
[role="button"],
[class*="btn"] {
  background: #FFC700 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
[role="button"]:hover,
[class*="btn"]:hover {
  background: #FFB300 !important;
}

/* Sobrescribir botones con estilos inline oscuros */
button[style*="background:#1a1a1a"],
button[style*="background:#111"],
button[style*="background:#0a0a0a"],
input[style*="background:#1a1a1a"],
input[style*="background:#111"] {
  background: #FFC700 !important;
  color: #FFFFFF !important;
}

/* Sobrescribir botones con estilos inline lima */
button[style*="background:#c8f135"],
button[style*="color:#c8f135"] {
  background: #FFC700 !important;
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════
   SIDEBARS
   ═══════════════════════════════════════ */

[class*="sidebar"],
aside {
  background: #F7F9FB !important;
  color: #1A1F36 !important;
  border-right: 1px solid #E3E8EF !important;
}

[class*="sidebar"] a,
aside a {
  color: #697386 !important;
  text-decoration: none !important;
}

[class*="sidebar"] a:hover,
[class*="sidebar"] a.active,
aside a:hover,
aside a.active {
  color: #FFC700 !important;
  background: rgba(255, 199, 0, 0.08) !important;
}

/* ═══════════════════════════════════════
   ESTADOS DE CONTENIDO
   ═══════════════════════════════════════ */

.success {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  border: 1px solid #6EE7B7 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.error,
.danger {
  background: #FEE2E2 !important;
  color: #7F1D1D !important;
  border: 1px solid #FCA5A5 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.warning {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid #FCD34D !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.info {
  background: #DBEAFE !important;
  color: #1E40AF !important;
  border: 1px solid #93C5FD !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 22px !important;
  }

  h3 {
    font-size: 18px !important;
  }

  button,
  .btn,
  input[type="submit"] {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  input[type="text"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
}

/* ═══════════════════════════════════════
   PRINT
   ═══════════════════════════════════════ */

@media print {
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  button,
  .btn,
  nav,
  [class*="navbar"] {
    display: none !important;
  }
}