/* ============================================================================
   validar_dataset.css — Estilos específicos del validador
   ---------------------------------------------------------------------------
   Objetivo:
     - Mantener intacto el modo claro
     - Armonizar el modo oscuro con la página principal
     - Mejorar contraste de card, labels, ayudas, botones y bloque técnico
============================================================================ */


/* ============================================================================
   1) CONTENEDOR GENERAL
============================================================================ */

#validator-root {
  max-width: 1380px;
}

#validator-root h2 {
  color: var(--c-text);
  font-weight: 700;
  letter-spacing: -0.02em;
}


/* ============================================================================
   2) TARJETA PRINCIPAL
============================================================================ */

#validator-root .card {
  background: #ffffff;
  border: 1px solid #d9e4ec;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(8, 24, 40, 0.06);
}

#validator-root .card-body {
  padding: 1.25rem 1.35rem;
}


/* ============================================================================
   3) FORMULARIOS Y TEXTOS AUXILIARES
============================================================================ */

#validator-root .form-label {
  font-weight: 600;
  color: #25384a;
}

#validator-root .form-text {
  color: #6d7f8e;
}

#validator-root hr {
  border-color: #d8e3eb;
  opacity: 1;
}


/* ============================================================================
   4) BLOQUE DE ESTADO / RESUMEN
============================================================================ */

#estado {
  border-radius: 8px;
}

#resumen .badge {
  font-size: 0.82rem;
}

#stats-line {
  color: #6b7b87;
}


/* ============================================================================
   5) DIAGNÓSTICO AUTOMÁTICO
============================================================================ */

#diagnostico .alert.alert-secondary {
  background: #eef4f8;
  border: 1px solid #d6e1e8;
  color: #1f3344;
}

#diagnostico .card.bg-light {
  background: #f7fafc !important;
  border: 1px solid #dde6ec !important;
}


/* ============================================================================
   6) DETALLE TÉCNICO
============================================================================ */

.validator-details {
  margin-top: 1rem;
}

.validator-details summary {
  cursor: pointer;
  user-select: none;
  color: #21415f;
  font-weight: 600;
}

.validator-details summary:hover {
  text-decoration: underline;
}

.validator-pre {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #0b1220;
  color: #e7eefc;
  max-height: 420px;
  overflow: auto;
  font-size: 0.9rem;
  border: 1px solid rgba(123, 161, 205, 0.18);
}


/* ============================================================================
   7) 🌙 MODO OSCURO — UNIFICACIÓN VISUAL
============================================================================ */

body.modo-oscuro #validator-root h2 {
  color: #eef6ff;
}

body.modo-oscuro #validator-root .text-muted {
  color: #c5d3df !important;
}

body.modo-oscuro #validator-root .card {
  background: #1a2026;
  border: 1px solid #34414d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

body.modo-oscuro #validator-root .card-body {
  color: #e6edf3;
}

body.modo-oscuro #validator-root .form-label {
  color: #eaf2fa;
}

body.modo-oscuro #validator-root .form-control {
  background: #11171d;
  border-color: #3e4a55;
  color: #e6edf3;
}

body.modo-oscuro #validator-root .form-control:focus {
  background: #11171d;
  border-color: #58a6ff;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.18);
}

body.modo-oscuro #validator-root .form-text {
  color: #bfcddb !important;
}

body.modo-oscuro #validator-root hr {
  border-color: #33414d;
}

body.modo-oscuro #estado.alert-success {
  background: rgba(25, 135, 84, 0.16);
  color: #c8f1dc;
  border-color: rgba(25, 135, 84, 0.34);
}

body.modo-oscuro #estado.alert-danger {
  background: rgba(220, 53, 69, 0.16);
  color: #ffd3d8;
  border-color: rgba(220, 53, 69, 0.34);
}

body.modo-oscuro #estado.alert-warning {
  background: rgba(255, 193, 7, 0.16);
  color: #ffe9a6;
  border-color: rgba(255, 193, 7, 0.30);
}

body.modo-oscuro #stats-line {
  color: #c2cfda;
}

body.modo-oscuro #diagnostico .alert.alert-secondary {
  background: #212a33;
  border-color: #374452;
  color: #e4edf6;
}

body.modo-oscuro #diagnostico .card.bg-light {
  background: #161d24 !important;
  border: 1px solid #303b46 !important;
  color: #dfe8f1;
}

body.modo-oscuro #diagnostico .fw-semibold,
body.modo-oscuro #diag-text,
body.modo-oscuro #diag-steps {
  color: #eaf2fa !important;
}

body.modo-oscuro .validator-details summary {
  color: #d8e9fb;
}

body.modo-oscuro .validator-pre {
  background: #0d141c;
  color: #e7eefc;
  border: 1px solid #2f3c49;
}


/* ============================================================================
   8) BOTONES — AJUSTE SUAVE EN MODO OSCURO
============================================================================ */

body.modo-oscuro #btnLimpiar.btn-outline-secondary {
  color: #dbe7f3;
  border-color: #5b6977;
  background: transparent;
}

body.modo-oscuro #btnLimpiar.btn-outline-secondary:hover {
  background: #2b333c;
  color: #ffffff;
  border-color: #6c7b89;
}

/* ============================================================================
   FIX — Input file en modo oscuro
   Evita que el botón nativo se ponga blanco al pasar el mouse
============================================================================ */

body.modo-oscuro #validator-root input[type="file"]::file-selector-button {
  background: #1f2730;
  color: #e6edf3;
  border: 1px solid #3e4a55;
  border-right: 1px solid #3e4a55;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.modo-oscuro #validator-root input[type="file"]::file-selector-button:hover {
  background: #2a3440;
  color: #ffffff;
  border-color: #4f5d6b;
}

body.modo-oscuro #validator-root input[type="file"]::file-selector-button:active {
  background: #17202a;
  color: #ffffff;
  border-color: #58a6ff;
}