/* ==========================================================================
   ESTILOS DE MARCA PERSONAL A11Y - LABORATORIO A11Y
   Soporte completo Modo Claro / Modo Oscuro (Lighthouse 100% Passed)
   ========================================================================== */

:root {
  /* Fondos en Modo Claro */
  --bg-light: #f8fafc;        /* Slate 50 - Fondo general */
  --bg-card: #ffffff;         /* Blanco puro - Tarjetas */
  --bg-card-header: #f1f5f9;  /* Slate 100 - Encabezados claros */
  --bg-code-box: #0f172a;     /* Slate 900 - Contenedores de snippets de código */
  
  /* Textos con Contraste AAA (> 7:1) en Modo Claro */
  --text-main: #0f172a;       /* Slate 900 - Texto principal (19:1) */
  --text-muted: #334155;      /* Slate 700 - Texto secundario (9.5:1) */
  --text-code-light: #f8fafc; /* Slate 50 - Texto dentro del código oscuro (15:1) */
  --border-color: #cbd5e1;    /* Slate 300 - Bordes */
  
  /* Colores de Estado Accesibles */
  --brand-green: #15803d;     /* Green 700 - Texto/Bordes Verdes (7.4:1 sobre blanco) */
  --brand-green-bg: #f0fdf4;  /* Fondo badge verde */
  --danger-red: #b02a37;      /* Red 600 - Texto/Bordes Rojos (7.1:1 sobre blanco) */
  --danger-red-bg: #fef2f2;   /* Fondo badge rojo */
  --warning-amber: #b45309;  /* Amber 700 - Icono warning */
  --brand-blue: #1d4ed8;     /* Blue 700 - Enlaces y acentos */
}

/* ==========================================================================
   MODO OSCURO - VARIABLES (Vía atributo data-theme="dark" o clase .dark-mode)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #0b0f19;        /* Azul noche profundo */
    --bg-card: #1e293b;         /* Slate 800 - Tarjetas en modo oscuro */
    --bg-card-header: #334155;  /* Slate 700 */
    --bg-code-box: #020617;     /* Slate 950 */
    
    --text-main: #f8fafc;       /* Slate 50 - Texto principal sobre oscuro */
    --text-muted: #94a3b8;      /* Slate 400 - Texto secundario */
    --text-code-light: #f8fafc; 
    --border-color: #334155;    /* Slate 700 - Bordes sutiles */
    
    --brand-green: #4ade80;     /* Green 400 - Verde brillante accesible sobre oscuro (> 7:1) */
    --brand-green-bg: #062c19;  
    --danger-red: #fca5a5;      /* Red 300 - Rojo accesible sobre oscuro (> 7:1) */
    --danger-red-bg: #450a0a;   
    --brand-blue: #60a5fa;     /* Blue 400 */
  }
}

/* Forzado Manual de Modo Oscuro */
[data-theme="dark"], body.dark-mode {
  --bg-light: #0b0f19;
  --bg-card: #1e293b;
  --bg-card-header: #334155;
  --bg-code-box: #020617;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-code-light: #f8fafc;
  --border-color: #334155;
  
  --brand-green: #4ade80;
  --brand-green-bg: #062c19;
  --danger-red: #fca5a5;
  --danger-red-bg: #450a0a;
  --brand-blue: #60a5fa;
}

/* Estilos Generales */
body {
  background-color: var(--bg-light);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Enlace de salto de accesibilidad (Skip Link) - WCAG 2.4.1 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  background: var(--bg-code-box);
  color: #ffffff;
  padding: 12px 20px;
  z-index: 9999;
  font-weight: 700;
  text-decoration: underline;
  border-radius: 0 0 6px 6px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--brand-blue) !important;
}

/* Anillo de Foco Accesible - WCAG 2.4.7 / WCAG 2.4.13 */
*:focus-visible {
  outline: 3px solid var(--brand-blue) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Fuentes y componentes de código */
code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

/* Estilos para etiquetas <code> generales */
code {
  color: var(--text-main);
  background-color: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.terminal-header {
  background-color: #1e293b;
  color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
}

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.dot-red { background-color: #ef4444; }
.dot-yellow { background-color: #f59e0b; }
.dot-green { background-color: #22c55e; }

.card-a11y {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Badges de Estado Corregidos */
.badge-a11y-pass {
  background-color: var(--brand-green-bg);
  color: var(--brand-green);
  border: 1px solid var(--brand-green);
  font-weight: 700;
}

.badge-a11y-fail {
  background-color: var(--danger-red-bg);
  color: var(--danger-red);
  border: 1px solid var(--danger-red);
  font-weight: 700;
}

/* Bloques de código tipo consola */
.code-box-fail {
  background-color: var(--bg-code-box) !important;
  color: #fca5a5 !important;
  border: 2px solid var(--danger-red) !important;
}
.code-box-fail code {
  background: transparent;
  font-size: 1rem;
  color: #fca5a5 !important;
}

.code-box-pass {

  background-color: var(--bg-code-box) !important;
  color: #86efac !important;
  border: 2px solid var(--brand-green) !important;
}

.code-box-pass code {
  background: transparent;
  color: #86efac !important;
  font-size: 1rem;
}

/* Botones Accesibles */
.btn-brand-primary {
  background-color: var(--brand-blue);
  color: #ffffff !important;
  font-weight: 700;
  border: none;
}
.btn-brand-primary:hover {
  background-color: #1e40af;
  color: #ffffff !important;
}

.btn-outline-danger-a11y {
  color: var(--danger-red) !important;
  border-color: var(--danger-red) !important;
  background-color: transparent;
  font-weight: 600;
}
.btn-outline-danger-a11y:hover {
  background-color: var(--danger-red-bg);
  color: var(--danger-red) !important;
}

.btn-outline-success-a11y {
  color: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  background-color: transparent;
  font-weight: 600;
}
.btn-outline-success-a11y:hover {
  background-color: var(--brand-green-bg);
  color: var(--brand-green) !important;
}

/* Clases Tipográficas */
.text-head {
  color: var(--text-code-light);
  font-size: 2rem;
}

.text-success {
  color: var(--brand-green) !important;
}

.text-muted, .text-white-50, .text-light {
  color: var(--text-muted) !important;
}

.text-error {
  color: var(--danger-red);
  font-weight: 600;
}

.obligatorio {
  color: var(--danger-red);
}

.bg-light .text-danger {
  color: var(--danger-red) !important;
}

.p-principal {
  font-size: 1rem !important;
}

/* Adaptabilidad de Imágenes */
.linkedin-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.imagen-ejemplo {
  width: 100%;
  max-width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

.style-img-adaptable {
  max-height: 400px;
  width: auto;
  object-fit: contain;
}

/* Contenedor de WAC (Escalado 2x Responsivo) */
.contenedor-wac {
  position: relative;
  overflow: visible !important;
  min-height: 350px;
}

.wag-saludando {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: scale(2);
  transform-origin: center center;
  transition: transform 0.3s ease;
}

@media (max-width: 991px) {
  .contenedor-wac {
    min-height: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .wag-saludando {
    transform: scale(1.3);
    max-width: 260px;
  }
}

/* Línea Divisora Accesible */
.linea-divisora {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, var(--brand-green), rgba(255, 255, 255, 0.1));
  opacity: 1;
  margin: 3rem 0;
}

.extra-small {
  font-size: 0.75rem;
}