/* nav-simple.css -- el menu simple («cinco puertas y Explorar», plan PLAN-xarpen-simple-2026-10, T2). Solo tokens de Cuarto Oscuro. Todo cuelga de body.nav-simple (la pone pintarNav) o de .ex-*:
   apagado, ninguna regla de aqui toca una pixel. */
body.nav-simple #tabs .cp-navbtn{ padding-block:var(--e-2); padding-inline:var(--e-3); font-size:var(--t-texto); font-weight:500; }
body.nav-simple #tabs .cp-navbtn[data-explorar]{ border:1px dashed var(--punto); background:transparent; }
body.nav-simple #tabs .cp-navbtn[data-explorar].on{ border-style:solid; background:var(--piedra-on); }
/* Plan inicio-carta T2 (D7): con body.nav-iconos el icono que navSimpleBotonesHTML ya pintaba (y styles.css / cuarto-oscuro.css escondian) se ve junto a su palabra. El id #tabs le
   gana a `body.nav-lat-on.menu-arriba .cp-navbtn .cp-navico{display:none}` sin tocar esa regla. El matiz de cada puerta vive en widgets-inicio.css (--area-* solo vive alla). */
/* Si no caben todas las puertas, los iconos ceden antes que una puerta (body.nav-iconos-cede, lo pone ajustarSeccionesNav en app.js). */
:root[data-theme] body.nav-simple.nav-iconos:not(.nav-iconos-cede) #tabs .cp-navbtn .cp-navico{ display:inline-flex; flex:none; }
:root[data-theme] body.nav-simple.nav-iconos:not(.nav-iconos-cede) #tabs .cp-navbtn{ padding-inline-start:var(--e-2); }
body.nav-simple #nav-crear-btn{ background:var(--boton); color:var(--boton-t); padding-block:var(--e-2); padding-inline:var(--e-3); font-size:var(--t-texto); }
.ex-barra{ margin:var(--e-4) 0; }
.ex-q{ width:100%; max-width:560px; min-height:44px; padding:0 var(--e-4); border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); border:0; font:inherit; font-size:var(--t-campo); }
.ex-grupo{ margin:var(--e-5) 0; }
.ex-gt{ font-size:var(--t-meta); color:var(--medio); margin-bottom:var(--e-3); }
.ex-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:var(--e-3); }
.ex-tile{ position:relative; background:var(--piedra); border-radius:var(--r-flota); }
.ex-a{ display:block; width:100%; padding:var(--e-4); text-align:left; color:var(--tinta); text-decoration:none; background:transparent; border:0; border-radius:var(--r-flota); font:inherit; cursor:pointer; }
.ex-a b{ display:block; font-size:var(--t-texto); font-weight:500; padding-right:var(--e-6); }
.ex-a small{ display:block; margin-top:var(--e-1); font-size:var(--t-meta); color:var(--medio); }
@media (hover:hover){ .ex-a:hover{ background:var(--tinte-toque); } }
.ex-bloq .ex-a{ opacity:.6; }
.ex-pin{ position:absolute; top:var(--e-3); right:var(--e-3); width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--apagado); cursor:pointer; opacity:0; }
.ex-tile:hover .ex-pin, .ex-pin:focus-visible, .ex-pin.on{ opacity:1; }
.ex-pin.on{ color:var(--tinta); }
@media (hover:none){ .ex-pin{ opacity:1; } }

/* ==================== T9 del plan del Inicio (D6 A; tableros 4c y 4e): el telefono con las puertas abajo ====================
   Solo con body.tel-puertas (bandera NAV_TEL_PUERTAS_ESTUDIOS). Abajo: «Escribele a Xarpie…» y de 2 a 5 puertas (giro, plan y rol), cada icono al color de su
   seccion (--area-*). Arriba: + y ≡ junto a buscar y la campana (decision de Daniel del 5 nov), el logo en el Inicio y «‹ Inicio» dentro de una seccion.
   DOS marcas en <body> desde el 12 nov (las pone pintarNav): `tel-hoja` = hay hoja abajo (las cuentas con las puertas Y la cuenta de la plataforma, que lleva
   la misma hoja con sus secciones); `tel-puertas` = ademas lo de ARRIBA del menu A (+, ≡, el logo y «‹ Inicio»), que la plataforma no lleva. Todo lo de la hoja
   cuelga de `tel-hoja`; solo las cuatro reglas de la barra de arriba, de `tel-puertas`. */
.tel-a-inicio, .tel-crear-arriba, .tel-menu-arriba{ display:none; }
/* Las puertas de debajo de la caja de Xarpie: solo telefono con las puertas (la regla que las ensena, dentro del @media). En escritorio el nodo existe y no se ve. */
.xa-puertas{ display:none; }
@media (max-width:860px){
  body.tel-hoja .main{ padding-bottom:calc(140px + env(safe-area-inset-bottom)); }
  :root[data-theme] body.tel-hoja .barra-inf, :root[data-theme] body.tel-hoja .barra-inf:not([hidden]){
    left:0; right:0; bottom:0; height:auto; display:flex; flex-direction:column; align-items:stretch; gap:var(--e-2);
    padding:var(--e-2) var(--e-3) calc(var(--e-1) + env(safe-area-inset-bottom)); border-radius:var(--r-flota) var(--r-flota) 0 0;
  }
  :root[data-theme] body.tel-hoja .barra-inf[hidden]{ display:none; }
  body.tel-hoja .bi-xa-linea{ display:flex; align-items:center; gap:var(--e-2); min-height:44px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--piedra); color:var(--medio); font:inherit; font-size:var(--t-texto); text-align:left; cursor:pointer; }
  body.tel-hoja .bi-xa-linea .bi-xa-iso{ display:inline-flex; color:var(--tinta); }
  body.tel-hoja .bi-puertas{ display:grid; grid-template-columns:repeat(var(--bi-n, 5), minmax(0, 1fr)); }
  body.tel-hoja .bi-puerta{ min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:var(--e-1) 0; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); font:inherit; font-size:var(--t-eti); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  body.tel-hoja .bi-puerta-ico{ display:inline-flex; }
  body.tel-hoja .bi-puerta-t{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.tel-hoja .bi-puerta.on{ color:var(--tinta); font-weight:500; background:var(--piedra); }
  body.tel-hoja .bi-puerta:focus-visible, body.tel-hoja .bi-xa-linea:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
  body.tel-puertas #tel-crear-arriba:not([hidden]), body.tel-puertas #tel-menu-arriba{ display:inline-flex; }
  body.tel-puertas:not(.tel-en-seccion) #cp-riel .cp-riel-logo{ display:inline-flex !important; align-items:center; }
  body.tel-puertas.tel-en-seccion .tel-a-inicio{ display:inline-flex; align-items:center; gap:var(--e-1); min-height:44px; padding:0 var(--e-2); border:0; background:none; color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; }
  body.tel-puertas .tel-a-inicio .ico{ transform:rotate(90deg); }

  /* ---- La misma hoja en TODAS las pantallas del telefono (Daniel, 12 nov) ----
     En la pagina de Xarpie el chat tapaba las puertas: ahora la caja de escribir de verdad es la primera fila de la misma hoja y debajo van las mismas puertas
     (#xa-puertas, dentro del chat; las pinta pintarBarraInfPuertas). Mismas medidas que #barra-inf, medidas a 390 px: 8 de aire, la fila de 44, 8, las puertas de 48
     y 4 mas el area segura = 112. La caja ya no es una pildora suelta: es la fila «Escribe a Xarpie…» de la hoja, con el campo vivo.
     --tel-hoja: el alto de la hoja. Todo lo que flota pegado al borde de abajo (avisos, la barra de acciones de un contrato) se apoya en el, no en un numero propio:
     esos numeros se escribieron para la pildora de 56 px de antes, y con la hoja de 112 quedaban debajo de ella o encima de las puertas. */
  body.tel-hoja{ --tel-hoja:calc(112px + env(safe-area-inset-bottom, 0px)); }
  body.tel-hoja #app .chatpane{ padding-bottom:0; }
  /* :not(.vozc-on): conversar por voz cambia la caja por su franja de luz (cuarto-oscuro.css) y ahi no hay hoja ni puertas. Dos ids: le gana a la regla de «una sola
     caja de escribir» de chat-limpio sin depender del orden de los archivos. */
  body.tel-hoja #app #chat-composer:not(.vozc-on){
    position:relative; z-index:40; min-height:44px; margin:var(--e-2) calc(var(--e-3) - var(--e-4)) 0; padding:0 var(--e-1) 0 0;
    border-radius:var(--r-pildora); background:none; box-shadow:none;
  }
  /* El papel de la hoja, detras de la caja: de borde a borde (el chat trae 16 px de margen), 8 arriba y 8 abajo para pegar con las puertas. z -1 dentro del contexto
     de la caja: queda encima del fondo del chat y debajo de sus botones. Crece solo cuando el texto ocupa mas renglones. El z 40 de la caja es el de su menu de
     comandos «/» (.cmd-menu): al volverse contexto de apilado, el menu ya no compite solo, y con menos de 40 quedaria debajo de lo que antes tapaba. */
  body.tel-hoja #app #chat-composer:not(.vozc-on)::before{
    content:""; position:absolute; z-index:-1; top:calc(-1 * var(--e-2)); bottom:calc(-1 * var(--e-2)); left:calc(-1 * var(--e-3)); right:calc(-1 * var(--e-3));
    border-radius:var(--r-flota) var(--r-flota) 0 0; background:var(--guijarro, var(--deep)); box-shadow:inset 0 1px 0 0 color-mix(in srgb, var(--tinta) 7%, transparent);
  }
  body.tel-hoja .xa-puertas:not([hidden]){
    display:block; flex:none; position:relative; margin:var(--e-2) calc(-1 * var(--e-4)) 0; padding:0 var(--e-3) calc(var(--e-1) + env(safe-area-inset-bottom, 0px));
    background:var(--guijarro, var(--deep));
  }
  body.tel-hoja #chat-composer.vozc-on ~ .xa-puertas{ display:none; }
  /* Los botones de la caja (+, conversar y enviar) median 34 px: menos que los 44 de un dedo. Se ven de 40 y se tocan en 44 (::before, 2 px de cada lado, invisible).
     ::before y no ::after: #chat-send usa ::after para el cuadrito de «detener». A 40 px no se enciman las areas: entre conversar y enviar quedan 6 px. */
  body.tel-hoja #app #chat-composer:not(.vozc-on) :is(#chat-plus, #chat-conversar, #chat-send){ position:relative; width:40px; height:40px; }
  body.tel-hoja #app #chat-composer:not(.vozc-on) :is(#chat-plus, #chat-conversar, #chat-send)::before{ content:""; position:absolute; inset:-2px; }
  /* El menu de comandos «/» se abre hacia arriba desde la caja: con la hoja, sus 8 px de aire quedaban justo en el borde de ella. */
  body.tel-hoja #app #chat-composer:not(.vozc-on) .cmd-menu{ margin-bottom:var(--e-4); }

  /* ---- Conversaciones (la lista de chats) tambien lleva la hoja ----
     La pagina de Conversaciones es una capa a pantalla completa (z71) que tapaba #barra-inf (z58). En vez de subir la barra por encima de ella, la pagina ACABA
     donde empieza la hoja: lo que se ve en esa franja es la #barra-inf de siempre, en su sitio y con su z (el chat, que tambien la taparia, esta corrido a la
     derecha mientras se ven las conversaciones). Asi no hay una segunda barra ni capas que reordenar, y al entrar y salir la hoja no se mueve.
     :not(.wa-en-hilo): dentro del hilo de una conversacion de WhatsApp la capa sigue a pantalla completa. Ahi se le escribe a un cliente con SU caja; con
     «Escribe a Xarpie…» pegada debajo habria dos cajas juntas y no se sabria a quien le estas escribiendo. */
  body.tel-hoja #app #tel-convs:not(.wa-en-hilo){ bottom:var(--tel-hoja); height:auto; padding-bottom:var(--e-3); }
  /* Su aviso se apoyaba en 96 px para quedar arriba de la tarjeta de la cuenta (56 de alto): ahora debajo de la tarjeta esta la hoja, asi que sube las dos. */
  body.tel-hoja:has(#app.tel-en-convs) #toast{ bottom:calc(var(--tel-hoja) + 76px); }

  /* ---- Lo que flota abajo se apoya en la hoja ---- */
  /* Los avisos («Guardado», Deshacer) caian ENCIMA de las puertas (medido: 776 a 820 px en una pantalla de 844, con la hoja de 732 a 844). */
  :root[data-theme] body.tel-hoja #toast, body.tel-hoja .co-avisos, :root[data-theme] body.tel-hoja .xa-aviso{ bottom:calc(var(--tel-hoja) + var(--e-3)); }
  body.tel-hoja .gsub-chip{ bottom:calc(var(--tel-hoja) + var(--e-3)); }
  /* Contrato y recibo: «PDF · Enviar a firma» quedaba a medias debajo de la hoja (704 a 760 px contra 732). El editor reserva el alto de las dos. */
  :root[data-theme] body.tel-hoja .ced-top .ced-spread{ bottom:calc(var(--tel-hoja) + var(--e-2)); }
  :root[data-theme] body.tel-hoja .ced .ced-editor, :root[data-theme] body.tel-hoja .ced .ced-preview{ padding-bottom:calc(var(--tel-hoja) + 88px); }
}