/* =============================================================================
 * RIZOMA MAUX · Celulares, tabletas y pantallas táctiles
 * -----------------------------------------------------------------------------
 * Este archivo se carga de último y reúne todo lo que cambia cuando:
 *   a) la pantalla es angosta (celular ≤ 760 px, tableta ≤ 1100 px), o
 *   b) se usa el dedo y no el ratón  →  @media (hover: none) and (pointer: coarse)
 *      (además <html> recibe la clase «tactil»; ver js/core/tactil.js).
 *
 * Criterios:
 *   - Nada debe obligar a desplazar la página hacia los lados.
 *   - Todo lo que se toca mide al menos 40-44 px.
 *   - Las matrices de doble entrada se leen «apiladas» en el celular: una meseta
 *     tras otra, con el nombre de la relación en cada tarjeta.
 *   - Los campos de texto usan 16 px para que iPhone no amplíe la página.
 * ========================================================================== */

/* ---------------------- Fondo del menú lateral (móvil) ---------------------- */
.menu-fondo { display: none; }
.sidebar-grado { display: none; }
.burbuja-ayuda { position: fixed; z-index: 1200; max-width: min(86vw, 360px); padding: 10px 14px; border-radius: 14px; background: #0f172a; color: #f8fafc; font-size: .88rem; line-height: 1.4;
  box-shadow: 0 14px 34px rgba(2, 6, 23, .45); pointer-events: none; animation: entrar .18s ease both; }

@media (max-width: 980px) {
  .menu-abierto .menu-fondo { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(2, 6, 23, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .sidebar { z-index: 40; padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .menu-abierto { overflow: hidden; }
}

/* =============================== TABLETA =================================== */
@media (max-width: 1100px) {
  .oi-generar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  /* Matrices de doble entrada «apiladas»: cada meseta es una franja y debajo van sus
     cuatro relaciones (2 × 2 en tableta, una columna en celular). Así no hay que
     deslizar hacia los lados; cada tarjeta dice a qué relación pertenece. */
  .matriz-wrap { overflow: visible; padding-bottom: 0; }
  .matriz:not(.pe-calor) { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .matriz:not(.pe-calor) > .mz-esquina, .matriz:not(.pe-calor) > .mz-col { display: none; }
  .matriz:not(.pe-calor) > .mz-fila { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; padding: 10px 14px;
    position: sticky; top: calc(var(--topbar) + env(safe-area-inset-top) + 2px); z-index: 6; background: color-mix(in srgb, var(--c) 18%, var(--surface-solid)); box-shadow: var(--sombra); }
  .matriz:not(.pe-calor) > .mz-fila:first-of-type { margin-top: 0; }
  .matriz:not(.pe-calor) > .mz-fila small { flex-basis: 100%; }
  .matriz:not(.pe-calor) > .mz-celda, .matriz > .pe-val-celda { min-height: 0; }
  .matriz [data-rel]::before { content: attr(data-rel); display: block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--r, var(--texto-2)); filter: brightness(.82); margin-bottom: 2px; }
  .pe-valgrid > .mz-esquina { display: block !important; grid-column: 1 / -1; padding: 6px 2px; text-align: left; }
  .pe-val-celda { padding: 10px 12px; gap: 6px; }
  .pe-val-fila { gap: 6px; }
  .pe-val-fila > span { width: 48px; font-size: .82rem; }
  .pe-val-fila .seg-nivel { flex: 1; width: auto; height: 40px; font-size: .9rem; }
}
@media (max-width: 980px) {
  /* Barra superior: el buscador ocupa el espacio libre */
  .topbar .espacio { display: none; }
  .topbar .buscar { flex: 1; min-width: 0; max-width: none; }
}

/* =============================== CELULAR =================================== */
@media (max-width: 760px) {
  /* Barra superior: el buscador ocupa todo el espacio disponible */
  .topbar { gap: 8px; }
  .resultados { position: fixed; left: 8px; right: 8px; width: auto; top: calc(var(--topbar) + env(safe-area-inset-top) + 4px); max-height: 72vh; }
  .res-pie { display: none; }
  .sidebar-grado { display: block; margin: 0 4px 6px; }
  .sidebar-grado select { width: 100%; }
  #vista { padding: 14px 12px calc(92px + env(safe-area-inset-bottom)); }
  .card { border-radius: 16px; }
  .page-header { margin-bottom: 12px; }
  .page-title p { font-size: .88rem; }

  /* Pestañas: una sola fila que se desliza con el dedo */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0; scroll-snap-align: start; }
  .segmentado { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .segmentado::-webkit-scrollbar { display: none; }
  .seg { flex-shrink: 0; }

  /* Matrices apiladas (ver «TABLETA»): en el celular, una sola columna */
  .matriz:not(.pe-calor) { grid-template-columns: minmax(0, 1fr); }
  .pe-val-fila .seg-nivel { height: 42px; }

  /* Mapa de calor: cabe completo, en miniatura */
  .pe-calor { grid-template-columns: 60px repeat(4, minmax(0, 1fr)); min-width: 0; gap: 4px; }
  .pe-calor .mz-col, .pe-calor .mz-fila { padding: 6px 2px; border-radius: 10px; align-items: center; text-align: center; }
  .pe-calor .mz-col b, .pe-calor .mz-fila b { font-size: .56rem; line-height: 1.15; overflow-wrap: anywhere; }
  .pe-calor .mz-col svg, .pe-calor .mz-fila svg { width: 16px; height: 16px; }
  .pe-calor-celda { padding: 6px 2px; min-height: 54px; align-items: center; border-radius: 10px; }
  .pe-calor-celda b { font-size: 1.05rem; } .pe-calor-celda > span { font-size: .6rem; } .pe-calor-celda .mz-pie { display: none; }
  .pe-calor > .mz-esquina small { font-size: .56rem; }

  /* Selector compacto de celdas y tríada */
  .pe-mini { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); max-width: 100%; }
  .pe-mini-cab { padding: 6px 4px; font-size: .68rem; min-width: 0; }
  .pe-mini-cab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pe-mini > .pe-mini-cab:nth-child(-n+5) span { display: none; }   /* encabezados de columna: solo el ícono */
  .pe-barras .barra, .barra { grid-template-columns: 96px 1fr 30px; }

  /* Planificador, clase y documentos */
  .editor-md, .previa { min-height: 34vh; max-height: 62vh; }
  .export-menu { gap: 6px; }
  .export-menu .btn { flex: 1 1 auto; justify-content: center; }
  .barra-ed { flex-direction: column; align-items: flex-start; gap: 6px; }
  .comp-grid { grid-template-columns: 1fr; }
  .fases-clase li { padding-left: 46px; }
  .presentacion { font-size: 1rem; } .presentacion h1 { font-size: 1.5rem; }
  .seguimiento .fila .btn { flex: 1; }

  /* Organizadores */
  .oi-estudio { gap: 10px; margin-top: 10px; }
  .oi-editor { min-height: 24vh; max-height: 34vh; font-size: 16px; }
  .oi-area { height: 54vh; min-height: 300px; }
  .oi-barra { top: 6px; right: 6px; }
  .oi-generar .fila { flex-wrap: wrap !important; }
  .oi-generar .fila > .btn { flex: 1 1 100%; justify-content: center; }

  /* Ventanas: suben desde abajo y usan todo el ancho */
  .modal-fondo { padding: 0; place-items: end center; }
  .modal { max-width: 100% !important; max-height: 92vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .modal-cabecera { padding: 14px 16px; } .modal-cuerpo { padding: 14px 16px; }
  .modal-pie { flex-wrap: wrap; padding: 12px 16px; } .modal-pie .btn { flex: 1 1 auto; justify-content: center; }
  .usuario-menu { position: fixed; right: 8px; left: 8px; top: calc(var(--topbar) + env(safe-area-inset-top) + 4px); min-width: 0; }
  #toasts { left: 10px; right: 10px; transform: none; bottom: calc(84px + env(safe-area-inset-bottom)); }
  #ayuda-pestana { bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* Ayuda: cabecera en una línea e índice como fila que se desliza */
  #ayuda { padding-top: env(safe-area-inset-top); }
  .ayuda-cab { gap: 8px; padding: 10px 12px; }
  .ayuda-cab > .fila { flex-wrap: nowrap; }
  .ayuda-cab > .fila:first-child { min-width: 0; }
  .ayuda-cab > .fila:first-child b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ayuda-cab small { display: none; }
  .ayuda-lateral { max-height: none; padding: 10px 12px 6px; }
  .ayuda-indice { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .ayuda-indice::-webkit-scrollbar { display: none; }
  .ayuda-indice a { flex-shrink: 0; white-space: nowrap; border: 1px solid var(--borde); background: var(--surface-solid); border-radius: 999px; padding: 8px 12px; }
  .ayuda-cuerpo { padding: 10px 12px calc(40px + env(safe-area-inset-bottom)); }
  .ayuda-sec > .md { padding: 4px 14px 14px; }
  .tabla-wrap { -webkit-overflow-scrolling: touch; }
  .tabla-wrap th, .tabla-wrap td:first-child { overflow-wrap: normal; }   /* la primera columna no parte las palabras letra por letra */
  .tabla-wrap table:has(th:nth-child(4)) { min-width: 560px; }   /* las tablas de 4 o más columnas se deslizan dentro de su marco */
  .tabla2 { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-otro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* En celulares angostos, Ayuda y Tema pasan al menú del usuario */
  .topbar #btn-ayuda, .topbar #btn-tema, .topbar #btn-video { display: none; }
}
@media (min-width: 561px) { .usuario-op.solo-movil { display: none; } }

/* Celular acostado: se aprovecha la poca altura */
@media (max-height: 520px) and (orientation: landscape) {
  .oi-area { height: 78vh; min-height: 220px; } .editor-md, .previa { min-height: 60vh; }
  .modal { max-height: 98vh; }
  /* Pantalla de ingreso: presentación a la izquierda y tarjeta compacta a la derecha */
  #acceso { place-items: start center; padding: 10px calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)); }
  .acc-marco { grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr); gap: 16px; align-items: start; }
  .acc-hero h1 { font-size: 1.5rem; } .acc-lema { font-size: .9rem; }
  .acc-tarjeta { padding: 14px 16px 10px; } .acc-cab { margin: 4px 0 6px; } .acc-cab h2 { font-size: 1.15rem; }
  .acc-cab p, .acc-nota, .acc-pie { display: none; }
  .acc-forma { gap: 5px; } .acc-etq { margin-top: 2px; } .acc-campo { padding: 9px 12px; } .acc-entrar { padding: 10px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #acceso { padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ============ ESTRATEGIA DIDÁCTICA INSTITUCIONAL (5 momentos) ============== */
@media (max-width: 760px) {
  .edi-pasos, .edi-franja { flex-direction: column; }
  .edi-paso { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 10px; min-height: 44px; }
  .edi-paso small { grid-column: 2; }
  .edi-paso em { grid-column: 3; grid-row: 1; }
  .edi-estaciones { grid-template-columns: 1fr; }
  .estacion details summary { min-height: 40px; }
}

/* ============ PLANIFICADOR: configuración plegable (en una columna) ========= */
/* Cuando el Planificador va en una sola columna, el riel se convierte en una barra horizontal. */
@media (max-width: 1100px) {
  .planificador.plegada { grid-template-columns: minmax(0, 1fr); }
  .planificador.plegada > .plan-riel { position: static; flex-direction: row; min-height: 0; padding: 8px 12px 8px 8px; gap: 10px; justify-content: flex-start; text-align: left; animation: entrar .3s ease; }
  .plan-riel:hover { transform: none; }
  .plan-riel-texto, .plan-riel-dato, .plan-riel-grado { display: none; }
  .plan-riel-resumen { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
  .plan-riel-resumen b { color: var(--texto); margin-right: 6px; }
}

/* ============== ÁREA DE DOS PANELES (editor y vista previa) ================ */
/* En celular no hay asas ni ventanas flotantes: quedan las tres vistas y «Ampliar». */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  .dual-bt-flotar { display: none; }   /* las ventanas flotantes necesitan ratón y espacio */
}
@media (max-width: 760px) {
  .dual-asa-alto { display: none; }
  .dual-bt { width: 40px; height: 40px; }
  .dual-vista { min-height: 40px; }
  .dual.ampliada { padding-left: 8px; padding-right: 8px; }
  .dual-acciones .btn-icono { width: 40px; height: 40px; }
}

/* ====================== CENTRO DE AVISOS (campana) ========================= */
@media (max-width: 760px) {
  #avisos-panel { width: 100vw; border-left: 0; }
  .aviso-destacado { left: 8px; right: 8px; width: auto; top: calc(var(--topbar) + env(safe-area-inset-top) + 8px); }
  .guia-ia { grid-template-columns: 1fr; min-height: 0; }
  .guia-pasos { grid-auto-flow: column; grid-auto-columns: 1fr; padding: 12px 8px; border-radius: 0; gap: 2px; }
  .guia-pasos li { flex-direction: column; gap: 4px; padding: 6px 2px; text-align: center; font-size: .68rem; line-height: 1.15; }
  .guia-hoja { padding: 16px 14px 6px; }
  .guia-pie { padding: 10px 14px 14px; }
  .guia-pie .btn { flex: 1; justify-content: center; }
  .aviso-acciones .btn { min-height: 40px; }
  .aviso-x { width: 40px; height: 40px; top: 4px; right: 4px; }
}

/* ========================= PANTALLAS TÁCTILES ============================== */
@media (hover: none) and (pointer: coarse) {
  /* Tamaño cómodo para el dedo */
  .comp-chip, .rol, .ed-op, .seg, .usuario-op, .resultado, .catalogo-item, .hist-abrir, .check, .pe-chip-val, .oi-chip, .usuario-boton, .pe-mini-cab { min-height: 42px; }
  .comp-chip.mini { min-height: 40px; padding: 6px 12px; font-size: .82rem; }
  .verbo { min-height: 38px; padding: 6px 14px; font-size: .86rem; }
  .verbos { gap: 8px; }
  .btn-icono { width: 44px; height: 44px; }
  .ia-cab .btn-icono, .ayuda-cab .btn-icono, .hist-item .btn-icono, .ordenar li .btn-icono, .oi-barra .btn-icono { width: 42px; height: 42px; }
  .seg-nivel { width: 40px; height: 40px; font-size: .86rem; margin: 2px; }
  .seg-compacto .seg-nivel { width: 34px; height: 38px; }
  .pe-mini-celda { height: 44px; }
  .grado-pill { min-width: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  input[type="range"] { min-height: 34px; }
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea { font-size: 16px !important; }   /* iPhone no amplía la página */
  .input, select { min-height: 44px; }
  .asa-lateral { width: 28px; left: calc(var(--sidebar) - 14px); }
  .oi-chip button { padding: 8px; }
  .enlaces-lista li { padding: 4px 0; }

  /* Sin «pasar el cursor»: se quitan efectos que se quedan pegados al tocar */
  .mz-celda:hover, .catalogo-item:hover, .acc-entrar:hover:not(:disabled), .btn-ia:hover:not(:disabled), .btn-oro:hover:not(:disabled), #ia-fab:hover { transform: none; }
  button, .btn, .tab, .nav-item, .chip, .mz-celda, .seg, .nodo { -webkit-tap-highlight-color: transparent; }
  button, .btn, .tab, .nav-item, .seg-nivel, .comp-chip { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .tactil .mz-celda:active, .tactil .btn:active, .tactil .tipo-doc:active, .tactil .catalogo-item:active { filter: brightness(.94); }
}