/**
 * SOCIO - Estilos Globales para Preferencias de Usuario
 * Este archivo se incluye en todas las páginas para aplicar las preferencias
 */

/* === FUENTES ACCESIBLES === */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');

/* === VARIABLES GLOBALES === */
:root {
    /* Tamaño de fuente base (se actualiza dinámicamente) */
    --base-font-size: 16px;

    /* Colores principales unificados */
    --color-primary: #4a90e2;
    --color-primary-dark: #357abd;
    --color-primary-light: rgba(74, 144, 226, 0.08);
    --color-secondary: #f0c14b;
    --color-secondary-dark: #ddb347;
    --color-secondary-light: rgba(240, 193, 75, 0.1);

    /* Colores de estado */
    --color-success: #28a745;
    --color-success-hover: #218838;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-warning: #ffc107;
    --color-warning-hover: #e0a800;
    --color-info: #17a2b8;
    --color-info-hover: #138496;

    /* Colores de texto (mejor contraste en tema claro) */
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #4b5563;
    --text-light: #ffffff;
    --text-dark: #000000;

    /* Colores de fondo tema claro (por defecto) */
    --bg-primary: #F5E6D3;
    --bg-secondary: #ffffff;
    --bg-card: var(--color-primary);
    --bg-sidebar: #6c757d;
    --bg-light: #f8f9fa;
    --bg-dark: #343a40;

    /* Colores de borde y sombra */
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --border-dark: #495057;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Espaciado unificado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;

    /* Bordes redondeados */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;

    /* Transiciones */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* Compatibilidad con variables anteriores */
    --accent-yellow: var(--color-secondary);
    --accent-yellow-hover: var(--color-secondary-dark);
    --accent-blue: var(--color-primary);
    --accent-blue-hover: var(--color-primary-dark);
    --accent-red: var(--color-danger);
    --accent-red-hover: var(--color-danger-hover);
    --accent-green: var(--color-success);
    --accent-green-hover: var(--color-success-hover);
    --text-card: var(--text-light);
}

/* === RESPONSIVE PARA TABLETS (<= 992px) === */
@media (max-width: 992px) {
  /* Layout general */
  .main-container {
    display: block !important;
  }
  .main-container .content-area,
  .contenido,
  main,
  .content {
    padding: 16px !important;
    width: 100% !important;
  }

  /* Sidebar encima del contenido */
  .sidebar {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 16px !important;
  }

  /* Grillas en una columna cuando estén 50/50 */
  .w-1\/2,
  .w-5\/12,
  .w-7\/12,
  .w-6\/12,
  .w-8\/12,
  .w-4\/12,
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl {
    width: 100% !important;
    max-width: 100% !important;
  }

  .flex.justify-between,
  .flex.items-start,
  .flex.items-center.gap-6,
  .flex.items-start.gap-6 {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  /* Formularios */
  form, .formulario { width: 100% !important; }
  .form-group { width: 100% !important; }
  input, select, textarea { width: 100% !important; }
  .form-buttons, .btn-group { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  @media (max-width: 640px) {
    .form-buttons, .btn-group { grid-template-columns: 1fr !important; }
  }

  /* Lecciones (línea de tiempo) */
  #timelineContainer { padding-left: 0 !important; }
  .timeline-drop-zone { min-height: 56px !important; }
  .evento-arrastrable { font-size: 1rem !important; }
}

/* === TEMA OSCURO === */
[data-theme="dark"] {
    --bg-primary: #1a1a1a !important;
    --bg-secondary: #2d2d2d !important;
    --bg-card: #2d3748 !important;
    --bg-sidebar: #2d3748 !important;
    --text-primary: #ffffff !important;
    --text-secondary: #e2e8f0 !important;
    --text-card: #ffffff !important;
    --border-color: #4a5568 !important;
    --shadow: rgba(0, 0, 0, 0.3) !important;
    --color-primary: #4a90e2 !important;
    --color-primary-dark: #357abd !important;
    --accent-yellow: #f59e0b !important;
    --accent-yellow-hover: #d97706 !important;
}

/* Aplicar tema oscuro a elementos específicos */
[data-theme="dark"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-gray-100 {
    background: var(--bg-secondary) !important;
}

[data-theme="dark"] .shadow-2xl,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-md {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Formularios en modo oscuro */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input::placeholder {
    color: var(--text-secondary) !important;
}

/* Alertas en modo oscuro */
[data-theme="dark"] .alert,
[data-theme="dark"] .alert-box {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-content {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-content h3 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .alert-content p {
    color: var(--text-secondary) !important;
}

/* Botones en modo oscuro */
[data-theme="dark"] .bg-yellow-500 {
    background: var(--accent-yellow, #f59e0b) !important;
    color: #1f2937 !important;
}

[data-theme="dark"] .bg-yellow-500:hover,
[data-theme="dark"] .hover\\:bg-yellow-600:hover {
    background: var(--accent-yellow-hover, #d97706) !important;
}

/* Mejoras para elementos específicos */
[data-theme="dark"] pre {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .rounded {
    border-color: var(--border-color) !important;
}

/* Contenedores principales */
[data-theme="dark"] .min-h-screen {
    background: #1a1a1a !important;
}

[data-theme="dark"] .flex-col {
    background: #1a1a1a !important;
}

/* Reglas más específicas para modo oscuro */
[data-theme="dark"] html {
    background: #1a1a1a !important;
}

[data-theme="dark"] body {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Formularios específicos */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* Contenedores de formularios */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

/* Texto específico */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-muted,
[data-theme="dark"] label,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div {
    color: #ffffff !important;
}

/* Headers y títulos */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

/* Botones específicos */
[data-theme="dark"] .btn-primary {
    background-color: #4a90e2 !important;
    border-color: #4a90e2 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

/* Enlaces */
[data-theme="dark"] a {
    color: #4a90e2 !important;
}

[data-theme="dark"] a:hover {
    color: #357abd !important;
}

[data-theme="dark"] .navbar {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
}

[data-theme="dark"] .header {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
}

[data-theme="dark"] .footer {
    background: #1a1a1a !important;
    color: #e2e8f0 !important;
}

/* === TEMA ALTO CONTRASTE === */
[data-theme="high-contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-card: #000000;
    --bg-sidebar: #000000;
    --text-primary: #ffffff;
    --text-secondary: #ffff00;
    --text-card: #ffff00;
    --border-color: #ffffff;
    --shadow: rgba(255, 255, 255, 0.3);
    --accent-yellow: #ffff00;
    --accent-yellow-hover: #ffff66;
    --accent-blue: #0066ff;
    --accent-blue-hover: #0052cc;
}

[data-theme="high-contrast"] * {
    border-color: #ffffff !important;
}

[data-theme="high-contrast"] .navbar {
    background: #000000 !important;
    border-bottom: 2px solid #ffffff !important;
}

[data-theme="high-contrast"] .header {
    background: #000000 !important;
    border-bottom: 2px solid #ffffff !important;
}

[data-theme="high-contrast"] .footer {
    background: #000000 !important;
    color: #ffff00 !important;
    border-top: 2px solid #ffffff !important;
}

[data-theme="high-contrast"] .btn-nav {
    background: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

[data-theme="high-contrast"] .btn-nav:hover {
    background: #ffff00 !important;
    color: #000000 !important;
}

[data-theme="high-contrast"] .btn-primary,
[data-theme="high-contrast"] .btn-primario {
    background: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

[data-theme="high-contrast"] .btn-primary:hover,
[data-theme="high-contrast"] .btn-primario:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

/* === FUENTE ACCESIBLE === */
[data-font="accessible"] {
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

[data-font="accessible"] * {
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif !important;
}

/* === APLICACIÓN DE TAMAÑO DE FUENTE === */
/* Sistema de escalado proporcional que respeta la estructura */
/* El navbar NO se ve afectado por el tamaño de fuente del usuario */

html {
    font-size: var(--base-font-size) !important;
}

body {
    font-size: var(--base-font-size) !important;
    line-height: 1.6;
}

/* Asegurar que todos los elementos hereden el tamaño de fuente */
body * {
    font-size: inherit;
}

/* Escalado proporcional de títulos usando rem */
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

/* Texto de párrafos y elementos de contenido - CONSISTENTE */
p, span, div, li, td, th, label {
    font-size: 1rem;
}

/* Botones y elementos de navegación - CONSISTENTE */
.btn, button, .menu-btn, .btn-primary, .btn-secundario, .boton {
    font-size: 1rem;
}

/* Texto pequeño */
small, .text-sm, .text-small {
    font-size: 0.875rem;
}

/* Texto grande */
.text-lg, .text-large {
    font-size: 1.125rem;
}

/* Texto extra grande */
.text-xl {
    font-size: 1.25rem;
}

/* Inputs y formularios - CONSISTENTE */
input, select, textarea {
    font-size: 1rem;
}

/* Sidebar y navegación - AFECTADO por tamaño de fuente */
.sidebar .menu-btn {
    font-size: 1rem;
}

.sidebar .user-name {
    font-size: 1.125rem;
}

.sidebar .user-welcome {
    font-size: 0.875rem;
}

/* Navbar - NO AFECTADO por tamaño de fuente del usuario */
.navbar h1 {
    font-size: 48px !important; /* Tamaño fijo en px */
}

.navbar .btn-regresar {
    font-size: 14px !important; /* Tamaño fijo en px */
}

.navbar .logo .circle {
    font-size: 40px !important; /* Tamaño fijo en px */
}

/* Alertas - CONSISTENTE */
.alert {
    font-size: 1rem;
}

/* Footer - CONSISTENTE */
.footer {
    font-size: 1rem;
}

/* === APLICACIÓN DE COLORES GLOBALES === */
body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* === REGLAS UNIVERSALES PARA MODO OSCURO === */
[data-theme="dark"] * {
    border-color: #4a5568 !important;
}

[data-theme="dark"] *:not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not([class*="fa-"]) {
    color: inherit !important;
}

/* Forzar colores específicos en modo oscuro */
[data-theme="dark"] body,
[data-theme="dark"] html {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

[data-theme="dark"] main,
[data-theme="dark"] .main,
[data-theme="dark"] .contenido,
[data-theme="dark"] .content {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Navbar y header específicos */
[data-theme="dark"] .navbar,
[data-theme="dark"] header {
    background-color: #2d3748 !important;
    color: #ffffff !important;
}

/* Footer específico */
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
    background-color: #1a1a1a !important;
    color: #e2e8f0 !important;
}

.main-container .content-area,
.contenido {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.sidebar {
    background: var(--bg-sidebar) !important;
}

.user-info,
.user-welcome {
    color: var(--text-secondary) !important;
}

/* === TRANSICIONES SUAVES === */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* === MEJORAS DE ACCESIBILIDAD === */
/* Mejor contraste para enlaces */
a {
    color: var(--accent-blue);
    text-decoration: underline;
}

a:hover {
    color: var(--accent-blue-hover);
}

/* Placeholders con mejor contraste en tema claro */
input::placeholder,
textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Inputs y selects con mayor contraste (tema claro) */
input,
select,
textarea {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1.5px solid #9ca3af !important; /* gris medio más visible */
}

input:hover,
select:hover,
textarea:hover {
    border-color: #6b7280 !important; /* gris más oscuro al hover */
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25) !important; /* halo accesible */
    outline: none !important;
}

/* Asegurar que el botón del ojo sea clickeable sobre el input en todos los formularios */
.password-input-wrapper { position: relative; }
.password-input-wrapper .toggle-password {
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Estándar global para el ojo dentro del campo de contraseña */
.password-input-wrapper {
    overflow: visible !important;
}
.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    padding-right: 48px !important; /* espacio para el ojo */
}
.password-input-wrapper .toggle-password {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ocultar íconos nativos del navegador de forma global para evitar duplicados */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="text"]::-ms-clear,
input::-ms-reveal,
input::-ms-clear { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; pointer-events: none !important; }
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="text"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-password-toggle,
input[type="text"]::-webkit-password-toggle { display: none !important; visibility: hidden !important; -webkit-appearance: none !important; }

/* Botones con mayor contraste en tema claro */
.btn,
button,
.btn-primary,
.btn-primario,
.btn-secundario,
.btn-secondary,
.btn-secondary-alt,
.boton {
    border: 1px solid rgba(0,0,0,0.18) !important;
}

.btn:hover,
button:hover,
.btn-primary:hover,
.btn-primario:hover,
.btn-secundario:hover,
.btn-secondary:hover,
.btn-secondary-alt:hover,
.boton:hover {
    filter: none !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.15) !important;
}

.btn:focus,
button:focus,
.btn-primary:focus,
.btn-primario:focus,
.btn-secundario:focus,
.btn-secondary:focus,
.btn-secondary-alt:focus,
.boton:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.30) !important; /* halo azul accesible */
}

/* Tarjetas y modales con mejor contraste (tema claro) */
.card,
.modal-content,
.dropdown-menu,
.alert-box,
.timeline-drop-zone {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #cbd5e1 !important; /* slate-300 */
}

/* En modo oscuro no subrayar enlaces (se ve más limpio sobre fondos oscuros) */
[data-theme="dark"] a,
[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus,
[data-theme="dark"] a:active {
    text-decoration: none !important;
}

/* Quitar subrayado en títulos y enlaces dentro de tarjetas (Temas/Logros) en modo oscuro */
[data-theme="dark"] .tema-title,
[data-theme="dark"] .tema-card a,
[data-theme="dark"] .logro-card a,
[data-theme="dark"] .logro-card h3,
[data-theme="dark"] .content-area a,
[data-theme="dark"] .btn-regresar:hover {
    text-decoration: none !important;
}

[data-theme="high-contrast"] a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

[data-theme="high-contrast"] a:hover {
    color: #ffffff !important;
}

/* Mejor visibilidad para elementos de formulario */
input,
select,
textarea,
button {
    font-size: var(--base-font-size) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="high-contrast"] input,
[data-theme="high-contrast"] select,
[data-theme="high-contrast"] textarea {
    background: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffffff !important;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    :root {
        --base-font-size: calc(var(--base-font-size) * 1.1);
    }
}

/* === RESPONSIVE GLOBAL (MÓVILES) === */
@media (max-width: 768px) {
  /* Layout principal */
  .main-container {
    display: block !important;
  }
  .main-container .content-area,
  .contenido,
  main,
  .content {
    padding: 12px !important;
    width: 100% !important;
  }

  /* Sidebar: apilar o colapsar */
  .sidebar {
    width: 100% !important;
    position: relative !important;
    margin-bottom: 12px !important;
  }
  .sidebar .menu { flex-wrap: wrap !important; }

  /* Navbar */
  .navbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .navbar .btn-regresar { align-self: stretch !important; text-align: center !important; }

  /* Footer */
  .footer, footer { padding: 16px !important; }
  .footer .footer-content { display: block !important; }
  .footer .footer-email { display: inline-block !important; margin-top: 6px !important; }

  /* Formularios */
  form, .formulario, .auth-form, .register-form, .login-form { width: 100% !important; }
  .form-group { width: 100% !important; }
  input, select, textarea { width: 100% !important; }
  .form-buttons, .btn-group { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .btn, button, .boton { width: 100% !important; }

  /* Imágenes y medios */
  img, video { max-width: 100% !important; height: auto !important; }

  /* Tablas: scroll horizontal */
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { width: 100% !important; }

  /* Tarjetas/Modales */
  .card, .modal-content, .dropdown-menu { width: 100% !important; }

  /* Componentes de lecciones (timeline) */
  #timelineContainer { padding-left: 0 !important; }
  .timeline-drop-zone { min-height: 52px !important; }
  .evento-arrastrable { font-size: 0.95rem !important; }
  .max-w-4xl, .max-w-xl, .w-7\/12, .w-5\/12 { width: 100% !important; max-width: 100% !important; }
  .flex.justify-between.items-start.gap-6 { flex-direction: column !important; gap: 12px !important; }
}

@media (max-width: 480px) {
  .navbar h1 { font-size: 32px !important; }
  .logo .circle { width: 40px !important; height: 40px !important; }
  .btn-regresar { font-size: 12px !important; padding: 8px 12px !important; }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
}

/* === ESCALA DE GRISES === */
/* Aplicar solo al body para evitar problemas de renderizado */
body[data-grayscale="true"] {
    filter: grayscale(100%) !important;
}

html[data-grayscale="true"] body {
    filter: grayscale(100%) !important;
}

/* NO aplicar a elementos individuales para evitar problemas de estructura */
/* El filtro en el body afecta a todos los elementos hijos automáticamente */

/* === NAVEGACIÓN POR TECLADO MEJORADA === */
[data-keyboard-nav="true"] *:focus {
    outline: 4px solid #f39c12 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 8px #f39c12, 0 0 20px rgba(243, 156, 18, 0.5) !important;
    border-radius: 4px !important;
}

[data-keyboard-nav="true"][data-theme="high-contrast"] *:focus {
    outline: 4px solid #ffff00 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #000000, 0 0 0 8px #ffff00, 0 0 20px rgba(255, 255, 0, 0.7) !important;
    border-radius: 4px !important;
}

[data-keyboard-nav="true"] button:focus,
[data-keyboard-nav="true"] a:focus,
[data-keyboard-nav="true"] input:focus,
[data-keyboard-nav="true"] select:focus,
[data-keyboard-nav="true"] textarea:focus,
[data-keyboard-nav="true"] .menu-btn:focus,
[data-keyboard-nav="true"] .toggle-switch:focus-within {
    transform: scale(1.08) !important;
    z-index: 100 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

/* Mejorar visibilidad en elementos específicos */
[data-keyboard-nav="true"] .menu-btn:focus {
    outline: 4px solid #f39c12 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 6px #f39c12, 0 0 15px rgba(243, 156, 18, 0.6) !important;
}

[data-keyboard-nav="true"] .toggle-switch:focus-within {
    outline: 4px solid #f39c12 !important;
    outline-offset: 2px !important;
    border-radius: 20px !important;
}

[data-keyboard-nav="true"] .range-slider:focus {
    outline: 4px solid #f39c12 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 6px #f39c12 !important;
}

/* === CLASE ADICIONAL PARA NAVEGACIÓN POR TECLADO === */
.keyboard-navigation-enabled *:focus {
    outline: 4px solid #f39c12 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 8px #f39c12, 0 0 20px rgba(243, 156, 18, 0.5) !important;
    border-radius: 4px !important;
}

.keyboard-navigation-enabled button:focus,
.keyboard-navigation-enabled a:focus,
.keyboard-navigation-enabled input:focus,
.keyboard-navigation-enabled select:focus,
.keyboard-navigation-enabled textarea:focus,
.keyboard-navigation-enabled .menu-btn:focus {
    transform: scale(1.08) !important;
    z-index: 100 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

/* Indicador visual cuando la navegación por teclado está activa */
.keyboard-navigation-enabled::before {
    content: "🔍 Navegación por teclado activa";
    position: fixed;
    top: 10px;
    right: 10px;
    background: #f39c12;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: fadeInOut 3s ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: translateY(-10px); }
    10%, 90% { opacity: 1; transform: translateY(0); }
}

/* === RESPALDO PARA PREFERENCIAS DEL SISTEMA === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === FOCUS MEJORADO PARA NAVEGACIÓN POR TECLADO === */
*:focus {
    outline: 2px solid var(--accent-yellow) !important;
    outline-offset: 2px !important;
}

[data-theme="high-contrast"] *:focus {
    outline: 2px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* Hacer elementos interactivos más accesibles por teclado */
button, a, input, select, textarea, [tabindex] {
    position: relative;
}

button:focus-visible, 
a:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #f39c12 !important;
    outline-offset: 2px !important;
    z-index: 10;
}

/* === FUENTES ACCESIBLES ADICIONALES === */
/* Importar OpenDyslexic desde CDN confiable */
@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* Fuente para dislexia - OpenDyslexic con fallbacks */
[data-font="dyslexic"] {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
    line-height: 1.8 !important;
}

[data-font="dyslexic"] * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', cursive, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* Mejorar legibilidad para dislexia */
[data-font="dyslexic"] p,
[data-font="dyslexic"] span,
[data-font="dyslexic"] div,
[data-font="dyslexic"] label,
[data-font="dyslexic"] button,
[data-font="dyslexic"] a {
    line-height: 1.8 !important;
}

/* === PROTECCIÓN DE ICONOS === */
/* Excluir iconos de Font Awesome de los cambios de fuente */
[data-font="accessible"] .fas,
[data-font="accessible"] .far,
[data-font="accessible"] .fab,
[data-font="accessible"] .fal,
[data-font="accessible"] .fad,
[data-font="accessible"] .fa,
[data-font="accessible"] i[class*="fa-"],
[data-font="accessible"] i[class^="fa-"],
[data-font="dyslexic"] .fas,
[data-font="dyslexic"] .far,
[data-font="dyslexic"] .fab,
[data-font="dyslexic"] .fal,
[data-font="dyslexic"] .fad,
[data-font="dyslexic"] .fa,
[data-font="dyslexic"] i[class*="fa-"],
[data-font="dyslexic"] i[class^="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Proteger iconos específicos del sistema */
[data-font="accessible"] .icon,
[data-font="accessible"] .logo,
[data-font="accessible"] .user-avatar i,
[data-font="accessible"] .header i,
[data-font="accessible"] .sidebar i,
[data-font="accessible"] .menu-btn i,
[data-font="dyslexic"] .icon,
[data-font="dyslexic"] .logo,
[data-font="dyslexic"] .user-avatar i,
[data-font="dyslexic"] .header i,
[data-font="dyslexic"] .sidebar i,
[data-font="dyslexic"] .menu-btn i {
    font-family: "Font Awesome 6 Free", "FontAwesome", Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Proteger elementos con iconos específicos */
[data-font="accessible"] [class*="icon-"],
[data-font="accessible"] [data-icon],
[data-font="accessible"] .btn i,
[data-font="accessible"] .button i,
[data-font="dyslexic"] [class*="icon-"],
[data-font="dyslexic"] [data-icon],
[data-font="dyslexic"] .btn i,
[data-font="dyslexic"] .button i {
    font-family: "Font Awesome 6 Free", "FontAwesome", Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Proteger TODOS los elementos i dentro de botones y enlaces */
[data-font="accessible"] button i,
[data-font="accessible"] a i,
[data-font="accessible"] .nav-link i,
[data-font="accessible"] .dropdown-toggle i,
[data-font="dyslexic"] button i,
[data-font="dyslexic"] a i,
[data-font="dyslexic"] .nav-link i,
[data-font="dyslexic"] .dropdown-toggle i {
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* === PÁGINAS DE AUTENTICACIÓN EN MODO OSCURO === */
[data-theme="dark"] .auth-container,
[data-theme="dark"] .register-container,
[data-theme="dark"] .login-container {
    background: #1a1a1a !important;
}

[data-theme="dark"] .auth-form,
[data-theme="dark"] .register-form,
[data-theme="dark"] .login-form {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #4a5568 !important;
}

[data-theme="dark"] .form-group label {
    color: #ffffff !important;
}

[data-theme="dark"] .form-check-label {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .invalid-feedback {
    color: #fca5a5 !important;
}

[data-theme="dark"] .text-center {
    color: #ffffff !important;
}

/* Placeholder específico para inputs */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Checkboxes y radios */
[data-theme="dark"] .form-check-input {
    background-color: #2d2d2d !important;
    border-color: #4a5568 !important;
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #4a90e2 !important;
    border-color: #4a90e2 !important;
}

/* Select específico */
[data-theme="dark"] select option {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* === INDICADORES DE ESTADO === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === ALERTAS GLOBALES (PALETA TERRACOTA) === */
.alert,
.alert-success,
.alert-error,
.alert-warning,
.alert-info {
  padding: 16px 20px;
  border-radius: 12px;
  margin: 16px 0;
  font-weight: 600;
  border-left: 4px solid transparent;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.alert-success,
.alert.alert-success {
  background: #E6F4EA;              /* verde claro con más contraste */
  color: #1F5F2E;                   /* texto más oscuro */
  border-left-color: #2E7D32;       /* borde lateral más oscuro */
  border: 1px solid #A3D9A5;        /* borde completo para contraste */
}

.alert-error,
.alert-danger,
.alert.alert-danger {
  background: #FDECEA;              /* rojo claro de mayor contraste */
  color: #7A271A;                   /* texto más oscuro */
  border-left-color: #C53030;       /* borde lateral más oscuro */
  border: 1px solid #F5A3A0;        /* borde completo para contraste */
}

.alert-warning,
.alert.alert-warning {
  background: #FFF4D5;              /* amarillo claro con más contraste */
  color: #7C4A00;                   /* texto más oscuro */
  border-left-color: #B7791F;       /* borde lateral más oscuro */
  border: 1px solid #F3D999;        /* borde completo para contraste */
}

.alert-info,
.alert.alert-info {
  background: #E8F1FB;              /* azul muy claro con mayor contraste */
  color: #1E3A8A;                   /* azul oscuro para texto */
  border-left-color: #2563EB;       /* borde lateral azul más oscuro */
  border: 1px solid #BBD5FB;        /* borde completo para contraste */
}

/* Ajustes de links dentro de alertas */
.alert a { text-decoration: underline; }
.alert a:hover { opacity: 0.9; }

/* Modo oscuro para alertas */
[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert.alert-success {
  background: rgba(111,175,114,0.15);
  color: #9BE19E;
  border-left-color: #6FAF72;
}
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert.alert-danger {
  background: rgba(184,92,74,0.15);
  color: #F5B1A7;
  border-left-color: #B85C4A;
}
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert.alert-warning {
  background: rgba(217,165,116,0.15);
  color: #F1D1A4;
  border-left-color: #D9A574;
}
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert.alert-info {
  background: rgba(198,120,84,0.15);
  color: #F0C9B6;
  border-left-color: #C67854;
}

/* Alto contraste: bordes y colores fuertes */
[data-theme="high-contrast"] .alert,
[data-theme="high-contrast"] .alert-success,
[data-theme="high-contrast"] .alert-error,
[data-theme="high-contrast"] .alert-info,
[data-theme="high-contrast"] .alert.alert-info {
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

/* === AVATAR GLOBAL HARDENING (asegurar forma circular en todas las vistas) === */
/* Contenedor del avatar en el sidebar y su imagen interna */
.sidebar .user-avatar,
  .sidebar .user-avatar *,
  img.user-avatar-img,
  img.sidebar-avatar,
  .user-avatar img {
      width: 60px !important;
      height: 60px !important;
      aspect-ratio: 1 / 1 !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      overflow: hidden !important;
      display: block !important;
  }

/* Variante por si el contenedor cambia de tamaño en responsive */
@media (max-width: 480px) {
  .sidebar .user-avatar,
  .sidebar .user-avatar * {
      width: 56px !important;
      height: 56px !important;
  }
}

/* === BLOQUE DE BIENVENIDA UNIFICADO (nombre y saludo) === */
.sidebar .user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar .user-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
}

.sidebar .user-welcome .user-name {
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

.sidebar .user-welcome div:last-child {
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #EADACE !important; /* terracota claro para legibilidad */
}