/* v1.16.1-pedasi.9 · Bloque 2 de cierre: Hoja del teléfono (tres alturas, tirador y botones), ancho del panel en escritorio, zonas seguras y panel en horizontal.
   Todo lo de este archivo es opcional por caso (clases de body que pone el motor según el manifiesto) o corrige un defecto medido. */

/* ── Paneles ajustables (`paneles.ajustables`, body.paneles-ajustables; lo monta js/paneles-ajustes.js) ──
   Las reglas llevan body.paneles-ajustables + #panel + el estado: así pesan más que las de experiencia.css que fijan la
   altura de la hoja (62vh, 100 % − 48 px a 640 de alto, la ficha breve con 22rem, sin-marca, de-guia). */

/* El asa decorativa de siempre no se usa: en el teléfono vertical la sustituye el asa-botón; en los demás tamaños, nada. */
body.paneles-ajustables #panel .asa{display:none}

/* ── Teléfono vertical (ancho ≤ 700, alto > 500): asa de 44 px y tres alturas ── */
@media (max-width:700px) and (min-height:501px){
  body.paneles-ajustables #panel .asa{display:flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;
    border-radius:22px 22px 0 0;background:none;color:inherit;flex:none;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
  body.paneles-ajustables #panel .asa i{display:block;width:44px;height:5px;border-radius:3px;background:rgba(250,249,245,.45);transition:background var(--t-hover),width var(--t-hover)}
  body.paneles-ajustables #panel .asa:hover i{background:rgba(250,249,245,.7)}
  body.paneles-ajustables #panel .asa:focus-visible{outline:2px solid var(--senal);outline-offset:-4px}
  body.paneles-ajustables #panel .asa:focus-visible i{width:60px;background:var(--senal)}
  /* compacta = la cabecera: el asa queda como franja de arrastre (fuera del orden de tabulación; «Mostrar» es el botón) */
  body.paneles-ajustables #panel.plegado .asa,body.paneles-ajustables #panel.desde-compacta .asa{height:16px;min-height:16px}
  body.paneles-ajustables #panel .cab{touch-action:none;padding-top:0}
  body.paneles-ajustables #panel.arrastrando{transition:none!important;user-select:none;-webkit-user-select:none}
  body.paneles-ajustables #panel.arrastrando .asa,body.paneles-ajustables #panel.arrastrando .cab{cursor:grabbing}

  /* intermedia: la de lectura (la calcula paneles-ajustes.js por vista: ficha breve ~46 %, lista ~58 %, recorrido 48 %) */
  body.paneles-ajustables #panel[data-altura="intermedia"]:not(.plegado):not(.expandido){height:var(--hoja-media,min(62vh,560px));max-height:none}
  /* la ficha breve mide su contenido, sin pasar de la intermedia */
  body.paneles-ajustables #panel.compacta[data-altura="intermedia"]:not(.plegado):not(.expandido){height:auto;max-height:var(--hoja-media,min(62vh,560px))}
  /* ampliada: hasta 56 px del borde de arriba, o bajo la zona segura (isla, muesca) + 8 px si es mayor */
  body.paneles-ajustables #panel.expandido:not(.plegado){height:var(--hoja-alta,calc(100% - max(56px, env(safe-area-inset-top) + 8px)));max-height:none}
  body.paneles-ajustables #panel.expandido:not(.plegado) .cuerpo{flex:1 1 auto}      /* ficha breve ampliada: el pie abajo, no a media hoja */
  /* el cambio de altura con el asa, el teclado o al soltar el arrastre (sin animación con movimiento reducido: --t-panel 0) */
  body.paneles-ajustables #panel.hoja-anima{transition:height var(--t-panel) cubic-bezier(.2,.8,.2,1),transform var(--t-panel) cubic-bezier(.2,.8,.2,1)}
}

/* ── Pantallas bajas (alto ≤ 400: teléfono horizontal) ──
   Antes se desplazaba el panel entero (v1.7.1): en la ficha 214 a 844×390 el botón de WhatsApp quedaba en y=972 y, tras
   «Atrás», la fila quedaba bajo la cabecera fija. Ahora se desplaza el cuerpo y la cabecera y el pie quedan a la vista.
   Si ni así caben dos líneas de lectura (texto muy grande), paneles-ajustes.js pone .hoja-apretada: vuelve a desplazarse
   el panel entero, con la cabecera fija y, si cabe, el pie también. */
@media (max-height:400px){
  body.paneles-ajustables #panel:not(.hoja-apretada){overflow:clip}
  body.paneles-ajustables #panel:not(.hoja-apretada) .cuerpo{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
  body.paneles-ajustables #panel .cuerpo{padding-top:12px;padding-bottom:14px}      /* unos px más de lectura entre cabecera y pie */
}
/* v1.16.1-pedasi.9 (corrección de la revisión): la salida .hoja-apretada vale hasta 500 px de alto (horizontal sin barra del
   navegador o dentro de otra app, ~915×412, con texto grande: el cuerpo caía a 0 y el pie quedaba recortado). Entre 401 y
   500 px el desplazamiento del panel entero no viene de experiencia.css (solo ≤ 400): se pone aquí, y solo con la clase. */
@media (max-height:500px){
  body.paneles-ajustables #panel.hoja-apretada{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  body.paneles-ajustables #panel.hoja-apretada .cuerpo{flex:none;overflow:visible}
  body.paneles-ajustables #panel.hoja-apretada .cab{position:sticky;top:0;z-index:3;background:var(--velo);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  body.paneles-ajustables #panel.hoja-apretada.pie-pegado .pie{position:sticky;bottom:0;z-index:3}
  body.paneles-ajustables #panel.hoja-apretada{scroll-padding-top:calc(var(--cab-alto,0px) + 8px)}
  body.paneles-ajustables #panel.hoja-apretada.pie-pegado{scroll-padding-bottom:calc(var(--pie-alto,0px) + 8px)}
}
/* lo que se lleva a la vista dentro del panel (foco, «Atrás» a una fila) deja margen bajo la cabecera y sobre el pie */
body.paneles-ajustables #panel .cuerpo :is(button,a,summary,input,[tabindex]){scroll-margin-block:12px}

/* ── Zonas seguras del panel lateral (escritorio y teléfono horizontal): arriba y abajo (barra de inicio del iPhone) ── */
@media (min-width:701px){
  body.paneles-ajustables #panel{top:max(var(--margen),env(safe-area-inset-top))}
  body.paneles-ajustables #panel:not(.plegado){bottom:max(var(--margen),env(safe-area-inset-bottom))}
}

/* ── Ancho del panel en escritorio: su borde izquierdo (arrastre o flechas). Solo aparece si la ventana deja margen
   (de 320 px al menor entre 560 px y el ancho − 672 px: 640 px libres para la panorámica). ── */
#panel-borde{position:absolute;left:0;top:0;bottom:0;width:12px;z-index:4;display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none}
#panel-borde i{display:block;width:4px;height:44px;border-radius:2px;background:rgba(250,249,245,.3);transition:background var(--t-hover),height var(--t-hover)}
#panel-borde:hover i,#panel-borde:focus-visible i,body.ajustando-ancho #panel-borde i{background:var(--senal);height:72px}
#panel-borde:focus-visible{outline:2px solid var(--senal);outline-offset:-3px;border-radius:8px}
@media (max-width:700px){ #panel-borde{display:none!important} }
/* v1.16.1-pedasi.9 (corrección de la revisión): en una pantalla solo táctil (tableta sin ratón ni trackpad) la franja de 12 px
   no llega a los 44 px de toque, y ensancharla taparía «‹ Atrás» y el borde de las filas (hacia fuera la recorta el panel):
   no se ofrece y el panel conserva su ancho de siempre. paneles-ajustes.js usa la misma condición. Con ratón o trackpad, un
   clic sin arrastrar alterna con el más ancho (alternativa sin arrastre). */
@media not all and (any-pointer:fine){ #panel-borde{display:none!important} }
body.ajustando-ancho,body.ajustando-ancho *{cursor:ew-resize!important;user-select:none!important;-webkit-user-select:none!important}
body.ajustando-ancho #panel,body.ajustando-ancho nav.principal,body.ajustando-ancho .espacial,body.ajustando-ancho #guia{transition:none!important}