/*
 * custom.css – Sistema de Gestión Documental Hospital MIT
 * Fuente: Poppins (Google) + Material Symbols Rounded + Font Awesome 6
 * Layout: Sidebar fijo (.sidebar de 270px), Site Nav (.site-nav), Layout Container (.layout-container)
 * Tema: Variables CSS :root (Modo Claro) y body.dark-theme (Modo Oscuro)
 * Documentos: Cuadrícula responsiva (.card-list, .docs-grid) con relación de aspecto 16:9 y botones circulares
 */

/* ════════════════════════════════════════════════════════════
   1. VARIABLES CSS — LIGHT MODE (:root)
════════════════════════════════════════════════════════════ */
:root {
  /* Identidad azul corporativa */
  --color-hover-primary: #0d6efd;
  --color-hover-secondary: #e0f2fe;
  --color-accent: #00b4d8;

  /* Variables globales de color y superficies (Modo Claro) */
  --color-bg-sidebar: #ffffff;
  --color-text-primary: #0f172a;
  --color-border-hr: #e2e8f0;

  /* Sidebar (ancho fijo permanente) */
  --sb-width: 270px;
  --sb-bg: var(--color-bg-sidebar);
  --sb-bg-hover: rgba(13, 110, 253, 0.08);
  --sb-bg-active: rgba(13, 110, 253, 0.16);
  --sb-accent: #0d6efd;
  --sb-accent-hover: #0284c7;
  --sb-accent-glow: rgba(13, 110, 253, 0.35);
  --sb-text: #64748b;
  --sb-text-strong: #0f172a;
  --sb-border: var(--color-border-hr);
  --sb-input-bg: #f8fafc;
  --sb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Topbar móvil (.site-nav) */
  --site-nav-height: 60px;
  --site-nav-bg: #1e293b;

  /* Fondos y superficies */
  --bg-primary: #f8fafc;
  --bg-surface: #ffffff;
  --content-bg: #f8fafc;
  --card-bg: #ffffff;

  /* Textos */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  /* Bordes y sombras */
  --border-color: #e2e8f0;
  --border-subtle: #f1f5f9;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 20px 25px -5px rgba(13, 110, 253, 0.12), 0 8px 10px -6px rgba(13, 110, 253, 0.08);
  --card-radius: 16px;

  /* Categorías de área (Badges y Miniaturas) */
  --cat-general-bg: #f0fdf4;
  --cat-general-text: #166534;
  --cat-general-pill: #dcfce7;
  --cat-general-border: #86efac;

  --cat-admin-bg: #fff7ed;
  --cat-admin-text: #9a3412;
  --cat-admin-pill: #ffedd5;
  --cat-admin-border: #fdba74;

  --cat-medica-bg: #f0f9ff;
  --cat-medica-text: #075985;
  --cat-medica-pill: #e0f2fe;
  --cat-medica-border: #7dd3fc;

  /* Estados de documento */
  --estado-vigente: #16a34a;
  --estado-revision: #ca8a04;
  --estado-obsoleto: #6b7280;

  /* Botones principales */
  --btn-primary-from: #0d6efd;
  --btn-primary-to: #0284c7;
}

/* ════════════════════════════════════════════════════════════
   2. SELECTOR body.dark-theme — MODO OSCURO
════════════════════════════════════════════════════════════ */
html.dark-theme,
html[data-bs-theme="dark"],
body.dark-theme,
body.dark {
  color-scheme: dark;
  /* Identidad azul corporativa (Dark Mode) */
  --color-hover-primary: #0d6efd;
  --color-hover-secondary: #1e293b;
  --color-accent: #00b4d8;

  /* Variables globales de color y superficies (Dark Mode) */
  --color-bg-sidebar: #111827;
  --color-text-primary: #f9fafb;
  --color-border-hr: #1f2937;

  /* Sidebar en Dark Mode */
  --sb-bg: var(--color-bg-sidebar);
  --sb-bg-hover: rgba(255, 255, 255, 0.08);
  --sb-bg-active: rgba(13, 110, 253, 0.25);
  --sb-text: #94a3b8;
  --sb-text-strong: #f8fafc;
  --sb-border: var(--color-border-hr);
  --sb-input-bg: rgba(255, 255, 255, 0.05);

  /* Fondos y superficies */
  --bg-primary: #0b0f19;
  --bg-surface: #111827;
  --content-bg: #0b0f19;
  --card-bg: #111827;

  /* Textos */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #94a3b8;

  /* Bordes y sombras */
  --border-color: #1f2937;
  --border-subtle: #161f30;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(13, 110, 253, 0.25);

  /* Categorías de área en dark mode */
  --cat-general-bg: rgba(22, 101, 52, 0.15);
  --cat-general-text: #86efac;
  --cat-general-pill: rgba(134, 239, 172, 0.2);
  --cat-general-border: rgba(134, 239, 172, 0.35);

  --cat-admin-bg: rgba(154, 52, 18, 0.15);
  --cat-admin-text: #fdba74;
  --cat-admin-pill: rgba(253, 186, 116, 0.2);
  --cat-admin-border: rgba(253, 186, 116, 0.35);

  --cat-medica-bg: rgba(7, 89, 133, 0.15);
  --cat-medica-text: #7dd3fc;
  --cat-medica-pill: rgba(125, 211, 252, 0.2);
  --cat-medica-border: rgba(125, 211, 252, 0.35);
}

/* ════════════════════════════════════════════════════════════
   3. ESTILOS BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html.dark-theme,
html[data-bs-theme="dark"] {
  background-color: var(--bg-primary, #0b0f19);
  color-scheme: dark;
}

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme,
body.dark,
html.dark-theme body,
html[data-bs-theme="dark"] body {
  background-color: var(--bg-primary, #0b0f19);
  color: var(--text-primary, #f9fafb);
}

/* Iconos de Material Symbols Rounded */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
  box-sizing: content-box;
}

/* ════════════════════════════════════════════════════════════
   4. LAYOUT CONTAINER Y RESPONSIVE BAR (.layout-container, .site-nav)
════════════════════════════════════════════════════════════ */
.layout-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Barra superior móvil (.site-nav) */
.site-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-nav-height);
  background-color: var(--site-nav-bg);
  border-bottom: 1px solid var(--sb-border);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 1030;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.site-nav .sidebar-toggle.mobile-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.site-brand .material-symbols-rounded {
  color: #38bdf8;
  font-size: 1.4rem;
}

.site-nav-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.site-nav-user .user-name {
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 500;
}
.site-nav-user .user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(13, 110, 253, 0.2);
  border: 1px solid rgba(0, 180, 216, 0.4);
  color: #38bdf8;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay móvil */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 1035;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   5. SIDEBAR COMPLETO (.sidebar)
════════════════════════════════════════════════════════════ */
.sidebar {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  min-height: 100vh;
  background-color: var(--color-bg-sidebar) !important;
  color: var(--color-text-primary);
  border-right: 1px solid var(--color-border-hr);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1040;
  overflow-x: hidden;
  overflow-y: auto;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-hr) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

/* Encabezado del sidebar */
.sidebar-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1.25rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sb-border);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
}

.sidebar-logo .logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-logo .logo-fallback {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d6efd, #00b4d8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sidebar-logo .logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sb-text-strong);
  white-space: nowrap;
  letter-spacing: -0.2px;
  transition: opacity var(--sb-transition), transform var(--sb-transition);
}

/* Botón toggle rotativo (.sidebar-toggle) */
.sidebar-toggle {
  background: var(--sb-input-bg);
  border: 1px solid var(--sb-border);
  color: var(--sb-text);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sidebar-toggle:hover {
  background: var(--sb-bg-hover);
  color: var(--sb-text-strong);
  border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-toggle .toggle-icon {
  font-size: 0.85rem;
  transition: transform var(--sb-transition);
}



/* Formulario de búsqueda rápida */
.sidebar-search {
  padding: 0.85rem 1rem 0.5rem;
  flex-shrink: 0;
  transition: opacity var(--sb-transition);
}

.sidebar-search .search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sb-input-bg);
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  transition: border-color 0.2s, background 0.2s;
}

.sidebar-search .search-input-wrapper:focus-within {
  border-color: var(--sb-accent);
  background: var(--sb-input-bg);
}

.sidebar-search .search-icon {
  color: var(--sb-text);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.sidebar-search .search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--sb-text-strong);
  font-size: 0.82rem;
  width: 100%;
  font-family: inherit;
}
.sidebar-search .search-input::placeholder {
  color: #64748b;
}

/* Perfil de usuario en el sidebar */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0.75rem;
  border-radius: 12px;
  background: var(--sb-input-bg);
  border: 1px solid var(--sb-border);
  transition: background 0.2s, border-color 0.2s;
}

.user-avatar-sidebar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(13, 110, 253, 0.2);
  border: 1px solid rgba(0, 180, 216, 0.4);
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-user .user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-user .user-name-sidebar {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sb-text-strong);
}

.sidebar-user .user-role-badge {
  font-size: 0.68rem;
  color: #94a3b8;
  text-transform: capitalize;
}

.sidebar-divider {
  height: 1px;
  background: var(--sb-border);
  margin: 0.5rem 1rem;
}

/* Menú de navegación */
.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0.6rem;
  overflow-y: auto;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Encabezados y separadores de sección (.menu-header) */
.menu-header,
.nav-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.65px;
  color: #64748b;
  padding: 0.85rem 0.75rem 0.25rem;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

body.dark-theme .menu-header,
body.dark .menu-header,
body.dark-theme .nav-section-title,
body.dark .nav-section-title {
  color: #64748b;
}

.menu-header .section-icon,
.nav-section-title .section-icon {
  font-size: 0.85rem;
  color: #64748b;
  opacity: 0.85;
  flex-shrink: 0;
}

.nav-item {
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover,
.menu-link:hover,
.sidebar__menu-link:hover {
  background: var(--sb-bg-hover);
  color: var(--sb-text-strong);
}

.nav-link.active,
.menu-link.active,
.sidebar__menu-link.active,
.nav-link.active:hover,
.menu-link.active:hover,
.sidebar__menu-link.active:hover {
  background: linear-gradient(135deg, #0d6efd, #00b4d8);
  color: #ffffff;
  font-weight: 600;
}

.nav-link.active::before,
.menu-link.active::before,
.sidebar__menu-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #38bdf8;
}

.nav-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-role {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: rgba(13, 110, 253, 0.2);
  color: #38bdf8;
}

.edit-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: auto;
  box-shadow: 0 0 6px #22c55e;
}

.nav-sub-item .nav-link {
  padding-left: 1.75rem;
  font-size: 0.78rem;
  color: var(--sb-text);
}
.nav-sub-item .nav-link:hover {
  color: var(--sb-text-strong);
}

.logout-link {
  color: #f87171 !important;
}
.logout-link:hover {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #fca5a5 !important;
}



/* ── Pie del sidebar (.sidebar-footer) y Switch de Tema ── */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--sb-border);
  flex-shrink: 0;
}

.theme-toggle {
  width: 100%;
  background: var(--sb-input-bg);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--sb-text);
  font-family: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
  background: var(--sb-bg-hover);
  color: var(--sb-text-strong);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-toggle-content {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.theme-toggle-content .theme-icon {
  font-size: 1.25rem;
  color: #facc15;
}

.theme-toggle-content .theme-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--sb-text-strong);
}

/* Switch UI */
.theme-switch {
  width: 36px;
  height: 20px;
  background: #334155;
  border-radius: 20px;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}

.theme-switch-indicator {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Switch activo en modo oscuro */
body.dark-theme .theme-switch,
body.dark .theme-switch,
body.dark-theme .theme-toggle-track,
body.dark .theme-toggle-track {
  background: #0d6efd;
}

body.dark-theme .theme-switch-indicator,
body.dark .theme-switch-indicator,
body.dark-theme .theme-toggle-track .theme-switch-indicator,
body.dark-theme .theme-toggle-thumb {
  transform: translateX(16px);
}

body.dark-theme .theme-toggle-content .theme-icon,
body.dark .theme-toggle-content .theme-icon {
  color: #38bdf8;
}



/* ════════════════════════════════════════════════════════════
   6. CONTENIDO PRINCIPAL (.main-content)
════════════════════════════════════════════════════════════ */
.main-content {
  flex: 1;
  min-height: 100vh;
  margin-left: var(--sb-width);
  padding: 2rem 2.25rem;
  background-color: var(--bg-primary);
  transition: margin-left var(--sb-transition), background-color 0.3s ease;
}



/* Pantallas completas sin sidebar (ej. Login) */
.main-content--full {
  margin-left: 0 !important;
  padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   7. CUADRÍCULA RESPONSIVA (.card-list, .docs-grid)
════════════════════════════════════════════════════════════ */
.card-list,
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Tarjeta individual (.card-item, .doc-card) */
.card-item,
.doc-card {
  background-color: var(--bg-surface);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease,
              background-color 0.3s ease;
  position: relative;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
}

/* Efecto :hover en la tarjeta */
.card-item:hover,
.doc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(13, 110, 253, 0.35);
}

/* Miniatura con relación de aspecto 16:9 */
.card-thumb,
.doc-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--border-subtle);
  flex-shrink: 0;
}

.card-thumb img,
.doc-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-item:hover .card-thumb img,
.doc-card:hover .doc-card__thumb img {
  transform: scale(1.04);
}

/* Fondos temáticos por categoría de área para las miniaturas */
.doc-card__thumb--general {
  background: linear-gradient(135deg, var(--cat-general-bg) 0%, var(--cat-general-pill) 100%);
}
.doc-card__thumb--administrativa {
  background: linear-gradient(135deg, var(--cat-admin-bg) 0%, var(--cat-admin-pill) 100%);
}
.doc-card__thumb--medica {
  background: linear-gradient(135deg, var(--cat-medica-bg) 0%, var(--cat-medica-pill) 100%);
}

.doc-card__thumb-icon {
  font-size: 3.5rem;
  opacity: 0.2;
  position: absolute;
  right: 0.75rem;
  bottom: 0.25rem;
  line-height: 1;
}

/* Código del documento */
.doc-card__code {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.68rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 0.2em 0.55em;
  border-radius: 6px;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

body.dark-theme .doc-card__code,
body.dark .doc-card__code {
  background: rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
}


/* Contenido de la tarjeta */
.card-content,
.doc-card__body {
  padding: 1.15rem 1.15rem 0.85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Badges por categoría de área (administrativa, médica, general) */
.badge-area,
.doc-card__dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25em 0.75em;
  border-radius: 20px;
  width: fit-content;
  letter-spacing: 0.2px;
}

.badge-general,
.pill--general {
  background-color: var(--cat-general-pill);
  color: var(--cat-general-text);
  border: 1px solid var(--cat-general-border);
}

.badge-administrativa,
.pill--administrativa {
  background-color: var(--cat-admin-pill);
  color: var(--cat-admin-text);
  border: 1px solid var(--cat-admin-border);
}

.badge-medica,
.pill--medica {
  background-color: var(--cat-medica-pill);
  color: var(--cat-medica-text);
  border: 1px solid var(--cat-medica-border);
}

/* Título de la tarjeta */
.card-title,
.doc-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metadatos */
.card-meta,
.doc-card__meta {
  font-size: 0.73rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Footer de la tarjeta */
.card-footer,
.doc-card__footer {
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: border-color 0.3s;
}

.card-date,
.doc-card__date {
  font-size: 0.73rem;
  color: var(--text-muted);
}

.card-actions,
.doc-card__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* Botón circular con la flecha rotada (.btn-arrow, .card-btn) */
.btn-arrow,
.card-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--border-subtle);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Flecha rotada inclinada (-45deg o +45deg según sentido) */
.btn-arrow .material-symbols-rounded,
.btn-arrow i,
.card-btn .material-symbols-rounded,
.card-btn i {
  transform: rotate(-45deg);
  transition: transform 0.25s ease;
  display: inline-block;
}

/* Efecto hover del botón circular */
.btn-arrow:hover,
.card-item:hover .btn-arrow,
.doc-card:hover .btn-arrow {
  background-color: var(--sb-accent);
  color: #ffffff;
  border-color: var(--sb-accent);
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.35);
}

.btn-arrow:hover .material-symbols-rounded,
.btn-arrow:hover i,
.card-item:hover .btn-arrow .material-symbols-rounded,
.card-item:hover .btn-arrow i,
.doc-card:hover .btn-arrow .material-symbols-rounded,
.doc-card:hover .btn-arrow i {
  transform: rotate(0deg);
}

.btn-arrow--danger:hover {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}
.btn-arrow--danger:hover .material-symbols-rounded,
.btn-arrow--danger:hover i {
  transform: scale(1.1) rotate(0deg) !important;
}

/* ════════════════════════════════════════════════════════════
   8. COMPONENTES ADICIONALES (Toolbar, Skeletons, Modales, Dropzone)
════════════════════════════════════════════════════════════ */
.toolbar-card {
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  background-color: var(--bg-surface);
  transition: background-color 0.3s, border-color 0.3s;
}

.toolbar-card .form-control,
.toolbar-card .form-select {
  border-radius: 10px;
  border-color: var(--border-color);
  font-size: 0.875rem;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s;
}

.toolbar-card .form-control:focus,
.toolbar-card .form-select:focus {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Vista de Catálogo: Icono superior */
#tituloCatalogo .material-symbols-rounded,
.catalogo-header-icon {
  color: #00b4d8 !important;
}

#pdfDownloadBtn {
  color: #0d6efd !important;
}
#pdfDownloadBtn:hover {
  color: #0284c7 !important;
}

/* Empty State */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}
.empty-state__icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  display: block;
  opacity: 0.35;
}
.empty-state__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
.empty-state__sub {
  font-size: 0.85rem;
}

/* Skeletons */
.skeleton {
  background: linear-gradient(90deg, var(--border-color) 25%, #e2e8f0 50%, var(--border-color) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
body.dark-theme .skeleton,
body.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.skeleton-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.skeleton-pill { height: 18px; width: 85px; border-radius: 20px; }
.skeleton-title { height: 16px; width: 100%; }
.skeleton-title-sm { height: 16px; width: 65%; }
.skeleton-meta { height: 12px; width: 50%; margin-top: 0.4rem; }

/* Modales */
.modal-content {
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
  background: linear-gradient(135deg, #0d6efd 0%, #00b4d8 100%);
  border: none;
  color: #ffffff;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  padding: 0.9rem 1.25rem;
}
.modal-header .btn-close {
  filter: invert(1);
}

.modal-body,
.modal-footer {
  background-color: var(--bg-surface);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

#pdfViewer {
  width: 100%;
  height: 78vh;
  border: none;
  display: block;
}

/* Upload Dropzone */
.upload-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 1.75rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  position: relative;
  background-color: var(--border-subtle);
}
.upload-dropzone:hover,
.upload-dropzone.drag-over {
  border-color: var(--sb-accent);
  background-color: rgba(13, 110, 253, 0.06);
}
.upload-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Formularios en dark mode */
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark .form-control,
body.dark .form-select {
  background-color: #111827;
  border-color: #1f2937;
  color: #f9fafb;
}
body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus,
body.dark .form-control:focus,
body.dark .form-select:focus {
  background-color: #111827;
  border-color: var(--sb-accent);
}
body.dark-theme .form-control::placeholder,
body.dark .form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}
body.dark-theme .input-group-text,
body.dark .input-group-text {
  background-color: #111827;
  border-color: #1f2937;
  color: #9ca3af;
}

/* Botones */
.btn {
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.875rem;
  font-family: 'Poppins', inherit;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
  color: #ffffff;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0b5ed7 0%, #0284c7 100%);
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.45);
  transform: translateY(-1px);
}

.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.btn-outline-secondary:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════
   8. PANTALLA DE INICIO DE SESIÓN (GLASSMORPHISM)
════════════════════════════════════════════════════════════ */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  position: relative;
  background: #0f172a; /* Color base oscuro */
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

body.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Imagen de fondo hospitalaria con fallback a un degradado elegante */
  background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.85)), 
              url('/static/img/hospital-bg.jpg') center/cover no-repeat;
  z-index: 0;
}

body.login-page .layout-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

body.login-page .main-content,
body.login-page .main-content--full {
  background: transparent !important;
  background-color: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 1.5rem !important;
  margin: 0 !important;
}

/* Contenedor Glassmorphic (.wrapper) */
.wrapper {
  width: 420px;
  max-width: 95%;
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 10;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wrapper:hover {
  border-color: rgba(0, 180, 216, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5),
              0 0 25px rgba(0, 180, 216, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Cabecera y Títulos */
.login-brand {
  margin-bottom: 2rem;
}

/* Contenedor superior del logo institucional con brillo exterior azulado */
.login-logo-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 18px;
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(0, 180, 216, 0.3);
  box-shadow: 0 0 20px rgba(0, 180, 216, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.login-logo-box:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(0, 180, 216, 0.55);
  box-shadow: 0 0 28px rgba(0, 180, 216, 0.45);
}

.login-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.wrapper h2 {
  font-size: 1.85rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  margin: 0 0 0.4rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.wrapper .subtitle {
  font-size: 0.86rem;
  color: rgba(226, 232, 240, 0.85);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.4px;
}

/* Alerta de Error Glassmorphism */
.glass-alert-error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fca5a5;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 1.5rem;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.glass-alert-error .material-symbols-rounded {
  font-size: 1.25rem;
  color: #f87171;
  flex-shrink: 0;
}

/* Campos de Formulario con Floating Animated Labels en Azul Hospitalario */
.wrapper .input-field {
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  margin: 24px 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wrapper .input-field:focus-within {
  border-bottom-color: #00b4d8;
  box-shadow: 0 1px 0 0 rgba(0, 180, 216, 0.5), 0 4px 12px rgba(0, 180, 216, 0.2);
}

.wrapper .input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0;
}

.wrapper .input-field input {
  width: 100%;
  height: 48px;
  background: transparent !important;
  border: none;
  outline: none;
  font-size: 0.95rem;
  color: #ffffff;
  padding: 0 35px 0 0;
  font-family: inherit;
}

/* Animación del Label al enfocar o tener texto válido */
.wrapper .input-field input:focus ~ label,
.wrapper .input-field input:valid ~ label {
  top: -6px;
  font-size: 0.76rem;
  color: #00b4d8;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Iconos de los campos */
.wrapper .input-field .field-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.25rem;
  transition: color 0.3s ease;
  pointer-events: none;
}

.wrapper .input-field input:focus ~ .field-icon {
  color: #00b4d8;
}

.wrapper .input-field .btn-toggle-pwd {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

.wrapper .input-field .btn-toggle-pwd:hover {
  color: #00b4d8;
  transform: translateY(-50%) scale(1.1);
}

.wrapper .input-field .btn-toggle-pwd:focus {
  outline: none;
}

/* Normalización de Autofill en navegadores WebKit */
.wrapper .input-field input:-webkit-autofill,
.wrapper .input-field input:-webkit-autofill:hover, 
.wrapper .input-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Opción: Recuérdame alineada a la izquierda */
.wrapper .remember-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0 28px;
  font-size: 0.85rem;
  text-align: left;
}

.wrapper .remember-field label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  color: rgba(226, 232, 240, 0.9);
  transition: color 0.2s ease;
}

.wrapper .remember-field label:hover {
  color: #ffffff;
}

.wrapper .remember-field input[type="checkbox"] {
  accent-color: #0d6efd;
  width: 17px;
  height: 17px;
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.wrapper .remember-field input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.35);
}

.wrapper .remember-field input[type="checkbox"]:checked {
  filter: drop-shadow(0 0 6px rgba(0, 180, 216, 0.45));
}

/* Botón de Envío Principal */
.wrapper button[type="submit"],
.wrapper .btn-submit {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #ffffff;
  outline: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: #0f172a;
  letter-spacing: 0.4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.wrapper button[type="submit"]:hover,
.wrapper .btn-submit:hover {
  background: linear-gradient(135deg, #0d6efd 0%, #00b4d8 100%);
  color: #ffffff;
  border-color: rgba(0, 180, 216, 0.6);
  box-shadow: 0 8px 25px rgba(13, 110, 253, 0.45), 0 0 18px rgba(0, 180, 216, 0.35);
  transform: translateY(-2px);
}

.wrapper button[type="submit"]:focus-visible,
.wrapper .btn-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.4), 0 8px 25px rgba(13, 110, 253, 0.35);
}

.wrapper button[type="submit"]:active,
.wrapper .btn-submit:active {
  transform: translateY(0);
}

.wrapper .btn-submit .btn-icon {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.wrapper .btn-submit:hover .btn-icon {
  transform: translateX(3px);
}

/* Pie de Tarjeta */
.wrapper .login-footer {
  margin-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.25rem;
}

.wrapper .login-footer p {
  color: rgba(148, 163, 184, 0.75);
  font-size: 0.74rem;
  margin: 0;
  letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════════════
   9. DISEÑO RESPONSIVO (Breakpoints)
════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  /* Mostrar barra superior móvil */
  .site-nav {
    display: flex;
  }

  /* Sidebar deslizable en móvil */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--sb-transition), width var(--sb-transition);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    width: var(--sb-width);
  }

  /* El contenido ocupa el 100% y compensa la barra superior */
  .main-content {
    margin-left: 0 !important;
    padding-top: calc(var(--site-nav-height) + 1.25rem);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 992px) {
  .site-nav {
    display: none !important;
  }
  .sidebar {
    transform: translateX(0) !important;
  }
}

@media (max-width: 575.98px) {
  .card-list,
  .docs-grid {
    grid-template-columns: 1fr;
  }
  .main-content {
    padding: calc(var(--site-nav-height) + 1rem) 0.85rem 1rem;
  }
}

/* ════════════════════════════════════════════════════════════
   10. TARJETAS DE ESTADÍSTICAS, BUSCADORES Y TABLAS (MODO OSCURO)
════════════════════════════════════════════════════════════ */

/* Modo Claro (Base) */
.stat-card,
.toolbar-card,
.table-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0) !important;
}

.stat-card-title {
  color: var(--text-muted, #64748b);
}

.stat-card-number {
  color: var(--text-primary, #0f172a);
}

#contadorResultados,
#contadorAuditoria {
  color: var(--text-muted, #64748b);
}

.user-depto-badge {
  background: var(--border-subtle, #f1f5f9);
  color: var(--text-secondary, #475569);
  border: 1px solid var(--border-color, #e2e8f0);
}

/* Modo Oscuro (body.dark-theme, html.dark-theme, body.dark) */
body.dark-theme .stat-card,
html.dark-theme .stat-card,
body.dark .stat-card,
body.dark-theme .toolbar-card,
html.dark-theme .toolbar-card,
body.dark .toolbar-card,
body.dark-theme .table-card,
html.dark-theme .table-card,
body.dark .table-card {
  background: #111827 !important;
  border: 1px solid #334155 !important;
}

/* 1. Tarjetas de estadísticas en modo oscuro */
body.dark-theme .stat-card-title,
body.dark-theme .stat-card .text-muted,
html.dark-theme .stat-card-title,
html.dark-theme .stat-card .text-muted,
body.dark .stat-card-title,
body.dark .stat-card .text-muted {
  color: var(--color-text-secondary, #94a3b8) !important;
}

body.dark-theme .stat-card-number,
body.dark-theme .stat-card h3,
html.dark-theme .stat-card-number,
html.dark-theme .stat-card h3,
body.dark .stat-card-number,
body.dark .stat-card h3 {
  color: #ffffff !important;
}

/* 2. Texto de conteo de usuarios y auditoría */
body.dark-theme #contadorResultados,
html.dark-theme #contadorResultados,
body.dark #contadorResultados,
body.dark-theme #contadorAuditoria,
html.dark-theme #contadorAuditoria,
body.dark #contadorAuditoria {
  color: #94a3b8 !important;
}

/* Input group del buscador en modo oscuro */
body.dark-theme .toolbar-card .input-group-text,
html.dark-theme .toolbar-card .input-group-text,
body.dark .toolbar-card .input-group-text {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark-theme .toolbar-card input.form-control,
html.dark-theme .toolbar-card input.form-control,
body.dark .toolbar-card input.form-control,
body.dark-theme .toolbar-card select.form-select,
html.dark-theme .toolbar-card select.form-select,
body.dark .toolbar-card select.form-select {
  background-color: #161f30 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* 3. Adaptación de la tabla de usuarios al modo oscuro */
body.dark-theme .table-card,
body.dark-theme .table-responsive,
body.dark-theme #tablaUsuarios,
body.dark-theme #tablaAuditoria,
body.dark-theme .table,
html.dark-theme .table-card,
html.dark-theme .table-responsive,
html.dark-theme #tablaUsuarios,
html.dark-theme #tablaAuditoria,
html.dark-theme .table,
body.dark .table-card,
body.dark .table-responsive,
body.dark #tablaUsuarios,
body.dark #tablaAuditoria,
body.dark .table {
  background: #111827 !important;
  background-color: #111827 !important;
  --bs-table-bg: #111827 !important;
  --bs-table-color: #f8fafc !important;
  --bs-table-border-color: #334155 !important;
  --bs-table-hover-bg: #1e293b !important;
  --bs-table-hover-color: #ffffff !important;
  border-color: #334155 !important;
}

/* Cabeceras th */
body.dark-theme #tablaUsuarios thead,
body.dark-theme #tablaUsuarios thead tr,
body.dark-theme #tablaUsuarios thead th,
body.dark-theme #tablaAuditoria thead,
body.dark-theme #tablaAuditoria thead tr,
body.dark-theme #tablaAuditoria thead th,
body.dark-theme .table thead th,
html.dark-theme #tablaUsuarios thead,
html.dark-theme #tablaUsuarios thead tr,
html.dark-theme #tablaUsuarios thead th,
html.dark-theme #tablaAuditoria thead,
html.dark-theme #tablaAuditoria thead tr,
html.dark-theme #tablaAuditoria thead th,
html.dark-theme .table thead th,
body.dark #tablaUsuarios thead,
body.dark #tablaUsuarios thead tr,
body.dark #tablaUsuarios thead th,
body.dark #tablaAuditoria thead,
body.dark #tablaAuditoria thead tr,
body.dark #tablaAuditoria thead th,
body.dark .table thead th {
  background-color: #161f30 !important;
  color: #94a3b8 !important;
  border-bottom: 1px solid #334155 !important;
  border-color: #334155 !important;
}

/* Celdas td y filas */
body.dark-theme #tablaUsuarios tbody tr,
body.dark-theme #tablaUsuarios tbody td,
body.dark-theme #tablaAuditoria tbody tr,
body.dark-theme #tablaAuditoria tbody td,
body.dark-theme .table tbody tr,
body.dark-theme .table tbody td,
html.dark-theme #tablaUsuarios tbody tr,
html.dark-theme #tablaUsuarios tbody td,
html.dark-theme #tablaAuditoria tbody tr,
html.dark-theme #tablaAuditoria tbody td,
html.dark-theme .table tbody tr,
html.dark-theme .table tbody td,
body.dark #tablaUsuarios tbody tr,
body.dark #tablaUsuarios tbody td,
body.dark #tablaAuditoria tbody tr,
body.dark #tablaAuditoria tbody td,
body.dark .table tbody tr,
body.dark .table tbody td {
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-bottom: 1px solid #334155 !important;
  border-color: #334155 !important;
}

/* Hover de filas */
body.dark-theme #tablaUsuarios tbody tr:hover td,
body.dark-theme #tablaAuditoria tbody tr:hover td,
body.dark-theme .table-hover > tbody > tr:hover > *,
html.dark-theme #tablaUsuarios tbody tr:hover td,
html.dark-theme #tablaAuditoria tbody tr:hover td,
html.dark-theme .table-hover > tbody > tr:hover > *,
body.dark #tablaUsuarios tbody tr:hover td,
body.dark #tablaAuditoria tbody tr:hover td,
body.dark .table-hover > tbody > tr:hover > * {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* Texto de las filas (td): nombres, emails, departamentos */
body.dark-theme #tablaUsuarios td .user-name-cell,
body.dark-theme #tablaUsuarios td .user-email-cell,
body.dark-theme #tablaUsuarios td .fw-semibold,
body.dark-theme #tablaUsuarios td .text-truncate,
body.dark-theme #tablaAuditoria td .fw-semibold,
body.dark-theme #tablaAuditoria td .text-truncate,
html.dark-theme #tablaUsuarios td .user-name-cell,
html.dark-theme #tablaUsuarios td .user-email-cell,
html.dark-theme #tablaUsuarios td .fw-semibold,
html.dark-theme #tablaUsuarios td .text-truncate,
html.dark-theme #tablaAuditoria td .fw-semibold,
html.dark-theme #tablaAuditoria td .text-truncate,
body.dark #tablaUsuarios td .user-name-cell,
body.dark #tablaUsuarios td .user-email-cell,
body.dark #tablaUsuarios td .fw-semibold,
body.dark #tablaUsuarios td .text-truncate,
body.dark #tablaAuditoria td .fw-semibold,
body.dark #tablaAuditoria td .text-truncate {
  color: #f8fafc !important;
}

/* Badge de Departamento en modo oscuro */
body.dark-theme .user-depto-badge,
html.dark-theme .user-depto-badge,
body.dark .user-depto-badge {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

/* Texto tenue o nulo (—, @sistemas, etc.) */
body.dark-theme #tablaUsuarios td .user-handle-cell,
body.dark-theme #tablaUsuarios td .user-null-cell,
body.dark-theme #tablaUsuarios td .text-muted,
body.dark-theme #tablaUsuarios td .small.text-muted,
body.dark-theme #tablaAuditoria td .text-muted,
body.dark-theme #tablaAuditoria td .small.text-muted,
html.dark-theme #tablaUsuarios td .user-handle-cell,
html.dark-theme #tablaUsuarios td .user-null-cell,
html.dark-theme #tablaUsuarios td .text-muted,
html.dark-theme #tablaUsuarios td .small.text-muted,
html.dark-theme #tablaAuditoria td .text-muted,
html.dark-theme #tablaAuditoria td .small.text-muted,
body.dark #tablaUsuarios td .user-handle-cell,
body.dark #tablaUsuarios td .user-null-cell,
body.dark #tablaUsuarios td .text-muted,
body.dark #tablaUsuarios td .small.text-muted,
body.dark #tablaAuditoria td .text-muted,
body.dark #tablaAuditoria td .small.text-muted {
  color: #64748b !important;
}

/* Botón de edición en modo oscuro */
body.dark-theme #tablaUsuarios .btn-outline-secondary,
html.dark-theme #tablaUsuarios .btn-outline-secondary,
body.dark #tablaUsuarios .btn-outline-secondary {
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.dark-theme #tablaUsuarios .btn-outline-secondary:hover,
html.dark-theme #tablaUsuarios .btn-outline-secondary:hover,
body.dark #tablaUsuarios .btn-outline-secondary:hover {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════════════════════════
   11. MEJORAS DE CONTRASTE Y ACCESIBILIDAD EN MODO OSCURO
════════════════════════════════════════════════════════════ */

/* Contraste global para textos muted y secundarios en modo oscuro */
body.dark-theme .text-muted,
html.dark-theme .text-muted,
body.dark .text-muted {
  color: #94a3b8 !important;
}

body.dark-theme .text-secondary,
html.dark-theme .text-secondary,
body.dark .text-secondary {
  color: #cbd5e1 !important;
}

/* Placeholders y textos de ayuda accesibles (mínimo #94a3b8) */
body.dark-theme ::placeholder,
html.dark-theme ::placeholder,
body.dark ::placeholder,
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder,
body.dark-theme .sidebar-search .search-input::placeholder,
html.dark-theme .sidebar-search .search-input::placeholder,
body.dark .sidebar-search .search-input::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

body.dark-theme .form-text,
body.dark-theme .help-text,
html.dark-theme .form-text,
html.dark-theme .help-text,
body.dark .form-text,
body.dark .help-text {
  color: #94a3b8 !important;
}

/* Contenedor y tarjeta de Capacitaciones en modo oscuro */
body.dark-theme #seccionCapacitaciones,
body.dark-theme #capacitaciones-container,
html.dark-theme #seccionCapacitaciones,
html.dark-theme #capacitaciones-container,
body.dark #seccionCapacitaciones,
body.dark #capacitaciones-container {
  background-color: var(--card-bg, #111827) !important;
  border: 1px solid #1f2937 !important;
}

/* Subtítulos y textos informativos dentro de capacitaciones (gris claro legible #cbd5e1) */
body.dark-theme #seccionCapacitaciones .text-muted,
body.dark-theme #seccionCapacitaciones small,
body.dark-theme #seccionCapacitaciones p,
body.dark-theme #capacitaciones-container .text-muted,
body.dark-theme #capacitaciones-container small,
body.dark-theme #capacitaciones-container p,
body.dark-theme #gridCapacitaciones .text-muted,
body.dark-theme #gridCapacitaciones small,
body.dark-theme #gridCapacitaciones p,
html.dark-theme #seccionCapacitaciones .text-muted,
html.dark-theme #seccionCapacitaciones small,
html.dark-theme #seccionCapacitaciones p,
html.dark-theme #capacitaciones-container .text-muted,
html.dark-theme #capacitaciones-container small,
html.dark-theme #capacitaciones-container p,
html.dark-theme #gridCapacitaciones .text-muted,
html.dark-theme #gridCapacitaciones small,
html.dark-theme #gridCapacitaciones p,
body.dark #seccionCapacitaciones .text-muted,
body.dark #seccionCapacitaciones small,
body.dark #seccionCapacitaciones p,
body.dark #capacitaciones-container .text-muted,
body.dark #capacitaciones-container small,
body.dark #capacitaciones-container p,
body.dark #gridCapacitaciones .text-muted,
body.dark #gridCapacitaciones small,
body.dark #gridCapacitaciones p {
  color: #cbd5e1 !important;
}

/* Tarjetas secundarias y tarjetas de evaluación en modo oscuro */
body.dark-theme #gridCapacitaciones .card,
body.dark-theme .capacitacion-card,
html.dark-theme #gridCapacitaciones .card,
html.dark-theme .capacitacion-card,
body.dark #gridCapacitaciones .card,
body.dark .capacitacion-card {
  background-color: #161f30 !important;
  border: 1px solid #1f2937 !important;
}

body.dark-theme #gridCapacitaciones .card h2,
body.dark-theme #gridCapacitaciones .card h3,
body.dark-theme #gridCapacitaciones .card h4,
body.dark-theme #gridCapacitaciones .card h5,
body.dark-theme #gridCapacitaciones .card h6,
body.dark-theme .card-title,
html.dark-theme #gridCapacitaciones .card h2,
html.dark-theme #gridCapacitaciones .card h3,
html.dark-theme #gridCapacitaciones .card h4,
html.dark-theme #gridCapacitaciones .card h5,
html.dark-theme #gridCapacitaciones .card h6,
html.dark-theme .card-title,
body.dark #gridCapacitaciones .card h2,
body.dark #gridCapacitaciones .card h3,
body.dark #gridCapacitaciones .card h4,
body.dark #gridCapacitaciones .card h5,
body.dark #gridCapacitaciones .card h6,
body.dark .card-title {
  color: #f8fafc !important;
}

/* Badges claros adaptados al modo oscuro */
body.dark-theme .badge.bg-light,
body.dark-theme .badge.bg-secondary-subtle,
html.dark-theme .badge.bg-light,
html.dark-theme .badge.bg-secondary-subtle,
body.dark .badge.bg-light,
body.dark .badge.bg-secondary-subtle {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155 !important;
}

/* Conteos de documentos y registros */
body.dark-theme #resultCount,
html.dark-theme #resultCount,
body.dark #resultCount {
  color: #94a3b8 !important;
}

/* ── Módulo de Evaluación de Capacitaciones (ver_capacitacion.html) ── */

/* Modo Claro: Base */
body:not(.dark-theme):not(.dark) .card-colaborador,
body:not(.dark-theme):not(.dark) .question-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

body:not(.dark-theme):not(.dark) .titulo-colaborador {
  color: #475569 !important;
}

body:not(.dark-theme):not(.dark) .question-title {
  color: #1f2937 !important;
}

body:not(.dark-theme):not(.dark) .option-radio-container {
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

body:not(.dark-theme):not(.dark) .option-radio-container .option-text {
  color: #475569 !important;
}

body:not(.dark-theme):not(.dark) .option-radio-container:hover,
body:not(.dark-theme):not(.dark) .option-radio-container:has(input:checked) {
  background: #eff6ff !important;
  border-color: #0d6efd !important;
}

body:not(.dark-theme):not(.dark) .option-radio-container:hover .option-text,
body:not(.dark-theme):not(.dark) .option-radio-container:has(input:checked) .option-text {
  color: #0f172a !important;
}

/* Modo Oscuro: ver_capacitacion.html */
body.dark-theme .card-colaborador,
body.dark-theme .question-card,
html.dark-theme .card-colaborador,
html.dark-theme .question-card,
body.dark .card-colaborador,
body.dark .question-card {
  background: #111827 !important;
  border: 1px solid #334155 !important;
}

body.dark-theme .titulo-colaborador,
body.dark-theme .titulo-preguntas,
body.dark-theme .question-title,
body.dark-theme .question-card p,
html.dark-theme .titulo-colaborador,
html.dark-theme .titulo-preguntas,
html.dark-theme .question-title,
html.dark-theme .question-card p,
body.dark .titulo-colaborador,
body.dark .titulo-preguntas,
body.dark .question-title,
body.dark .question-card p {
  color: #f8fafc !important;
}

body.dark-theme .option-radio-container,
html.dark-theme .option-radio-container,
body.dark .option-radio-container {
  color: #e2e8f0 !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.dark-theme .option-radio-container .option-text,
html.dark-theme .option-radio-container .option-text,
body.dark .option-radio-container .option-text {
  color: #e2e8f0 !important;
}

body.dark-theme .option-radio-container:hover,
body.dark-theme .option-radio-container:has(input:checked),
html.dark-theme .option-radio-container:hover,
html.dark-theme .option-radio-container:has(input:checked),
body.dark .option-radio-container:hover,
body.dark .option-radio-container:has(input:checked) {
  border-color: #0d6efd !important;
  background: #1e3a8a !important;
  color: #ffffff !important;
}

body.dark-theme .option-radio-container:hover .option-text,
body.dark-theme .option-radio-container:has(input:checked) .option-text,
html.dark-theme .option-radio-container:hover .option-text,
html.dark-theme .option-radio-container:has(input:checked) .option-text,
body.dark .option-radio-container:hover .option-text,
body.dark .option-radio-container:has(input:checked) .option-text {
  color: #ffffff !important;
}

/* ── Modal de Creación de Capacitación (catalogo.html) en Modo Oscuro ── */
body.dark-theme #modalNuevaCapacitacion .modal-content,
html.dark-theme #modalNuevaCapacitacion .modal-content,
body.dark #modalNuevaCapacitacion .modal-content {
  background-color: #111827 !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

body.dark-theme #modalNuevaCapacitacion .modal-header,
html.dark-theme #modalNuevaCapacitacion .modal-header,
body.dark #modalNuevaCapacitacion .modal-header {
  border-bottom-color: #334155 !important;
}

body.dark-theme #modalNuevaCapacitacion .modal-title,
html.dark-theme #modalNuevaCapacitacion .modal-title,
body.dark #modalNuevaCapacitacion .modal-title {
  color: #f8fafc !important;
}

/* Contenedor de cada pregunta en modal */
body.dark-theme .card-pregunta,
body.dark-theme .card-pregunta-modal,
body.dark-theme #contenedorPreguntasModal > div,
html.dark-theme .card-pregunta,
html.dark-theme .card-pregunta-modal,
html.dark-theme #contenedorPreguntasModal > div,
body.dark .card-pregunta,
body.dark .card-pregunta-modal,
body.dark #contenedorPreguntasModal > div {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
}

/* Fila Respuesta Correcta [A] [B] [C] [D] */
body.dark-theme #modalNuevaCapacitacion .lbl-respuesta-correcta,
html.dark-theme #modalNuevaCapacitacion .lbl-respuesta-correcta,
body.dark #modalNuevaCapacitacion .lbl-respuesta-correcta {
  color: #cbd5e1 !important;
}

body.dark-theme #modalNuevaCapacitacion .text-op-letra,
body.dark-theme #modalNuevaCapacitacion .form-check-label,
html.dark-theme #modalNuevaCapacitacion .text-op-letra,
html.dark-theme #modalNuevaCapacitacion .form-check-label,
body.dark #modalNuevaCapacitacion .text-op-letra,
body.dark #modalNuevaCapacitacion .form-check-label {
  color: #f1f5f9 !important;
}

/* Inputs de las opciones integrados con el fondo sin deslumbrar */
body.dark-theme #contenedorPreguntasModal .form-control,
html.dark-theme #contenedorPreguntasModal .form-control,
body.dark #contenedorPreguntasModal .form-control {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-theme #contenedorPreguntasModal .form-control:focus,
html.dark-theme #contenedorPreguntasModal .form-control:focus,
body.dark #contenedorPreguntasModal .form-control:focus {
  background-color: #0f172a !important;
  border-color: #0d6efd !important;
  color: #f8fafc !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

body.dark-theme #contenedorPreguntasModal .input-group-text,
html.dark-theme #contenedorPreguntasModal .input-group-text,
body.dark #contenedorPreguntasModal .input-group-text {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

/* ── Botón de eliminación en tarjetas de capacitación ── */
.btn-eliminar-cap {
  color: #ef4444 !important;
  opacity: 0.7;
  padding: 0;
  border: none;
  background: transparent;
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.btn-eliminar-cap:hover {
  opacity: 1;
  color: #dc2626 !important;
  transform: scale(1.15);
}
body.dark-theme .btn-eliminar-cap,
html.dark-theme .btn-eliminar-cap,
body.dark .btn-eliminar-cap {
  color: #f87171 !important;
}
body.dark-theme .btn-eliminar-cap:hover,
html.dark-theme .btn-eliminar-cap:hover,
body.dark .btn-eliminar-cap:hover {
  color: #ef4444 !important;
}

/* ── Modal de confirmación de eliminación en modo oscuro ── */
body.dark-theme #modalEliminarCapacitacion .modal-content,
html.dark-theme #modalEliminarCapacitacion .modal-content,
body.dark #modalEliminarCapacitacion .modal-content {
  background-color: #111827 !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
}

body.dark-theme #modalEliminarCapacitacion .modal-header,
html.dark-theme #modalEliminarCapacitacion .modal-header,
body.dark #modalEliminarCapacitacion .modal-header {
  border-bottom-color: #334155 !important;
}

body.dark-theme #modalEliminarCapacitacion .modal-footer,
html.dark-theme #modalEliminarCapacitacion .modal-footer,
body.dark #modalEliminarCapacitacion .modal-footer {
  border-top-color: #334155 !important;
}

body.dark-theme #modalEliminarCapacitacion #textoEliminarCapacitacion,
html.dark-theme #modalEliminarCapacitacion #textoEliminarCapacitacion,
body.dark #modalEliminarCapacitacion #textoEliminarCapacitacion {
  color: #cbd5e1 !important;
}

/* ── Sección de capacitaciones archivadas / anteriores ── */
#capacitacionesArchivadas .border-top {
  border-color: var(--border-color, #e2e8f0) !important;
}
body.dark-theme #capacitacionesArchivadas .border-top,
html.dark-theme #capacitacionesArchivadas .border-top,
body.dark #capacitacionesArchivadas .border-top {
  border-color: #334155 !important;
}

/* ── Módulo de Capacitaciones: Contraste y Textos en Modo Oscuro ── */
body.dark-theme .breadcrumb-item.active,
html.dark-theme .breadcrumb-item.active,
body.dark .breadcrumb-item.active {
  color: #94a3b8 !important;
}

body.dark-theme .card-colaborador label[for="nombre_colaborador"],
body.dark-theme label[for="nombre_colaborador"],
html.dark-theme .card-colaborador label[for="nombre_colaborador"],
html.dark-theme label[for="nombre_colaborador"],
body.dark .card-colaborador label[for="nombre_colaborador"],
body.dark label[for="nombre_colaborador"] {
  color: #f8fafc !important;
  font-weight: 600;
}

body.dark-theme .card-colaborador .form-text,
html.dark-theme .card-colaborador .form-text,
body.dark .card-colaborador .form-text {
  color: #94a3b8 !important;
}

body.dark-theme .descripcion-capacitacion,
html.dark-theme .descripcion-capacitacion,
body.dark .descripcion-capacitacion {
  color: #cbd5e1 !important;
}

body.dark-theme .question-title,
body.dark-theme .pregunta-item .question-title,
html.dark-theme .question-title,
html.dark-theme .pregunta-item .question-title,
body.dark .question-title,
body.dark .pregunta-item .question-title {
  color: #f1f5f9 !important;
}

body.dark-theme .option-radio-container,
body.dark-theme .option-radio-container span,
body.dark-theme .option-radio-container .option-text,
body.dark-theme .option-radio-container .text-secondary,
html.dark-theme .option-radio-container,
html.dark-theme .option-radio-container span,
html.dark-theme .option-radio-container .option-text,
html.dark-theme .option-radio-container .text-secondary,
body.dark .option-radio-container,
body.dark .option-radio-container span,
body.dark .option-radio-container .option-text,
body.dark .option-radio-container .text-secondary {
  color: #f1f5f9 !important;
}

body.dark-theme .option-radio-container span.text-primary,
html.dark-theme .option-radio-container span.text-primary,
body.dark .option-radio-container span.text-primary {
  color: #60a5fa !important;
}

/* ════════════════════════════════════════════════════════════
   MÓDULO DE EVALUACIÓN — TARJETAS TÁCTILES Y RESPONSIVIDAD
════════════════════════════════════════════════════════════ */
.opcion-respuesta {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--color-border-hr, #e2e8f0);
  background-color: var(--color-bg-card, #ffffff);
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.opcion-respuesta:hover {
  border-color: #93c5fd;
  background-color: rgba(13, 110, 253, 0.04);
}

/* Efecto al seleccionar o tocar en móvil */
.opcion-respuesta:active,
.opcion-respuesta.seleccionada,
.opcion-respuesta:has(input[type="radio"]:checked) {
  border-color: #0d6efd !important;
  background-color: rgba(13, 110, 253, 0.12) !important;
}

.opcion-respuesta input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  accent-color: #0d6efd;
  flex-shrink: 0;
  cursor: pointer;
}

.opcion-respuesta .option-letter {
  font-weight: 600;
  margin-right: 8px;
  flex-shrink: 0;
}

.opcion-respuesta .option-text {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text-secondary, #475569);
}

.opcion-respuesta:has(input[type="radio"]:checked) .option-text,
.opcion-respuesta.seleccionada .option-text {
  color: var(--text-primary, #0f172a) !important;
  font-weight: 500;
}

/* Modo Oscuro para tarjetas de opciones */
body.dark-theme .opcion-respuesta,
html.dark-theme .opcion-respuesta,
body.dark .opcion-respuesta {
  border-color: var(--color-border-hr, #334155);
  background-color: var(--color-bg-card, #1e293b);
  color: #f1f5f9;
}

body.dark-theme .opcion-respuesta .option-text,
html.dark-theme .opcion-respuesta .option-text,
body.dark .opcion-respuesta .option-text {
  color: #cbd5e1;
}

body.dark-theme .opcion-respuesta:hover,
html.dark-theme .opcion-respuesta:hover,
body.dark .opcion-respuesta:hover {
  border-color: #60a5fa;
  background-color: rgba(13, 110, 253, 0.12);
}

body.dark-theme .opcion-respuesta:active,
body.dark-theme .opcion-respuesta.seleccionada,
body.dark-theme .opcion-respuesta:has(input[type="radio"]:checked),
html.dark-theme .opcion-respuesta:active,
html.dark-theme .opcion-respuesta.seleccionada,
html.dark-theme .opcion-respuesta:has(input[type="radio"]:checked),
body.dark .opcion-respuesta:active,
body.dark .opcion-respuesta.seleccionada,
body.dark .opcion-respuesta:has(input[type="radio"]:checked) {
  border-color: #3b82f6 !important;
  background-color: rgba(13, 110, 253, 0.22) !important;
}

body.dark-theme .opcion-respuesta:has(input[type="radio"]:checked) .option-text,
body.dark-theme .opcion-respuesta.seleccionada .option-text,
html.dark-theme .opcion-respuesta:has(input[type="radio"]:checked) .option-text,
html.dark-theme .opcion-respuesta.seleccionada .option-text,
body.dark .opcion-respuesta:has(input[type="radio"]:checked) .option-text,
body.dark .opcion-respuesta.seleccionada .option-text {
  color: #ffffff !important;
  font-weight: 500;
}