/* Kuma 2026 · menú de accesibilidad (inc/accesibilidad.php, assets/accesibilidad.js).
   Burbuja encima del globo de WhatsApp (chat.css), mismo tamaño y sombra; su
   ventana se abre hacia arriba como la del chat. Los ajustes son clases a11y-*
   en <html>. */
.kuma-a11y{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:8990;
  color:#0b1c28;font-family:'Source Sans 3',sans-serif}
.kuma-a11y[hidden]{display:none}
/* con el globo de WhatsApp en la página, la burbuja va justo encima */
body:has(.kuma-chat) .kuma-a11y{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 72px)}
.kuma-a11y__boton{position:relative;display:grid;place-items:center;width:60px;height:60px;margin-left:auto;border:0;border-radius:50%;
  background:#2b6c97;color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(11,28,40,.25);transition:transform .2s,box-shadow .2s,background-color .2s}
.kuma-a11y__boton:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(11,28,40,.32);background:#142c45}
.kuma-a11y__boton:focus-visible{outline:3px solid #0b1c28;outline-offset:3px}
.kuma-a11y__boton[aria-expanded="true"]{background:#0b1c28}
.kuma-a11y--activo .kuma-a11y__boton::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;
  background:#3797ca;box-shadow:0 0 0 3px #fff}

.kuma-a11y__panel{position:absolute;right:0;bottom:76px;width:380px;max-width:calc(100vw - 40px);max-height:calc(100dvh - 190px);
  display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(11,28,40,.3);overflow:hidden;
  transform-origin:bottom right;animation:kuma-a11y-entra .18s ease-out}
.kuma-a11y__panel[hidden]{display:none}
@keyframes kuma-a11y-entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

.kuma-a11y__cabeza{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:#0b1c28;color:#fff}
.kuma-a11y__icono{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#2b6c97}
.kuma-a11y__cabeza > div{flex:1;min-width:0}
.kuma-a11y__titulo{margin:0;font-weight:700;font-size:16px;line-height:1.2}
.kuma-a11y__sub{margin:2px 0 0;font-size:13px;line-height:1.2;color:#c5d9e6}
.kuma-a11y__cerrar{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.kuma-a11y__cerrar:hover{background:rgba(255,255,255,.12)}
.kuma-a11y__cerrar:focus-visible{outline:2px solid #fff;outline-offset:1px}

.kuma-a11y__cuerpo{flex:1;overflow-y:auto;padding:16px;background:#f4f7fa}
.kuma-a11y__tam{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:10px 10px 10px 14px;
  border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(11,28,40,.08);font-size:15px;font-weight:600}
.kuma-a11y__tam-ctl{display:flex;align-items:center;gap:4px}
.kuma-a11y__tam-ctl button{width:40px;height:40px;border:0;border-radius:50%;background:#e7f1f8;color:#2b6c97;font:700 15px/1 'Source Sans 3',sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.kuma-a11y__tam-ctl button:hover{background:#2b6c97;color:#fff}
.kuma-a11y__tam output{min-width:52px;text-align:center;font-size:15px;font-variant-numeric:tabular-nums;color:#4a5a66}

.kuma-a11y__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kuma-a11y__op{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:86px;padding:12px 14px;
  border:2px solid transparent;border-radius:12px;background:#fff;color:#0b1c28;font:600 15px/1.25 'Source Sans 3',sans-serif;text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(11,28,40,.08);transition:border-color .15s,background-color .15s,color .15s}
.kuma-a11y__op svg{color:#2b6c97}
.kuma-a11y__op:hover{border-color:#a6d0ec}
.kuma-a11y__op[aria-pressed="true"]{background:#2b6c97;border-color:#2b6c97;color:#fff}
.kuma-a11y__op[aria-pressed="true"] svg{color:#fff}
.kuma-a11y__cuerpo :is(button):focus-visible{outline:3px solid #0b1c28;outline-offset:2px}

.kuma-a11y__pie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid #dbe6ee;font-size:14px}
.kuma-a11y__reset{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #c5d9e6;border-radius:999px;background:#fff;
  color:#0b1c28;font:600 14px/1 'Source Sans 3',sans-serif;cursor:pointer}
.kuma-a11y__reset::before{content:"↺";font-size:16px;line-height:1}
.kuma-a11y__reset:hover{border-color:#2b6c97;color:#2b6c97}
.kuma-a11y__pie a{color:#2b6c97;text-decoration:underline;text-underline-offset:2px}
.kuma-a11y__pie :is(a,button):focus-visible{outline:2px solid #0b1c28;outline-offset:2px}

@media (max-width:480px){
  .kuma-a11y{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
  body:has(.kuma-chat) .kuma-a11y{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 66px)}
  .kuma-a11y__boton{width:56px;height:56px}
  .kuma-a11y__panel{position:fixed;left:10px;right:10px;bottom:150px;width:auto;max-width:none;max-height:calc(100dvh - 170px)}
}
@media (prefers-reduced-motion:reduce){
  .kuma-a11y__panel{animation:none}
  .kuma-a11y__boton{transition:none}
}

/* ---- Ajustes ----------------------------------------------------------
   Tamaño del texto con zoom sobre el contenido y el pie (las secciones del Figma
   van en px, así que cambiar el tamaño de letra de <html> no las movería). La
   cabecera no se agranda para que no se salga de la barra. */
html.a11y-texto-1 #contenido,html.a11y-texto-1 .pie{zoom:1.15}
html.a11y-texto-2 #contenido,html.a11y-texto-2 .pie{zoom:1.3}
html.a11y-texto-3 #contenido,html.a11y-texto-3 .pie{zoom:1.5}
html.a11y-texto-4 #contenido,html.a11y-texto-4 .pie{zoom:1.75}
html[class*="a11y-texto-"] #contenido{overflow-x:clip}

html.a11y-interlineado body :is(p,li,dd,dt,td,th,label,blockquote){line-height:1.9!important}
html.a11y-interlineado body :is(p,li){letter-spacing:.02em!important;word-spacing:.08em!important}

/* filtro en <html> (no en body) para que la cabecera fija siga fija */
html.a11y-contraste{filter:contrast(1.45)}
html.a11y-grises{filter:grayscale(1)}
html.a11y-contraste.a11y-grises{filter:grayscale(1) contrast(1.45)}

html.a11y-enlaces a:not(.kuma-a11y a){text-decoration:underline!important;text-underline-offset:3px!important;text-decoration-thickness:2px!important}
html.a11y-enlaces :is(#contenido,.pie) a:not(:has(img,picture,svg)){background:#fff36b!important;color:#0b1c28!important;-webkit-text-fill-color:#0b1c28!important}

html.a11y-legible body,html.a11y-legible body :is(h1,h2,h3,h4,h5,h6,p,li,a,span,button,input,select,textarea,label,td,th,div){font-family:Verdana,Tahoma,'Source Sans 3',sans-serif!important}

html.a11y-pausa *,html.a11y-pausa *::before,html.a11y-pausa *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3.5 7z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto!important}