/* Menú de Apariencia y accesibilidad · Cristian Estrada · v1.1 (6 nov 2026)
   Usa los tokens de interfaz/base/base.css (--teal, --tint, --surface, --ink, --muted, --line, --orange).
   En proyectos de clientes, la aplicación define esos tokens con los colores del cliente. */

/* Tamaño de letra: escala toda la interfaz, también lo medido en px */
html { --ce-letra: 1; }
body { zoom: var(--ce-letra); }
/* Espacio de trabajo (si la aplicación lo ofrece): limita el ancho con var(--ce-ancho) */
html[data-espacio="compacto"] { --ce-ancho: 1100px; }
html:not([data-espacio]) { --ce-ancho: 1280px; }
html[data-espacio="amplio"] { --ce-ancho: 1600px; }

/* Botón y panel */
.ce-a11y { position: relative; display: inline-flex; align-items: center; }
.ce-a11y__boton { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, transform .35s cubic-bezier(.34, 1.36, .64, 1); }
.ce-a11y__boton:hover, .ce-a11y__boton[aria-expanded="true"] { background: rgba(127, 211, 206, .18); }
.ce-a11y__boton[aria-expanded="true"] { transform: rotate(180deg); }
.ce-a11y__boton:active { box-shadow: 0 0 0 3px var(--orange, #ff9444); }
.ce-a11y__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ce-a11y__panel { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 900; width: 290px; padding: 18px 18px 14px; text-align: left;
  background: var(--surface, #fff); color: var(--ink, #26302f); border: 1px solid var(--line, #d9e3e1); border-radius: 20px;
  box-shadow: 0 24px 50px -20px rgba(1, 79, 76, .5); font-family: var(--fuente-ui, "Open Sans", sans-serif); animation: ce-a11y-entra .25s cubic-bezier(.2, .8, .2, 1); }
.ce-a11y__panel[hidden] { display: none; }
@keyframes ce-a11y-entra { from { opacity: 0; transform: translateY(-6px); } }
.ce-a11y__titulo { margin: 0 0 10px; font: 800 16px var(--fuente-titulo, "Montserrat", sans-serif); color: var(--teal-deep, #014f4c); }
.ce-a11y__rotulo { margin: 10px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #66736f); }
.ce-a11y__segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--tint, #f3f8f7); }
.ce-a11y__segmentos button { border: 0; border-radius: 10px; padding: 6px 4px; background: transparent; color: var(--ink, #26302f); font: 600 13px var(--fuente-ui, sans-serif); cursor: pointer; transition: background-color .2s, color .2s; }
.ce-a11y__segmentos button[aria-checked="true"] { background: var(--teal, #027a76); color: var(--on-teal, #fff); }
.ce-a11y__interruptor { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.ce-a11y__interruptor input { appearance: none; position: relative; width: 42px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #c5d1cc; cursor: pointer; transition: background-color .25s; }
.ce-a11y__interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.34, 1.36, .64, 1); }
.ce-a11y__interruptor input:checked { background: var(--teal, #027a76); }
.ce-a11y__interruptor input:checked::after { transform: translateX(18px); }
.ce-a11y__nota { margin: 12px 0 0; font-size: 12px; color: var(--muted, #66736f); }
@media (max-width: 600px) { .ce-a11y__panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; } }

/* Alto contraste: refuerza textos, bordes y enlaces */
html.ce-contraste { --muted: var(--ink); --line: #1f2328; }
html.ce-contraste[data-tema="oscuro"] { --line: #c9d6d3; --ink: #ffffff; }
html.ce-contraste a:not(.ce-autoria) { text-decoration: underline; }
html.ce-contraste .ce-tarjeta, html.ce-contraste details.ce-pliegue, html.ce-contraste .ce-boton--sec, html.ce-contraste input,
html.ce-contraste select, html.ce-contraste textarea { border-width: 2px; }

/* Animaciones desactivadas */
html.ce-quieto *, html.ce-quieto *::before, html.ce-quieto *::after { animation: none !important; transition: none !important; }
html.ce-quieto .ce-boton:active, html.ce-quieto details.ce-pliegue > summary:active, html.ce-quieto .ce-tarjeta-enlace:active { transform: none !important; }