/* ============================================================
 * GENNARRATIVA — EL CELULAR (movil.css) · Doc 33 v0.1
 * ============================================================
 * Capa estática: va en el <head> después de capas.css (lección FOUC:
 * el CSS en archivo, no inyectado). Todo vive dentro de
 * @media (max-width: 768px): en escritorio no cambia nada.
 *
 * Lo que depende de movil.js (la barra fina, el velo, el pie del menú
 * y la cabecera solo en el Inicio) se apoya en body.gncel-activo, que
 * pone movil.js. Sin él, la página igual cabe en la pantalla.
 *
 * Muchas reglas llevan !important porque las secciones se pintan con
 * estilos en línea y con reglas !important de styles_v3.css: en el
 * celular, esta capa tiene la última palabra.
 * ============================================================ */

/* Fuera del celular, las piezas de la capa no se ven. */
#gncel-barra, #gncel-velo, #gncel-pie, #gncel-cerrar { display: none; }

@media (max-width: 768px) {
  :root {
    --gncel-barra: 52px;
    --gncel-borde: 12px;
    --gncel-arriba: env(safe-area-inset-top, 0px);
    --gncel-abajo: env(safe-area-inset-bottom, 0px);
    --gncel-fondo: var(--bg-deep, #0b0f17);
    --gncel-texto: var(--text-main, #e8edf5);
    --gncel-suave: var(--text-muted, #8b95a7);
    --gncel-acento: var(--accent-teal, #5AC0CD);
  }

  /* ---------------------------------------------- 1 · La página cabe */
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-layout { width: 100% !important; max-width: 100% !important; }
  body .app-layout main.main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px var(--gncel-borde) calc(96px + var(--gncel-abajo)) !important;
  }
  body.gncel-activo .app-layout main.main-content {
    padding-top: calc(var(--gncel-barra) + var(--gncel-arriba) + 12px) !important;
  }

  /* ---------------------------------------------- 2 · La barra fina */
  body.gncel-activo #gncel-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    box-sizing: border-box;
    height: calc(var(--gncel-barra) + var(--gncel-arriba));
    padding: var(--gncel-arriba) 6px 0 4px;
    background: var(--gncel-fondo);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  body.gncel-activo .gncel-boton {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--gncel-texto);
    cursor: pointer;
  }
  body.gncel-activo .gncel-boton .material-symbols-outlined { font-size: 26px; }
  body.gncel-activo .gncel-boton:focus-visible,
  body.gncel-activo #gncel-pie button:focus-visible,
  body.gncel-activo #main-sidebar .nav-btn:focus-visible {
    outline: 2px solid var(--gncel-acento);
    outline-offset: 2px;
  }
  body.gncel-activo .gncel-titulos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
  }
  body.gncel-activo #gncel-grupo {
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--gncel-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.gncel-activo #gncel-grupo:empty { display: none; }
  body.gncel-activo #gncel-seccion {
    font: 700 16px/1.25 Inter, system-ui, sans-serif;
    color: var(--gncel-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.gncel-activo #gncel-acciones { flex: none; display: flex; align-items: center; }
  body.gncel-activo #gncel-acciones #gnp-guardar {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 12px;
  }
  body.gncel-activo #mobile-menu-toggle,
  body.gncel-activo .mobile-menu-toggle { display: none !important; }

  /* ---------------------------------------------- 3 · El menú (☰) */
  body.gncel-activo #main-sidebar {
    width: min(300px, 86vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
    padding: calc(6px + var(--gncel-arriba)) 0 calc(20px + var(--gncel-abajo)) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  body.gncel-activo #gncel-cerrar { display: grid; align-self: flex-end; margin: 0 8px 2px 0; }
  body.gncel-activo #main-sidebar .sidebar-logo { display: none !important; }
  body.gncel-activo #main-sidebar .sidebar-nav {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    overflow: visible !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  body.gncel-activo #main-sidebar .gnx-group {
    width: 100% !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  body.gncel-activo #main-sidebar .gnx-group-label {
    font: 700 11px/1.2 Inter, system-ui, sans-serif !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--gncel-suave) !important;
    text-align: left !important;
    padding: 6px 14px 4px !important;
    margin: 0 !important;
  }
  body.gncel-activo #main-sidebar .nav-btn:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; }
  body.gncel-activo #main-sidebar .nav-btn {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--gncel-texto) !important;
  }
  body.gncel-activo #main-sidebar .nav-btn.active {
    background: rgba(90, 192, 205, 0.14) !important;
    color: var(--gncel-acento) !important;
  }
  body.gncel-activo #main-sidebar .nav-btn.active .material-symbols-outlined,
  body.gncel-activo #main-sidebar .nav-btn.active .nav-label { color: var(--gncel-acento) !important; }
  body.gncel-activo #main-sidebar .nav-btn .material-symbols-outlined {
    font-size: 22px !important;
    width: 24px !important;
    flex: none !important;
    margin: 0 !important;
  }
  body.gncel-activo #main-sidebar .nav-btn .nav-label {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    font: 600 15px/1.2 Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  body.gncel-activo #main-sidebar .nav-btn .tooltip { display: none !important; }
  body.gncel-activo #main-sidebar .nav-btn:hover,
  body.gncel-activo #main-sidebar .nav-btn:active { transform: none !important; }
  body.gncel-activo #main-sidebar .sidebar-bottom {
    width: 100% !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 8px 10px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.gncel-activo #gncel-pie { display: block; padding: 14px 24px 0; }
  body.gncel-activo .gncel-pie-rotulo {
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gncel-suave);
    margin: 0 0 8px;
  }
  body.gncel-activo .gncel-idiomas { display: flex; gap: 8px; }
  body.gncel-activo .gncel-idioma {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: var(--gncel-texto);
    font: 700 14px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
  }
  body.gncel-activo .gncel-idioma.on { background: var(--gncel-acento); border-color: transparent; color: #061016; }
  body.gncel-activo .gncel-ayuda {
    margin-top: 14px;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(90, 192, 205, 0.35);
    background: rgba(90, 192, 205, 0.08);
    color: var(--gncel-acento);
    font: 600 15px/1.2 Inter, system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  body.gncel-activo #gncel-velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 14990;
    background: rgba(3, 6, 12, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.gncel-activo.gncel-menu-abierto #gncel-velo { opacity: 1; pointer-events: auto; }
  body.gncel-activo.gncel-menu-abierto { overflow: hidden !important; }
  body.gncel-menu-abierto #gnm-aviso,
  body.gncel-menu-abierto #gnw-launcher,
  body.gncel-menu-abierto #gnw-panel,
  body.gncel-menu-abierto #swarm-terminal,
  body.gncel-menu-abierto #gnb-tip { visibility: hidden !important; }

  /* -------------------------------- 4 · La cabecera, solo en el Inicio */
  header.app-header {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 0 12px !important;
    margin: 0 0 12px !important;
  }
  body.gncel-activo:not([data-gncel-seccion="dashboard"]) header.app-header { display: none !important; }
  header.app-header .header-main-row { flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; }
  header.app-header .header-controls {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  header.app-header .header-controls > * { max-width: 100% !important; flex-shrink: 1 !important; }
  header.app-header .header-controls .glass-card { padding: 8px 12px !important; min-height: 40px; box-sizing: border-box; }
  header.app-header #project-name-display { white-space: normal !important; }
  header.app-header #btn-new-project { min-height: 40px; padding: 8px 14px !important; }
  /* La barra de nivel: si los dos rótulos no caben (francés, 360 px), el segundo baja entero (Doc 33 §9) */
  header.app-header .xp-bar-label { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
  header.app-header .xp-bar-label > span { white-space: nowrap; }

  /* ------------------------------ 5 · La barra de escrituras (documental) */
  #gndoc-barra-escrituras {
    position: static !important;
    top: auto !important;
    margin: 0 0 12px !important;
    padding: 6px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }
  #gndoc-barra-escrituras > div:first-child { display: none !important; }
  #gndoc-barra-escrituras > div:last-child { width: 100% !important; gap: 6px !important; }
  #gndoc-barra-escrituras > div:last-child > span { display: none !important; }
  #gndoc-barra-escrituras .gndoc-escritura-step {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 6px 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
  #gndoc-barra-escrituras .gndoc-escritura-step .material-symbols-outlined { display: none !important; }

  /* ---------------------------------------------- 6 · Lo flotante */
  .toast-container {
    top: calc(var(--gncel-barra) + var(--gncel-arriba) + 8px) !important;
    bottom: auto !important;
    left: var(--gncel-borde) !important;
    right: var(--gncel-borde) !important;
    width: auto !important;
    max-width: none !important;
    align-items: stretch !important;
  }
  .toast-container > * { width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  #gnm-aviso {
    left: var(--gncel-borde) !important;
    right: var(--gncel-borde) !important;
    width: auto !important;
    bottom: calc(76px + var(--gncel-abajo)) !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  #gnw-launcher {
    right: 16px !important;
    bottom: calc(16px + var(--gncel-abajo)) !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
    font-size: 0 !important;
  }
  #gnw-launcher > span:not(.gnw-dot) { display: none !important; }
  #gnw-launcher::before {
    content: "support_agent";
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    line-height: 1;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
  }
  #gnw-launcher .gnw-dot { position: absolute !important; top: 7px; right: 7px; }
  #gnw-panel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(72px + var(--gncel-abajo)) !important;
    max-height: calc(100vh - 140px) !important;
  }
  #swarm-terminal {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(8px + var(--gncel-abajo)) !important;
    height: 70vh !important;
    max-height: 70vh !important;
  }
  #swarm-terminal.collapsed {
    left: 16px !important;
    right: auto !important;
    bottom: calc(16px + var(--gncel-abajo)) !important;
    width: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
  }
  #swarm-terminal.collapsed .swarm-header { height: 48px !important; padding: 0 !important; justify-content: center !important; box-sizing: border-box !important; }
  #swarm-terminal.collapsed .swarm-header h6 { font-size: 0 !important; gap: 0 !important; letter-spacing: 0 !important; }
  #swarm-terminal.collapsed .swarm-header h6 .material-symbols-outlined { font-size: 22px !important; }
  #swarm-terminal.collapsed .swarm-header > div:last-child,
  #swarm-terminal.collapsed > :not(.swarm-header) { display: none !important; }
  #swarm-terminal.collapsed .swarm-header { border: 0 !important; background: transparent !important; }
  body.gncel-escribiendo #gnw-launcher,
  body.gncel-escribiendo #swarm-terminal.collapsed { opacity: 0 !important; pointer-events: none !important; }
  .modal-overlay .modal,
  #modal-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 18px 16px !important;
  }

  /* ------------------------------------------ 7 · Reglas del contenido */
  /* C3 · paneles a lo ancho: la sección no suma relleno al de main */
  .section-view.workspace { padding: 0 !important; }
  .section-view .panel-body { padding: 14px !important; }
  .section-view .panel-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px !important;
    height: auto !important;
  }
  /* C4 · cabeceras de panel: el título no se parte palabra por palabra */
  .section-view .panel-header > h1,
  .section-view .panel-header > h2,
  .section-view .panel-header > h3,
  .section-view .panel-header > div:first-child:not(:only-child) {
    flex: 1 1 200px !important;
    min-width: 0 !important;
  }
  .section-view .panel-header h1,
  .section-view .panel-header h2,
  .section-view .panel-header h3 { font-size: 17px !important; line-height: 1.3 !important; }
  .section-view .panel-header > div:not(:first-child) { flex-wrap: wrap !important; max-width: 100% !important; gap: 8px !important; }
  /* C6 · campos a 16 px: el iPhone no acerca la página al escribir */
  .section-view input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  .section-view select,
  .section-view textarea:not(#script-textarea),
  .modal-overlay input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .modal-overlay select,
  .modal-overlay textarea,
  .section-view [contenteditable="true"],
  .gv2-ed { font-size: 16px !important; }
  /* C7 · toques */
  .section-view .btn,
  .modal-overlay .btn { min-height: 40px; }
  .section-view .btn-icon { min-width: 40px; min-height: 40px; }
  .section-view .gn-pill-btn { min-height: 32px; }
  /* C9 · imágenes y lienzos al ancho de su caja */
  .section-view img, .section-view canvas, .section-view video, .section-view svg { max-width: 100%; }
  /* C10 · tablas: se desplazan dentro de su caja */
  .section-view table { display: block; max-width: 100%; overflow-x: auto; }

  /* C5 · las grillas en línea de dos o más columnas pasan a una */
  .section-view [style*="grid-template-columns: 1fr 1fr"],
  .section-view [style*="grid-template-columns:1fr 1fr"],
  .section-view [style*="grid-template-columns: 1fr 1.5fr"],
  .section-view [style*="grid-template-columns:1fr 1.2fr 1fr"],
  .section-view [style*="grid-template-columns: repeat(3, 1fr)"],
  .section-view [style*="grid-template-columns:repeat(3, 1fr)"],
  .section-view [style*="grid-template-columns: 280px 1fr"],
  .section-view [style*="grid-template-columns:300px 1fr"],
  .section-view [style*="grid-template-columns: 1fr 340px"],
  .section-view .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  /* …y lo que ocupaba dos columnas ocupa la única que queda (si no, se abre una columna de más) */
  .section-view [style*="grid-column: span 2"],
  .section-view [style*="grid-column:span 2"] { grid-column: auto !important; }

  /* Las filas en línea bajan de línea cuando no caben, en vez de salirse o cortarse */
  .section-view [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]),
  .section-view [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  .section-view [style*="min-width:300px"],
  .section-view [style*="min-width: 300px"] { min-width: 0 !important; }
  .section-view .btn { max-width: 100%; white-space: normal; }

  /* ------------------------------------------ 8 · Sección por sección */
  /* Guion: la botonera baja de línea, el editor a lo ancho y el asistente debajo */
  #section-script .ai-agent-bar { flex-wrap: wrap !important; gap: 8px !important; }
  #section-script .ai-agent-bar .btn-ai-action {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    margin: 0 !important;
    padding: 8px 12px !important;
    justify-content: center;
    font-size: 12px !important;
  }
  #section-script .ai-agent-bar .btn-ai-action:first-child { flex-basis: 100%; }
  #section-script .ai-agent-bar > div[style*="flex-grow:1"] { display: none !important; }
  #section-script .style-select-container { flex: 1 1 100%; margin: 0 !important; }
  #section-script .style-select-container select { flex: 1; min-height: 40px; }
  #section-script #ai-status-indicator { flex: 1 1 100%; }
  #section-script .script-toolbar { flex-wrap: wrap !important; }
  #section-script .script-toolbar > button { min-height: 36px; }
  #script-textarea {
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    min-height: 60vh !important;
  }
  #section-script .editor-footer { padding: 10px 16px !important; flex-wrap: wrap; gap: 6px; }
  #section-script .ai-ghostwriter-panel { padding: 16px !important; }

  /* Análisis: las filas del CLI-3D bajan de línea en pantallas angostas */
  .section-view .sxt-fila { flex-wrap: wrap !important; }
  .section-view .sxt-fila-valor { white-space: normal !important; max-width: 100%; }

  /* Fuerzas: el resplandor decorativo no se sale de la tarjeta */
  #actantial-grid .act-node-glow { display: none !important; }

  /* C7 · toques que quedaban chicos */
  header.app-header #gni-control button { min-width: 38px; min-height: 34px; font-size: 12px !important; border-radius: 8px; }
  header.app-header .gnd-link,
  .section-view .gnd-link { min-height: 36px; }
  .section-view .lego-close-btn { min-width: 36px; min-height: 36px; }
  .section-view #sxt-cli3d-re { min-height: 36px; padding: 6px 12px; }
  .section-view .gv2-blk { min-height: 34px; }
  .section-view .gnmu-tab, .section-view .gnmu-btn { min-height: 40px; }
  .section-view summary { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Los puntos de intensidad: se ven de 14 px, se tocan en 32 */
  .section-view .intensity-meter { gap: 2px !important; }
  .section-view .intensity-dot {
    width: 14px !important;
    height: 14px !important;
    border: 9px solid transparent !important;
    background-clip: content-box !important;
    box-sizing: content-box !important;
    box-shadow: none !important;
  }
  .section-view .intensity-dot:hover { transform: none !important; }
  .section-view .lec-boton { min-height: 36px; padding: 6px 12px; }
  #gnm-aviso #gnm-x { width: 40px !important; height: 40px !important; top: 2px !important; right: 2px !important; font-size: 20px !important; }

  /* C8 · ningún texto por debajo de 11 px (había de 8, 9 y 10) */
  .section-view [style*="font-size:8px"], .section-view [style*="font-size: 8px"],
  .section-view [style*="font-size:8.5px"], .section-view [style*="font-size: 8.5px"],
  .section-view [style*="font-size:9px"], .section-view [style*="font-size: 9px"],
  .section-view [style*="font-size:9.5px"], .section-view [style*="font-size: 9.5px"],
  .section-view [style*="font-size:10px"], .section-view [style*="font-size: 10px"],
  .section-view [style*="font-size:10.5px"], .section-view [style*="font-size: 10.5px"],
  .section-view .gndoc-badge-mat, .section-view .gndoc-che-consejo, .section-view .gndoc-rub-regla,
  .section-view .sxt-badge, .section-view .sxt-chip, .section-view .lec-chip, .section-view .gnl-chipc,
  .section-view #gv2-act-tip, .section-view #gv2-syn-tip, .section-view .gv2-ess-tip,
  #section-dashboard #gv2-thlab, #section-dashboard .gv2-eye, #section-dashboard span.l { font-size: 11px !important; }
  header.app-header p[style*="font-size:10px"] { font-size: 11px !important; }
  .section-view svg text[font-size="10"] { font-size: 11px; }
}

@media (max-width: 380px) {
  :root { --gncel-borde: 10px; }
}