/* ═══════════════════════════════════════════════════════════
   estilos.css — el sistema de diseño del panel.
   Sello: estilos-9

   Teléfono Android primero (PROTOCOLO-INTERFAZ §0.1). Los respiros de
   sistema son VARIABLES, nunca números a mano: --piso y --techo. Sin eso,
   la barra de gestos de Android tapa el último renglón de cada lista y se
   arregla pantalla por pantalla, mal.
   ═══════════════════════════════════════════════════════════ */

:root {
  --tinta:#14161a; --tinta2:#1b1e24; --tinta3:#232830;
  --linea:#2e343e; --texto:#e8e6e1; --gris:#a8a49c; --gris2:#6f6b64;
  --acento:#d8a657; --ok:#8fbf7f; --mal:#e08b8b; --ojo:#d9b44a;
  --r:10px; --r-s:6px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --techo: env(safe-area-inset-top, 0px);
  --piso: calc(env(safe-area-inset-bottom, 0px) + 62px);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--tinta); color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.5; overscroll-behavior-y:contain; }
body { padding-top:var(--techo); padding-bottom:var(--piso); }
.hide { display:none !important; }

.contenedor { max-width:760px; margin:0 auto; padding:0 14px; }

h1 { font-size:1.15rem; margin:.9rem 0 .2rem; letter-spacing:-.01em; }
h2 { font-size:.98rem; margin:1.4rem 0 .5rem; }
.gris { color:var(--gris); font-size:.86rem; margin:.2rem 0 .8rem; }
.mono { font-family:var(--mono); }
a { color:var(--acento); }

/* ── barra de arriba ── */
#barra { position:sticky; top:0; z-index:20; background:var(--tinta);
  border-bottom:1px solid var(--linea); padding:.55rem 14px;
  display:flex; align-items:center; gap:.6rem; }
#barra .marca { font-weight:600; font-size:.95rem; flex:1; }
#barra .marca small { display:block; font-family:var(--mono); font-size:.56rem;
  color:var(--gris2); font-weight:400; letter-spacing:.06em; }

/* ── barra de abajo: la navegación va abajo, al alcance del pulgar ── */
#nav { position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--tinta2); border-top:1px solid var(--linea);
  display:flex; padding-bottom:env(safe-area-inset-bottom,0px); }
#nav button { flex:1; min-height:44px; background:none; border:0; color:var(--gris);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.7rem .3rem; cursor:pointer; }
#nav button[aria-pressed="true"] { color:var(--acento); background:var(--tinta3); }

/* ── botones ── */
.btn { min-height:44px; padding:.7rem 1rem; border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--tinta3); color:var(--texto);
  font-size:.9rem; cursor:pointer; }
.btn.p { background:var(--acento); border-color:var(--acento); color:var(--tinta); font-weight:600; }
.btn:disabled { opacity:.45; }
.fila-btn { display:flex; gap:.5rem; margin:.7rem 0; }
.fila-btn .btn { flex:1; }

/* ── campos ── */
label { display:block; font-size:.78rem; color:var(--gris); margin:.7rem 0 .2rem; }
input, textarea, select { width:100%; min-height:44px; padding:.6rem .7rem;
  background:var(--tinta3); border:1px solid var(--linea); border-radius:var(--r-s);
  color:var(--texto); font-size:1rem; font-family:inherit; }
textarea { min-height:7rem; font-family:var(--mono); font-size:.78rem;
  line-height:1.45; white-space:pre; overflow-x:auto; }

/* ── tarjetas ── */
.tarj { background:var(--tinta2); border:1px solid var(--linea);
  border-radius:var(--r); padding:.9rem; margin:.7rem 0; }

/* ── LA FILA DE PREGUNTAS ──
   Una pregunta a la vez, y el texto de la pregunta es lo más grande de la
   pantalla. Todo lo demás es contexto: de qué proyecto es, de qué pendiente
   sale y por qué existe. */
.cola { padding:1rem; }
.cola-cab { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-bottom:.6rem; }
.cola-n { margin-left:auto; font-family:var(--mono); font-size:.7rem; }
.cola-de { margin:0; font-weight:600; font-size:.95rem; }
.cola-pq { margin:.3rem 0 0; font-size:.78rem; }
.cola-q { margin:.8rem 0 .2rem; font-size:1.05rem; line-height:1.45; }
.cola textarea { min-height:8rem; font-family:inherit; font-size:1rem;
  white-space:pre-wrap; }
.cola-pie { margin:.2rem 0 0; font-size:.76rem; }

/* ── «Lo primero»: qué depende de Mauro ──
   Una fila por cosa, el texto a la izquierda y el botón que lleva allá a la
   derecha, donde cae el pulgar. La roja es la de las reglas: es la única de
   las tres que deja algo abierto mientras espera. */
.tt-fila { display:flex; align-items:center; gap:.6rem; padding:.55rem 0;
  border-top:1px solid var(--linea); }
.tt-fila:first-of-type { border-top:0; padding-top:0; }
.tt-que { flex:1; min-width:0; }
.tt-que b { display:block; font-size:.9rem; }
.tt-que span { display:block; color:var(--gris); font-size:.76rem; margin-top:.1rem; }
.tt-fila .btn { flex:0 0 auto; min-height:38px; padding:.45rem .9rem; font-size:.8rem; }
.tt-mal .tt-que b { color:var(--mal); }

/* ── el cuadro de números ── */
.cuadro { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  gap:.4rem; margin:.7rem 0; }
.cuadro div { background:var(--tinta3); border-radius:var(--r-s); padding:.55rem .5rem; }
.cuadro b { display:block; font-family:var(--mono); font-size:1.05rem; line-height:1.1; }
.cuadro span { display:block; font-size:.66rem; color:var(--gris); margin-top:.15rem; line-height:1.25; }
.cuadro div.tuyo b { color:var(--ojo); }
.cuadro div.mio b { color:var(--acento); }
.cuadro div.hecho b { color:var(--ok); }

/* ── filtros ── */
.seg { display:flex; border:1px solid var(--linea); border-radius:999px;
  overflow:hidden; margin:.6rem 0; }
.seg button { flex:1; min-height:40px; background:none; border:0; color:var(--gris);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.5rem .3rem; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--acento); color:var(--tinta); font-weight:600; }

/* ── un pendiente ── */
.proy { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris2); margin:1.3rem 0 .4rem;
  border-bottom:1px solid var(--linea); padding-bottom:.3rem; }
.pend { background:var(--tinta2); border:1px solid var(--linea);
  border-left:3px solid var(--linea); border-radius:var(--r-s);
  padding:.7rem .8rem; margin:.45rem 0; }
.pend.tuyo { border-left-color:var(--ojo); }
.pend.mio { border-left-color:var(--acento); }
.pend.hecho { border-left-color:var(--ok); opacity:.6; }
.pend.retirado { border-left-color:var(--gris2); opacity:.5; }
.pend .cab { display:flex; align-items:baseline; gap:.5rem; }
.pend .clave { font-family:var(--mono); font-size:.68rem; color:var(--gris2); flex:none; }
.pend .tit { font-weight:600; font-size:.94rem; flex:1; }
.pend .quien { font-family:var(--mono); font-size:.54rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:999px; flex:none;
  border:1px solid var(--linea); color:var(--gris); }
.pend.tuyo .quien { color:var(--ojo); border-color:var(--ojo); }
.pend.mio .quien { color:var(--acento); border-color:var(--acento); }
.pend .porque { font-size:.85rem; color:var(--gris); margin-top:.35rem; }
.pend .hist { font-size:.76rem; color:var(--gris2); margin-top:.4rem;
  border-top:1px dashed var(--linea); padding-top:.35rem; }
.pend .hist div { margin-top:.2rem; }
.pend .hist i { font-family:var(--mono); font-style:normal; color:var(--gris2); }

/* ── el aviso breve ── */
#aviso { position:fixed; left:50%; transform:translateX(-50%) translateY(200%);
  bottom:calc(var(--piso) + 10px); z-index:50; max-width:min(92vw,520px);
  background:var(--tinta3); border:1px solid var(--linea); color:var(--texto);
  padding:.7rem .9rem; border-radius:var(--r-s); font-size:.88rem;
  transition:transform .2s ease; box-shadow:0 6px 24px rgba(0,0,0,.4); }
#aviso.on { transform:translateX(-50%) translateY(0); }
#aviso.malo { border-color:var(--mal); color:var(--mal); }

/* ── preguntar ── */
.capa { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6);
  display:grid; place-items:center; padding:16px; }
.capa .caja { background:var(--tinta2); border:1px solid var(--linea);
  border-radius:var(--r); padding:1rem; max-width:440px; width:100%; }
.capa p { margin:0 0 .3rem; white-space:pre-wrap; font-size:.92rem; }

/* ── estados de una línea de revisión ── */
.rev { border-top:1px solid var(--linea); padding:.6rem 0; font-size:.86rem; }
.rev .que { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gris2); }
.rev .nuevo { color:var(--ok); }
.rev .cambia { color:var(--ojo); }

/* ── un renglón que hay que leer sí o sí ── */
/* No es un error, así que no va en rojo; pero tampoco es una aclaración al
   pasar. El borde de la izquierda lo saca del cuerpo del texto sin gritar. */
.duro { border-left:3px solid var(--ojo); background:var(--tinta2);
  padding:.6rem .75rem; border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:.84rem; color:var(--texto); margin:.7rem 0; }

/* ── el volver, que es un enlace ── */
.volver { margin:.9rem 0 0; font-size:.86rem; }
.volver a { text-decoration:none; }

/* ── una ficha ── */
.ficha { background:var(--tinta2); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:.7rem .8rem; margin:.45rem 0; }
.ficha .cab { display:flex; align-items:center; gap:.5rem; }
.ficha .tit { font-weight:600; font-size:.94rem; flex:1; }
.ficha .notas { font-size:.85rem; color:var(--gris); margin-top:.45rem;
  white-space:pre-wrap; }
.ficha .cuando { font-family:var(--mono); font-size:.58rem; color:var(--gris2);
  margin-top:.5rem; letter-spacing:.06em; }

/* Un dato: qué es, el valor, y copiarlo. El valor puede ser largo y no se
   corta con puntos suspensivos — una cuenta bancaria a medias no sirve. */
.campo { display:flex; align-items:baseline; gap:.5rem; margin-top:.4rem;
  border-top:1px dashed var(--linea); padding-top:.4rem; }
.campo .k { font-family:var(--mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris2); flex:none; max-width:38%;
  overflow-wrap:anywhere; }
.campo .v { flex:1; font-size:.9rem; overflow-wrap:anywhere; }

/* ── un botón chico, para lo que acompaña y no manda ── */
/* Sigue teniendo 34px de alto: más chico que eso, en un teléfono, se falla. */
.mini { min-height:34px; padding:.3rem .6rem; border-radius:var(--r-s);
  border:1px solid var(--linea); background:var(--tinta3); color:var(--gris);
  font-size:.72rem; cursor:pointer; flex:none; }

/* ── el par clave/valor mientras se edita ── */
.par { display:flex; gap:.4rem; margin-top:.4rem; }
.par input { min-height:42px; font-size:.9rem; }
.par input.k { flex:0 0 34%; font-family:var(--mono); font-size:.8rem; }
.par input.v { flex:1; }
.par .quitar { align-self:stretch; font-size:1rem; line-height:1; }

/* ── borrar no se disfraza de acción cualquiera, pero tampoco grita ── */
.btn.borrar { color:var(--mal); border-color:var(--mal); background:none; }

/* ── un textarea para escribir, no para pegar código ── */
/* El textarea por defecto es monoespaciado y sin cortar renglón, que es lo
   que necesita un JSON. Para una nota escrita a mano hace falta lo contrario. */
textarea.libre { font-family:inherit; font-size:.95rem; white-space:pre-wrap;
  min-height:5rem; }

/* ── preguntas y respuestas dentro de un pendiente ── */
/* Una pregunta sin responder tiene que saltar a la vista en una lista larga:
   es lo único del tablero que está frenando el trabajo de los dos. */
.cuadro div.pregunta b { color:var(--mal); }
.pend.sinresponder { border-left-color:var(--mal); }

.preg, .resp { font-size:.85rem; margin-top:.45rem; padding-top:.4rem;
  border-top:1px dashed var(--linea); }
.preg .k, .resp .k { display:block; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris2);
  margin-bottom:.15rem; }
.preg { color:var(--texto); }
.resp { color:var(--gris); white-space:pre-wrap; }
.resp.falta { color:var(--mal); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.04em; }

/* Un pendiente se puede abrir, así que tiene que parecer que se puede tocar. */
.pend[data-abrir] { cursor:pointer; }
.pend[data-abrir]:active { background:var(--tinta3); }

/* El segmentado del editor: tres opciones y ninguna marcada de arranque sería
   un estado imposible, así que abrirPendiente() siempre marca una. */
#t-estado button, #t-quien button { font-size:.56rem; }

/* ── una regla ── */
/* Se parece a un pendiente a propósito: es la misma clase de objeto —algo que
   se lee de un vistazo y se abre para tocar— y dos lenguajes visuales para lo
   mismo obligan a aprender dos veces. */
.regla { background:var(--tinta2); border:1px solid var(--linea);
  border-left:3px solid var(--acento); border-radius:var(--r-s);
  padding:.7rem .8rem; margin:.45rem 0; cursor:pointer; }
.regla:active { background:var(--tinta3); }
.regla.propuesta { border-left-color:var(--ojo); }
.regla.retirada { border-left-color:var(--gris2); opacity:.55; }
.regla .cab { display:flex; align-items:baseline; gap:.5rem; }
.regla .tit { font-weight:600; font-size:.94rem; flex:1; }
.regla .texto { font-size:.88rem; margin-top:.35rem; white-space:pre-wrap; }
.regla .porque { font-size:.82rem; color:var(--gris); margin-top:.45rem;
  border-top:1px dashed var(--linea); padding-top:.4rem; white-space:pre-wrap; }
.regla .porque .k { display:block; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gris2);
  margin-bottom:.15rem; }
.regla .cuando { font-family:var(--mono); font-size:.58rem; color:var(--gris2);
  margin-top:.5rem; letter-spacing:.06em; }
.regla .quien { font-family:var(--mono); font-size:.54rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:999px; flex:none;
  border:1px solid var(--ojo); color:var(--ojo); }

/* ── cinco solapas entran; seis no ── */
/* Con cinco, «Pendientes» ya es la más larga que cabe. Si algún día hace falta
   una sexta, no se achica la letra: se junta algo o se saca algo. */
#nav button { padding:.7rem .15rem; font-size:.55rem; letter-spacing:.06em; }

/* ── prioridad ── */
/* Tres niveles y no cinco: con cinco nadie usa los del medio y todo termina
   siendo «alta». El color sólo marca la más urgente; las otras dos se leen. */
.prio { font-family:var(--mono); font-size:.52rem; letter-spacing:.09em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:999px;
  flex:none; border:1px solid var(--linea); color:var(--gris2); }
.prio.alta { color:var(--ojo); border-color:var(--ojo); }

/* ── de qué proyecto es, cuando se miran todos juntos ── */
.deque { font-family:var(--mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris2); margin-top:.25rem; }

/* ── trabas ── */
/* Lo que traba a otros va en el color del aviso; lo que está frenado se apaga,
   porque no se puede empezar y no tiene que competir por la atención. */
.traba, .frena { font-size:.82rem; margin-top:.45rem; padding-top:.4rem;
  border-top:1px dashed var(--linea); }
.traba .k, .frena .k { display:block; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:.15rem; }
.traba { color:var(--texto); }
.traba .k { color:var(--ojo); }
.frena { color:var(--gris); }
.frena .k { color:var(--gris2); }
.pend.frenado { opacity:.62; }
.pend.frenado .tit { font-weight:500; }

#aviso-trabas { margin:.7rem 0; }
#aviso-trabas .duro { margin:0; }

/* ── el selector de app ── */
/* Manda sobre todo lo que se ve, así que se ve como algo que se toca y no
   como un campo más de un formulario. */
#cual-app { font-size:1.02rem; font-weight:600; border-color:var(--acento);
  background:var(--tinta2); }

/* ── la ficha técnica de cada app ── */
/* Con qué está hecha la app elegida. Tres columnas en una fila que se rompe
   sola en pantallas angostas: el nombre del servicio, el dato, y el botón que
   trae lo que Mauro registró en sus fichas. */
.ft-fila { display:grid; grid-template-columns:9rem 1fr auto; gap:.4rem .6rem;
  align-items:start; padding:.5rem 0; border-top:1px solid var(--linea); }
.ft-fila:first-of-type { border-top:0; }
.ft-k { font-size:.8rem; color:var(--gris); padding-top:.15rem; }
.ft-v { font-family:var(--mono); font-size:.82rem; word-break:break-word; }
.ft-nota { font-family:var(--sans,inherit); font-size:.76rem; color:var(--gris2);
  margin-top:.2rem; }
.ft-ver { min-height:34px; padding:.3rem .6rem; font-size:.76rem; }

/* El detalle ocupa la fila entera, debajo de las tres columnas. */
.ft-detalle { grid-column:1 / -1; }
.ft-ficha { background:var(--tinta3); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:.5rem .6rem; margin-top:.4rem; font-size:.84rem; }
.par-ver { display:flex; gap:.5rem; align-items:center; margin-top:.35rem; }
.par-ver .k { flex:0 0 34%; font-family:var(--mono); font-size:.76rem; color:var(--gris); }
.par-ver .v { flex:1; font-family:var(--mono); font-size:.8rem; word-break:break-all; }

/* En un teléfono angosto la etiqueta va arriba del dato: con tres columnas
   fijas, un nombre de repositorio largo empuja el botón fuera de la pantalla. */
@media (max-width:400px) {
  .ft-fila { grid-template-columns:1fr auto; }
  .ft-k { grid-column:1 / -1; padding-top:0; }
}

/* ══════════════════════════════════════════════════════════
   LOS SITIOS — una pestaña por proyecto.
   ══════════════════════════════════════════════════════════ */

/* Las pestañas scrollean en horizontal en vez de apretarse: con seis
   proyectos y un teléfono angosto, repartir el ancho entre todos deja
   nombres de tres letras que no se leen. `.seg` no sirve por eso. */
.sit-tabs { display:flex; gap:.35rem; overflow-x:auto; margin:.7rem 0;
  padding-bottom:.3rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.sit-tabs::-webkit-scrollbar { display:none; }
.sit-tabs button { flex:none; min-height:38px; padding:.45rem .8rem;
  border:1px solid var(--linea); border-radius:999px; background:var(--tinta2);
  color:var(--gris); font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.sit-tabs button[aria-pressed="true"] { background:var(--acento);
  border-color:var(--acento); color:var(--tinta); font-weight:600; }

/* Los enlaces de afuera son botones, no texto subrayado: en un teléfono un
   enlace de una palabra en medio de un párrafo es un blanco difícil de dar. */
.sit-enlaces { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .2rem; }
.sit-link { display:inline-flex; align-items:center; min-height:40px;
  padding:.4rem .8rem; border:1px solid var(--linea); border-radius:var(--r-s);
  background:var(--tinta3); color:var(--texto); font-size:.82rem;
  text-decoration:none; }
.sit-link.p { background:var(--acento); border-color:var(--acento);
  color:var(--tinta); font-weight:600; }

.sit-previa { margin-top:.6rem; }
.sit-previa iframe { width:100%; height:26rem; border:1px solid var(--linea);
  border-radius:var(--r-s); background:#fff; }

/* La misma fila de la ficha técnica, sin la tercera columna del botón. */
.sit-fila { display:grid; grid-template-columns:9rem 1fr; gap:.4rem .6rem;
  align-items:start; padding:.5rem 0; border-top:1px solid var(--linea); }
.sit-fila:first-of-type { border-top:0; }

.sit-chip { display:inline-block; font-size:.62rem; letter-spacing:.06em;
  padding:.2rem .5rem; border-radius:999px; border:1px solid var(--linea);
  color:var(--gris2); margin:.15rem .25rem .15rem 0; }
.sit-chip.ok { color:var(--ok); border-color:var(--ok); }
.sit-chip.mal { color:var(--mal); border-color:var(--mal); }

.sit-num { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem;
  margin:.2rem 0 .7rem; }
.sit-num div { background:var(--tinta3); border-radius:var(--r-s);
  padding:.55rem .4rem; text-align:center; }
.sit-num b { display:block; font-size:1.1rem; }
.sit-num span { font-size:.66rem; color:var(--gris); }

.sit-pend { display:flex; gap:.5rem; align-items:baseline; padding:.45rem 0;
  border-top:1px solid var(--linea); font-size:.86rem; }

/* Una fila por proyecto en la vista de todos. Es tocable entera, no sólo el
   nombre: el blanco grande es el que se acierta con el pulgar. */
.sit-res { padding:.6rem 0; border-top:1px solid var(--linea); cursor:pointer; }
.sit-res:first-of-type { border-top:0; }
.sit-res-t { display:flex; justify-content:space-between; align-items:baseline;
  gap:.6rem; }
.sit-res-t .gris { font-size:.76rem; margin:0; }
.sit-res-p { font-size:.74rem; color:var(--gris2); margin-top:.25rem; }
.sit-barra { height:5px; background:var(--tinta3); border-radius:999px;
  overflow:hidden; margin-top:.35rem; }
.sit-barra i { display:block; height:100%; background:var(--acento); }

@media (max-width:400px) {
  .sit-fila { grid-template-columns:1fr; }
  .sit-num { grid-template-columns:repeat(2,1fr); }
}