/* Accessibility layer — desktop + mobile */

/* ─── 1. Ocultar widget de desktop en móvil ─────────────────────────────── */
@media (max-width: 767px) {
  .acc-desktop-only {
    display: none !important;
  }
}

/* ─── 2. Tokens globales ─────────────────────────────────────────────────── */
:root {
  --doradoCYD: #C9A227;
  --acc-bg: #ffffff;
  --acc-surface: #ffffff;
  --acc-text: #1f2937;
  --acc-muted: #4b5563;
  --acc-border: #d1d5db;
  --acc-accent: #dc2323; /* rojo CYD en modo claro */
}

/* ─── 3. Tema oscuro CYD ─────────────────────────────────────────────────── */
html[data-theme="dark-cyd"] {
  --acc-bg: #081a33;
  --acc-surface: #262f3d;
  --acc-text: #f2f6ff;
  --acc-muted: #cfdaef;
  --acc-border: #313c4d ;
  --acc-accent: var(--doradoCYD); /* dorado en modo oscuro */
}

html[data-theme="dark-cyd"] body {
  background-color: var(--acc-bg) !important;
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] header,
html[data-theme="dark-cyd"] footer,
html[data-theme="dark-cyd"] main,
html[data-theme="dark-cyd"] section:not(.home-section),
html[data-theme="dark-cyd"] .bg-white,
html[data-theme="dark-cyd"] .bg-gray-50 {
  background-color: var(--acc-surface) !important;
  color: var(--acc-text) !important;
  border-color: var(--acc-border) !important;
}

/* Secciones con parallax: transparentes para que el fondo sea visible */
html[data-theme="dark-cyd"] section.home-section {
  background-color: transparent !important;
}

html[data-theme="dark-cyd"] p,
html[data-theme="dark-cyd"] li,
html[data-theme="dark-cyd"] label {
  color: var(--acc-muted) !important;
}

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

html[data-theme="dark-cyd"] h1,
html[data-theme="dark-cyd"] h2,
html[data-theme="dark-cyd"] h3,
html[data-theme="dark-cyd"] h4,
html[data-theme="dark-cyd"] h5,
html[data-theme="dark-cyd"] h6,
html[data-theme="dark-cyd"] .text-black,
html[data-theme="dark-cyd"] .text-gray-800,
html[data-theme="dark-cyd"] .text-gray-900 {
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] .text-gray-500,
html[data-theme="dark-cyd"] .text-gray-600,
html[data-theme="dark-cyd"] .text-gray-700 {
  color: var(--acc-muted) !important;
}

html[data-theme="dark-cyd"] a {
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] a:hover,
html[data-theme="dark-cyd"] a:focus-visible {
  color: var(--acc-accent) !important;
}

html[data-theme="dark-cyd"] .linkRojo {
  color: var(--acc-text) !important;
  border-color: transparent !important;
}

html[data-theme="dark-cyd"] .linkRojo:hover,
html[data-theme="dark-cyd"] .linkRojo:focus-visible,
html[data-theme="dark-cyd"] .linkRojo.text-rojoCYD,
html[data-theme="dark-cyd"] .text-rojoCYD {
  color: var(--acc-accent) !important;
  border-color: var(--acc-accent) !important;
}

html[data-theme="dark-cyd"] .bg-gray-100,
html[data-theme="dark-cyd"] .bg-gray-200 {
  background-color: #15325b !important;
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] .bg-neutral-300\/25 {
  background-color: #313c4d  !important;
}

html[data-theme="dark-cyd"] .table-container table {
  color: var(--acc-text) !important;
  background-color: var(--acc-surface) !important;
}

html[data-theme="dark-cyd"] .table-container thead th,
html[data-theme="dark-cyd"] .table-container tbody td {
  border-color: var(--acc-border) !important;
}

html[data-theme="dark-cyd"] .table-container thead th,
html[data-theme="dark-cyd"] .sticky-header {
  background-color: #313c4d !important;
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] .table-container tbody,
html[data-theme="dark-cyd"] .table-container tbody tr,
html[data-theme="dark-cyd"] .table-container tbody td {
  background-color: var(--acc-surface) !important;
  color: var(--acc-text) !important;
}

/* Fila/celda con foco — override del dark general */
html[data-theme="dark-cyd"] .table-container tbody tr.bg-red-50,
html[data-theme="dark-cyd"] .table-container tbody td.bg-red-50 {
  background-color: rgba(201, 162, 39, 0.18) !important; /* dorado suave */
}

html[data-theme="dark-cyd"] .table-container tbody tr:hover,
html[data-theme="dark-cyd"] .table-container tbody tr.hover\:bg-gray-50:hover {
  background-color: #313c4d !important;
}

/* Hover en listados de universidades e indicadores */
html[data-theme="dark-cyd"] .hover\:bg-gray-50:hover,
html[data-theme="dark-cyd"] .hover\:bg-gray-100:hover {
  background-color: #313c4d !important;
}

html[data-theme="dark-cyd"] input,
html[data-theme="dark-cyd"] select,
html[data-theme="dark-cyd"] textarea {
  background-color: #102847 !important;
  color: var(--acc-text) !important;
  border-color: var(--acc-border) !important;
}

html[data-theme="dark-cyd"] input::placeholder,
html[data-theme="dark-cyd"] textarea::placeholder {
  color: var(--acc-muted) !important;
}

/* Selector de ámbitos — cards en dark mode */
html[data-theme="dark-cyd"] .ambito-card {
  background-color: var(--acc-surface) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] .ambito-card:hover {
  border-color: #4a6fa5 !important;
}

html[data-theme="dark-cyd"] .ambito-card.border-rojoCYD {
  border-color: var(--acc-accent) !important;
  background-color: rgba(201, 162, 39, 0.12) !important;
}

html[data-theme="dark-cyd"] .ambito-card .text-gray-900,
html[data-theme="dark-cyd"] .ambito-card .text-red-900 {
  color: var(--acc-text) !important;
}

html[data-theme="dark-cyd"] .ambito-card .text-gray-500 {
  color: var(--acc-muted) !important;
}

html[data-theme="dark-cyd"] .ambito-card .border-gray-300 {
  border-color: var(--acc-border) !important;
}

/* ─── 4. Escalado de texto ───────────────────────────────────────────────── */
html[data-text-scale="normal"] {
  font-size: 100%;
}

html[data-text-scale="large"] {
  font-size: 112.5%;
}

html[data-text-scale="xlarge"] {
  font-size: 125%;
}

html[data-text-scale="large"] body,
html[data-text-scale="xlarge"] body {
  line-height: 1.7;
}

/* ─── 5. Tramados — puntos + texto blanco garantizado ────────────────────── */
html[data-pattern="on"] .acc-solid-surface,
html[data-pattern="on"] .btnRojo,
html[data-pattern="on"] .bg-rojoCYD,
html[data-pattern="on"] .bg-red-600,
html[data-pattern="on"] .bg-blue-600,
html[data-pattern="on"] .bg-gray-800 {
  color: #ffffff !important;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.35) 2px,
    transparent 2px
  ) !important;
  background-size: 10px 10px !important;
  background-blend-mode: overlay;
}

@media (max-width: 768px) {
  html[data-pattern="on"] .acc-solid-surface,
  html[data-pattern="on"] .btnRojo,
  html[data-pattern="on"] .bg-rojoCYD,
  html[data-pattern="on"] .bg-red-600,
  html[data-pattern="on"] .bg-blue-600,
  html[data-pattern="on"] .bg-gray-800 {
    background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.6) 2px,
      transparent 2px
    ) !important;
  }
}

/* ─── 9. Panel y botones del widget ─────────────────────────────────────── */
.acc-menu-panel {
  width: min(92vw, 26rem);
  z-index: 2000;
}

.acc-option-btn {
  border: 1px solid var(--acc-border);
  /*border-radius: 0.5rem;*/
  padding: 0.35rem 0.6rem;
  color: var(--acc-text);
  background-color: var(--acc-surface);
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: normal;
}

.acc-option-btn:hover {
  border-color: var(--acc-accent);
}

.acc-option-active {
  border-color: var(--acc-accent) !important;
  color: var(--acc-accent) !important;
  font-weight: 600;
}

.acc-menu-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acc-text);
  margin-bottom: 0.5rem;
}