/* ============================================================
   ACCESIBILIDAD - RESPIRAR VIAJES (Versión PRO - Premium)
   ============================================================ */

/* ---------- BOTÓN FLOTANTE ---------- */
.rv-a11y-fab {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at 30% 20%, #ffb56b 0, #fb923c 22%, #f97316 35%, #311993 100%);
  color: #ffffff;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1050;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.55);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.rv-a11y-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.65);
}
.rv-a11y-fab:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- BACKDROP ---------- */
.rv-a11y-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-out;
}
.rv-a11y-backdrop[open] {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- PANEL PRINCIPAL ---------- */
.rv-a11y-panel {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100%;
  max-height: 92vh;
  background: #f9fafb;
  color: #111827;
  border-radius: 22px 0 0 0;
  box-shadow: -10px -8px 32px rgba(15,23,42,0.45);
  display: flex;
  flex-direction: column;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  z-index: 1045;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1), opacity .24s ease-out;
}
.rv-a11y-panel[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- CABECERA ---------- */
.rv-a11y-head {
  background: linear-gradient(135deg, #245b63 0%, #1b3743 52%, #12232e 100%);
  color: #ffffff;
  padding: 1rem 1.25rem .95rem;
  border-bottom: 1px solid rgba(255,255,255,0.26);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
}
.rv-a11y-head-main {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.rv-a11y-head-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 60%);
}
.rv-a11y-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.rv-a11y-subtitle {
  margin: .12rem 0 0;
  font-size: .82rem;
  opacity: .9;
}
.rv-a11y-close {
  background: rgba(15,23,42,0.1);
  border: 1px solid rgba(255,255,255,0.35);
  color: #ffffff;
  font-size: 1.5rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15,23,42,0.45);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.rv-a11y-close:hover {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 3px 10px rgba(15,23,42,0.6);
}
.rv-a11y-close:active {
  transform: scale(.95);
}

/* ---------- SECCIONES ---------- */
.rv-a11y-sections {
  padding: .85rem 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .95rem;
  overflow-y: auto;
}
.rv-a11y-section {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: .75rem .85rem .95rem;
  box-shadow: 0 1px 4px rgba(15,23,42,0.04);
}
.rv-a11y-section-reset {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.rv-a11y-section-title {
  margin: 0 0 .55rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #9ca3af;
}

/* ---------- TILES / TARJETAS ---------- */
.rv-a11y-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.rv-a11y-tile {
  position: relative;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: radial-gradient(circle at top left, #ffffff 0, #f9fafb 45%, #f3f4f6 100%);
  padding: .55rem .6rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, box-shadow .16s, transform .1s, background .16s;
}
.rv-a11y-tile:hover {
  border-color: #d0d7ff;
  box-shadow: 0 3px 10px rgba(15,23,42,0.16);
  transform: translateY(-1px);
}
.rv-a11y-tile:active {
  transform: translateY(0);
}
.rv-tile-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #ede9fe, #e0e7ff 60%);
  color: #311993;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-tile-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}
.rv-tile-content {
  flex: 1;
}
.rv-tile-title {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: #111827;
}
.rv-tile-desc {
  display: block;
  margin-top: .08rem;
  font-size: .76rem;
  color: #6b7280;
}
.rv-tile-level {
  display: flex;
  gap: 3px;
  margin-top: .1rem;
}
.rv-tile-level span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: #e5e7eb;
}

/* Niveles activos (coloreados en naranja + borde suave) */
.rv-a11y-tile[data-level="1"],
.rv-a11y-tile[data-level="2"],
.rv-a11y-tile[data-level="3"] {
  border-color: #fed7aa;
  box-shadow: 0 3px 10px rgba(249,115,22,0.18);
}
.rv-a11y-tile[data-level="1"] .rv-tile-level span:nth-child(1),
.rv-a11y-tile[data-level="2"] .rv-tile-level span:nth-child(-n+2),
.rv-a11y-tile[data-level="3"] .rv-tile-level span {
  background: #fb923c;
}

/* TILES toggle activos */
.rv-toggle-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #311993 0%, #4b2bbd 50%, #1d123f 100%);
  border-color: #311993;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(49,25,147,0.4);
}
.rv-toggle-btn[aria-pressed="true"] .rv-tile-icon {
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.24), transparent 60%);
  color: #ffffff;
}
.rv-toggle-btn[aria-pressed="true"] .rv-tile-desc {
  color: #e5e7eb;
}

/* Reset */
.rv-reset-btn {
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: .5rem .85rem;
  font-size: .86rem;
  font-weight: 600;
  background: linear-gradient(135deg, #059669 0%, #10b981 60%, #047857 100%);
  color: #ffffff;
  cursor: pointer;
  transition: background .16s, box-shadow .16s, transform .1s;
}
.rv-reset-btn:hover {
  box-shadow: 0 3px 10px rgba(4,120,87,0.55);
}
.rv-reset-btn:active {
  transform: translateY(1px);
}

.rv-a11y-tip {
  margin: .45rem 0 0;
  font-size: .75rem;
  color: #6b7280;
}

/* ---------- CAPA DE LECTURA ---------- */
.rv-reading-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1035;
  display: none;
}
.rv-reading-layer.active {
  display: block;
}
.rv-reading-line,
.rv-reading-mask {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.rv-reading-line {
  height: 3rem;
  border-top: 2px solid #f97316;
  border-bottom: 2px solid #f97316;
  background: rgba(255,255,255,0.0);
}
.rv-reading-mask {
  height: 6rem;
  background: rgba(15,23,42,0.70);
}

/* ---------- CLASES QUE AFECTAN EL DOCUMENTO (html) ---------- */

/* Tamaño de texto */
.rv-a11y-text-1 { font-size: 1.05em; }
.rv-a11y-text-2 { font-size: 1.15em; }
.rv-a11y-text-3 { font-size: 1.27em; }

/* Espaciado de letras */
.rv-a11y-letter-1 { letter-spacing: .04em; }
.rv-a11y-letter-2 { letter-spacing: .08em; }
.rv-a11y-letter-3 { letter-spacing: .12em; }

/* Altura de línea */
.rv-a11y-line-1 { line-height: 1.6; }
.rv-a11y-line-2 { line-height: 1.8; }
.rv-a11y-line-3 { line-height: 2.0; }

/* Brillo */
.rv-a11y-bright-1 { filter: brightness(1.05) !important; }
.rv-a11y-bright-2 { filter: brightness(1.13) !important; }
.rv-a11y-bright-3 { filter: brightness(1.22) !important; }

/* Grises */
.rv-a11y-gray-1 { filter: grayscale(.4) !important; }
.rv-a11y-gray-2 { filter: grayscale(.7) !important; }
.rv-a11y-gray-3 { filter: grayscale(1) !important; }

/* Invertir colores */
.rv-a11y-invert { filter: invert(1) hue-rotate(180deg) !important; }

/* Fuente legible */
.rv-a11y-readable-font {
  font-family: "Arial","Helvetica Neue",system-ui,sans-serif !important;
}

/* Alinear a la izquierda */
.rv-a11y-align-left * {
  text-align: left !important;
}

/* Resaltar enlaces */
.rv-a11y-highlight-links a {
  outline: 2px dashed #fb923c;
  outline-offset: 3px;
  text-decoration: underline;
}

/* Ocultar imágenes */
.rv-a11y-hide-images img {
  display: none !important;
}

/* Pausar animaciones */
.rv-a11y-reduce-motion * {
  animation: none !important;
  transition: none !important;
}

/* Foco / cursor visible */
.rv-a11y-focus-highlight :focus {
  outline: 3px solid #fb923c !important;
  outline-offset: 3px !important;
}

/* ---------- SCROLL DEL PANEL ---------- */
.rv-a11y-sections::-webkit-scrollbar {
  width: 7px;
}
.rv-a11y-sections::-webkit-scrollbar-track {
  background: transparent;
}
.rv-a11y-sections::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}
.rv-a11y-sections::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 480px) {
  .rv-a11y-panel {
    width: 100%;
    border-radius: 22px 22px 0 0;
  }
  .rv-a11y-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}