/* ================================================================
   MENÚ DE ACCESIBILIDAD — réplica exacta del comportamiento MinTIC
   Barra fija 48px, label flota a la izquierda con fade-in al hover
   ================================================================ */

.accessibility-menu {
  position: fixed;
  right: 0;
  top: 45%;
  transform: translateY(-50%);
  z-index: 9999;
  background-color: var(--rtvc-blue);
  border-radius: 10px 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.17) 0 0 10px 3px;
}

.accessibility-menu ul,
.accessibility-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 8px 0;
  width: 48px;  /* barra siempre 48px, no cambia */
}

/* Botón: 48px fijo, ícono centrado */
.accessibility-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background-color 0.2s ease;
}

.accessibility-menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Ícono: cuadrado blanco centrado */
.accessibility-menu-btn .acc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 6px;
  padding: 3px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.accessibility-menu-btn .acc-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--rtvc-blue);
}
/* El link de Signos en Red — mismos estilos que los botones */
a.accessibility-menu-btn {
  text-decoration: none;
  color: white;
}
a.accessibility-menu-btn .acc-icon svg path {
  fill: var(--rtvc-blue) !important;
}

.contrast-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, #004884 50%, white 50%);
  border: 1.5px solid #ccc;
}

/* Label: flota a la izquierda, invisible por defecto — igual que MinTIC */
.acc-label {
  display: flex;
  align-items: center;
  color: white;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  height: 40px;
  padding: 0 10px 0 10px;
  border-radius: 10px 0 0 10px;
  background-color: var(--rtvc-blue);

  /* Posicionado a la izquierda del botón, fuera de la barra */
  position: absolute;
  right: 48px;       /* justo al lado izquierdo del ícono */
  top: 0;

  /* Oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateX(8px);  /* empieza ligeramente a la derecha */
}

/* Al hover sobre el botón: label aparece con fade-in deslizándose */
.accessibility-menu-btn:hover .acc-label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  /* overlay idéntico al del botón para que visualmente sean una sola pieza */
  background: linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.12)), var(--rtvc-blue);
}

/* Estado activo */
.accessibility-menu-btn.active .acc-icon {
  background-color: #28a745;
}
.accessibility-menu-btn.active .acc-icon svg {
  fill: white;
}

/* Deshabilitado */
.accessibility-menu-btn:disabled,
.accessibility-menu-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ================================================================
   ALTO CONTRASTE
   ================================================================ */
body.high-contrast {
  background-color: #000 !important;
  color: #fff !important;
}
body.high-contrast :where(*:not(.accessibility-menu):not(.accessibility-menu *):not(img):not(iframe):not(video):not(svg)) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}
body.high-contrast a:visited {
  color: #e0a0ff !important;
}
/* Tablas: forzar fondo negro y texto blanco (Bootstrap striped override) */
body.high-contrast table,
body.high-contrast table tr,
body.high-contrast table th,
body.high-contrast table td,
body.high-contrast table thead,
body.high-contrast table tbody,
body.high-contrast .table-striped > tbody > tr:nth-of-type(odd) > *,
body.high-contrast .table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  --bs-table-striped-bg: #000 !important;
  --bs-table-bg: #000 !important;
}
body.high-contrast table th {
  background-color: #222 !important;
}
body.high-contrast table a {
  color: #ffff00 !important;
}
body.high-contrast button:not(.accessibility-menu-btn):not(.scroll-to-top):not(.chat-button),
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  background-color: #222 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
/* Menú accesibilidad en alto contraste: fondo amarillo, iconos oscuros */
body.high-contrast .accessibility-menu {
  background-color: #f0b400 !important;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.5);
}
body.high-contrast .accessibility-menu-btn {
  color: #000 !important;
}
body.high-contrast .accessibility-menu-btn .acc-icon {
  background-color: #222 !important;
  border: 1px solid #000;
}
body.high-contrast .accessibility-menu-btn .acc-icon svg {
  fill: #f0b400 !important;
}
body.high-contrast .accessibility-menu-btn .acc-icon svg path,
body.high-contrast .accessibility-menu-btn .acc-icon svg circle,
body.high-contrast .accessibility-menu-btn .acc-icon svg rect {
  fill: #f0b400 !important;
}
body.high-contrast .accessibility-menu-btn .contrast-icon {
  background: linear-gradient(90deg, #000 50%, #f0b400 50%) !important;
  border-color: #000 !important;
}
body.high-contrast .accessibility-menu-btn:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}
body.high-contrast .acc-label {
  background-color: #f0b400 !important;
  color: #000 !important;
}
body.high-contrast .accessibility-menu-btn:hover .acc-label {
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), #f0b400 !important;
  color: #000 !important;
}
body.high-contrast .accessibility-menu-btn.active .acc-icon {
  background-color: #000 !important;
}
body.high-contrast .accessibility-menu-btn.active .acc-icon svg {
  fill: #f0b400 !important;
}

/* Menú nav desktop: texto blanco en alto contraste */
body.high-contrast .header-nav-desktop .nav-link {
  color: #fff !important;
}
body.high-contrast .header-nav-desktop .nav-item {
  background-color: #000 !important;
  border-color: #333 !important;
}
body.high-contrast .header-nav-desktop .nav-link:hover,
body.high-contrast .header-nav-desktop .nav-link:focus-visible {
  background-color: #f0b400 !important;
  color: #000 !important;
}
/* Menú nav: ítems activos con estilo dorado */
body.high-contrast .nav-link.active,
body.high-contrast .header-nav-desktop .active,
body.high-contrast .mobile-nav .nav-link.active,
body.high-contrast .mobile-nav li.is-active > a,
body.high-contrast .mobile-nav li.menu-item--active-trail > a {
  background-color: #f0b400 !important;
  color: #000 !important;
}
body.high-contrast .mobile-nav li.is-active .mobile-submenu-toggle {
  background-color: #f0b400 !important;
  color: #000 !important;
}

body.high-contrast img {
  background-color: transparent !important;
  filter: grayscale(100%) contrast(120%);
}
/* Logos de marca — invertir a blanco sobre fondo negro */
body.high-contrast .header-brands-channels img,
body.high-contrast .header-logo-main img,
body.high-contrast .footer-brands img,
body.high-contrast .brands-logos img,
body.high-contrast .rtvc-channel-logo,
body.high-contrast .rtvc-image-logo img,
body.high-contrast .rtvc-logo,
body.high-contrast .rtvc-contenidos-header img {
  filter: brightness(0) invert(1) !important;
}
/* Organigrama: invertir colores para alto contraste */
body.high-contrast .organigrama-chart__img {
  filter: invert(1) hue-rotate(990deg) contrast(100%) !important;
}
/* Scroll to top: estilo dorado como menú accesibilidad */
body.high-contrast .scroll-to-top {
  background-color: #f0b400 !important;
  border-color: #000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
body.high-contrast #scrollToTop svg,
body.high-contrast #scrollToTop svg path {
  fill: #000 !important;
  stroke: #000 !important;
}
/* Chat FAQ button: estilo dorado como menú accesibilidad */
body.high-contrast .chat-button {
  background-color: #f0b400 !important;
  border: 3px solid #000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
body.high-contrast .chat-button svg path,
body.high-contrast .chat-button svg circle {
  fill: #000 !important;
}
body.high-contrast .chat-button svg circle[fill="#e6effd"] {
  fill: #f0b400 !important;
}
/* Contenedores de imágenes: fondo transparente */
body.high-contrast .rtvc-card-image,
body.high-contrast .rtvc-card-image *,
body.high-contrast .rtvc-content-card .row,
body.high-contrast .rtvc-content-card [class*="col-"],
body.high-contrast .rtvc-content-card .position-relative,
body.high-contrast .featured-card .row,
body.high-contrast .featured-card [class*="col-"],
body.high-contrast .featured-header,
body.high-contrast .carousel-item,
body.high-contrast .node-detail-hero,
body.high-contrast .home-carousel .carousel-inner,
body.high-contrast .home-carousel .carousel-item {
  background-color: transparent !important;
}
/* Cards RTVC en contenidos: versiones oscuras para alto contraste */
body.high-contrast .card-purple .rtvc-card-content {
  background: linear-gradient(135deg, #4a1d6b 0%, #1a0a2e 100%) !important;
}
body.high-contrast .card-orange .rtvc-card-content {
  background: linear-gradient(135deg, #8a5a1a 0%, #3d2808 100%) !important;
}
body.high-contrast .card-brown .rtvc-card-content {
  background: linear-gradient(135deg, #7a4a1a 0%, #2e1a08 100%) !important;
}
body.high-contrast .card-pink .rtvc-card-content {
  background: linear-gradient(135deg, #8a1840 0%, #3a0a1a 100%) !important;
}
body.high-contrast .card-green .rtvc-card-content {
  background: linear-gradient(135deg, #3d5c12 0%, #1a2808 100%) !important;
}
body.high-contrast .card-black .rtvc-card-content {
  background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%) !important;
}

/* Iframes (YouTube, Vimeo): overlay grayscale sobre el contenedor */
body.high-contrast iframe {
  filter: none !important;
  opacity: 1 !important;
}
body.high-contrast .entrevista-contenido p:has(iframe),
body.high-contrast .video-container,
body.high-contrast .field--name-field-video {
  position: relative;
  display: block;
}
body.high-contrast .entrevista-contenido p:has(iframe)::after,
body.high-contrast .video-container::after,
body.high-contrast .field--name-field-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 1;
}
/* Elementos con background-image: aplicar filtro grayscale */
body.high-contrast [style*="background-image"],
body.high-contrast .featured-header {
  filter: grayscale(100%) contrast(120%);
}
/* Texto sobre imágenes de fondo: fondo semitransparente para legibilidad */
body.high-contrast .featured-info,
body.high-contrast .secondary-news-info,
body.high-contrast .card-body {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ================================================================
   TAMAÑOS DE TEXTO
   ================================================================ */
/* Aplicar zoom al root html para que rem escale proporcionalmente */
html:has(body.text-size-plus1)  { font-size: 110% !important; }
html:has(body.text-size-plus2)  { font-size: 120% !important; }
html:has(body.text-size-plus3)  { font-size: 130% !important; }
html:has(body.text-size-minus1) { font-size: 90%  !important; }
html:has(body.text-size-minus2) { font-size: 80%  !important; }
html:has(body.text-size-minus3) { font-size: 70%  !important; }

/* Ya no se necesitan reglas por elemento — el zoom del html root
   escala todo proporcionalmente via rem. Solo se necesitan las
   reglas html:has() de arriba. */

/* sr-only */
.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;
}

/* Responsive — reducir tamaño en móvil */
@media (max-width: 768px) {
  .accessibility-menu {
    border-radius: 8px 0 0 8px;
  }
  .accessibility-menu-btn {
    width: 38px;
    height: 34px;
  }
  .accessibility-menu ul,
  .accessibility-menu-list {
    width: 38px;
    margin: 5px 0;
  }
  .accessibility-menu-btn .acc-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    padding: 2px;
  }
  .accessibility-menu-btn .acc-icon svg {
    width: 16px;
    height: 16px;
  }
  .contrast-icon {
    width: 16px;
    height: 16px;
  }
  .acc-label {
    right: 38px;
    height: 34px;
    font-size: 11px;
  }
}