/* AXIS · interfaz propia (prototipo L178)
   Idea: un escritorio de oficina claro y quieto. El «eje» (línea vertical con nodos) es la firma:
   ordena el día en Hoy y marca la sección activa. Una acción llena por pantalla; lo demás, contorno. */
:root {
  --papel: #EDF0EE;        /* fondo: gris frío con un punto de verde */
  --hoja: #FFFFFF;         /* superficies */
  --tinta: #14212B;        /* texto */
  --tinta-2: #51606B;      /* texto secundario */
  --raya: #D3DAD7;         /* bordes */
  --eje: #0E5A64;          /* acento: petróleo */
  --eje-suave: #DCEBEA;
  --rojo: #A8321F;  --rojo-suave: #F6E2DD;
  --ambar: #8A5A00; --ambar-suave: #F6EACB;
  --ok: #1F6B45;    --ok-suave: #DDEFE4;
  --titulo: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --texto: Verdana, "Segoe UI", system-ui, sans-serif;
  --radio: 6px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 17px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--eje); }
h1 { font: 800 2rem/1.1 var(--titulo); font-stretch: 112%; letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
h2 { font: 700 1.25rem/1.2 var(--titulo); margin: 0 0 10px; }
.rotulo { display: block; font: 700 .78rem/1.2 var(--titulo); font-stretch: 110%; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-2); margin: 28px 0 10px; }
.tenue { color: var(--tinta-2); font-weight: 400; }
.fecha { margin: 0 0 2px; color: var(--tinta-2); }
.bajada { margin: -8px 0 20px; color: var(--tinta-2); max-width: 56ch; }
.bajada.corta { margin: -4px 0 12px; }
.pie-nota { color: var(--tinta-2); font-size: .9rem; margin: 18px 0 0; }
:focus-visible { outline: 3px solid var(--eje); outline-offset: 2px; }

/* ── armazón ── */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--hoja); border-right: 1px solid var(--raya); padding: 24px 16px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
.arriba, .abajo { display: none; }
.cuerpo { padding: 36px 48px 72px; max-width: 980px; min-width: 0; }
.pantalla { display: block; }

.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.marca b { font: 800 1.45rem/1 var(--titulo); font-stretch: 125%; letter-spacing: .14em; }
.marca small { color: var(--tinta-2); font-size: .8rem; margin-left: auto; }
.marca-eje { width: 4px; height: 26px; background: var(--eje); position: relative; }
.marca-eje::after { content: ""; position: absolute; left: -4px; top: 8px; width: 12px; height: 4px; background: var(--eje); }
.marca.grande b { font-size: 2.2rem; }
.marca.grande .marca-eje { height: 38px; }
.marca.grande .marca-eje::after { top: 14px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-left: 4px solid transparent; color: var(--tinta); text-decoration: none; font-weight: 700; }
.nav a:hover { background: var(--papel); }
.nav a.on { border-left-color: var(--eje); background: var(--eje-suave); color: var(--eje); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cuenta { margin-left: auto; font-style: normal; font-size: .82rem; background: var(--rojo); color: #fff; min-width: 22px; text-align: center; border-radius: 11px; padding: 0 6px; }

.empleo-ficha { margin-top: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px 12px; border: 1px solid var(--raya); border-radius: var(--radio); text-decoration: none; color: var(--tinta); }
.empleo-ficha .rotulo { margin: 0; }
.empleo-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--raya); border-radius: 20px; padding: 6px 12px; font-size: .9rem; text-decoration: none; color: var(--tinta); background: var(--hoja); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-2); }
.punto.ok { background: var(--ok); }

.cinta-ejemplo { margin: 0 0 22px; font-size: .82rem; color: var(--ambar); background: var(--ambar-suave); padding: 5px 10px; border-radius: var(--radio); display: inline-block; }

/* ── piezas ── */
.estado { display: inline-block; font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--papel); color: var(--tinta-2); white-space: nowrap; }
.estado.ok { background: var(--ok-suave); color: var(--ok); }
.estado.rojo { background: var(--rojo-suave); color: var(--rojo); }
.estado.ambar { background: var(--ambar-suave); color: var(--ambar); }

.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 20px; font: 700 1rem var(--texto); border: 1.5px solid var(--tinta); border-radius: var(--radio); background: transparent; color: var(--tinta); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--papel); }
.btn.principal { background: var(--eje); border-color: var(--eje); color: #fff; }
.btn.principal:hover { background: #0A474F; }
.btn.peligro { border-color: var(--rojo); color: var(--rojo); }
.btn.ancho { width: 100%; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.aviso { background: var(--eje-suave); border-radius: var(--radio); padding: 12px 14px; margin: 0 0 18px; max-width: 64ch; }
.aviso.suave { background: var(--hoja); border: 1px solid var(--raya); }
.sospecha { background: var(--ambar-suave); color: #5C3C00; border-radius: var(--radio); padding: 10px 14px; margin: 16px 0 0; font-size: .95rem; }
.vacio { margin: 0 0 10px; color: var(--tinta-2); }
.vacio b { color: var(--tinta); }
.ir { font-weight: 700; color: var(--eje); text-decoration: underline; text-underline-offset: 3px; }
.ir.suelto { display: inline-block; margin-top: 10px; }

.bloque { background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 18px; }
.bloque .rotulo { margin-top: 0; }
.bloque.enlace { text-decoration: none; color: var(--tinta); display: block; }
.bloque.enlace:hover { border-color: var(--eje); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.cifra { font: 800 2.6rem/1 var(--titulo); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.cifra span { font: 400 1rem var(--texto); color: var(--tinta-2); }
.linea { margin: 0 0 12px; }

/* el eje del día */
.eje { list-style: none; margin: 0; padding: 0 0 0 30px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.eje::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 4px; background: var(--eje); }
.eje li { position: relative; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.eje li::before { content: ""; position: absolute; left: -29px; top: 22px; width: 18px; height: 4px; background: var(--eje); }
.eje li b { font-size: 1.18rem; line-height: 1.3; }
.eje-hora { font: 700 .78rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.eje-origen { color: var(--tinta-2); font-size: .93rem; }
.eje li.rojo .eje-hora { color: var(--rojo); }
.eje li.ambar .eje-hora { color: var(--ambar); }

.lista { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.lista li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border-top: 1px solid var(--raya); }
.lista li:first-child { border-top: 0; }
.lista div { display: flex; flex-direction: column; min-width: 0; }
.lista span { color: var(--tinta-2); font-size: .93rem; }
.lista.compacta { border: 0; background: transparent; }
.lista.compacta li { padding: 8px 0; border: 0; }
.casilla { width: 22px; height: 22px; border: 2px solid var(--tinta-2); border-radius: 4px; flex: none; margin-top: 2px; }

.escribir { margin-top: 32px; }
.escribir .rotulo { margin-top: 0; }
.escribir-fila { display: flex; gap: 10px; }
input, textarea { font: 1rem/1.45 var(--texto); color: var(--tinta); background: var(--hoja); border: 1.5px solid var(--tinta-2); border-radius: var(--radio); padding: 12px 14px; width: 100%; min-width: 0; }
input { min-height: 48px; }
textarea { resize: vertical; }
::placeholder { color: var(--tinta-2); }

/* filtros y fichas */
.filtros, .fichas { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.filtros button, .fichas button { font: 700 .95rem var(--texto); min-height: 42px; padding: 0 16px; border-radius: 21px; border: 1.5px solid var(--raya); background: var(--hoja); color: var(--tinta); cursor: pointer; }
.filtros button.on, .fichas button.on { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.filtros i { font-style: normal; opacity: .75; margin-left: 4px; }
.fichas { margin-top: 0; }

/* mensajes */
.mens { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.personas { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.personas li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 14px; border-top: 1px solid var(--raya); border-left: 4px solid transparent; }
.personas li:first-child { border-top: 0; }
.personas li.on { border-left-color: var(--eje); background: var(--eje-suave); }
.personas div { display: flex; flex-direction: column; min-width: 0; }
.personas div span { color: var(--tinta-2); font-size: .93rem; }
.personas .estado { grid-column: 2; justify-self: start; }
.inicial { width: 44px; height: 44px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--raya); display: grid; place-items: center; font: 700 .9rem var(--titulo); color: var(--tinta-2); grid-row: span 2; }
.hilo { background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 20px; }
.hilo header { display: flex; flex-direction: column; border-bottom: 1px solid var(--raya); padding-bottom: 12px; }
.hilo header b { font: 700 1.3rem var(--titulo); }
.hilo header span { color: var(--tinta-2); font-size: .93rem; }
.hilo .rotulo { margin-top: 18px; }
.resumen { margin: 0; font-size: 1.08rem; }

/* agentes */
.agentes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 16px; align-items: start; }
.agente-lista { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.agente-lista li { padding: 12px 14px; border-top: 1px solid var(--raya); border-left: 4px solid transparent; cursor: pointer; display: flex; flex-direction: column; }
.agente-lista li:first-child { border-top: 0; }
.agente-lista li span { color: var(--tinta-2); font-size: .93rem; }
.agente-lista li.on { border-left-color: var(--eje); background: var(--eje-suave); }
.pedido { background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 20px; }
.pedido h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pedido .rotulo { margin: 0 0 8px; }
.pedido textarea { margin-bottom: 14px; }
.pedido .fichas { margin-bottom: 18px; }

/* documentos */
.docs { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.docs li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--raya); }
.docs li:first-child { border-top: 0; }
.docs div { display: flex; flex-direction: column; min-width: 0; }
.docs div span { color: var(--tinta-2); font-size: .93rem; }
.doc-tipo { font: 700 .74rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--eje); border: 1.5px solid var(--eje); border-radius: 3px; padding: 3px 6px; justify-self: start; }

/* empleo */
.empleo-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; background: var(--hoja); border: 1px solid var(--raya); border-left: 4px solid var(--eje); border-radius: var(--radio); padding: 18px; }
.empleo-cabeza div { display: flex; flex-direction: column; }
.empleo-cabeza .rotulo { margin: 0 0 4px; }
.empleo-cabeza b { font: 700 1.4rem/1.2 var(--titulo); }
.conexiones { list-style: none; margin: 0; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.conexiones li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--raya); }
.conexiones li:first-child { border-top: 0; }
.conexiones div { display: flex; flex-direction: column; min-width: 0; }
.conexiones div span { color: var(--tinta-2); font-size: .93rem; }
.pasos { list-style: none; counter-reset: paso; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.pasos li { counter-increment: paso; border-top: 4px solid var(--eje); padding: 10px 12px 0 0; display: flex; flex-direction: column; }
.pasos li::before { content: counter(paso); font: 800 1.1rem var(--titulo); color: var(--eje); }
.pasos li span { color: var(--tinta-2); font-size: .9rem; }

/* aprendido */
.cajones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cajon { background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 20px; }
.cajon .rotulo { margin: 0 0 6px; }
.cajon h2 { font-size: 1.4rem; }
.cajon ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.cajon li b { font: 800 1.25rem var(--titulo); display: inline-block; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.cajon.se-va { border-style: dashed; border-color: var(--tinta-2); }
.cajon.se-va h2 { color: var(--tinta-2); }
.cajon.se-queda { border: 2px solid var(--eje); }
.cajon.se-queda h2 { color: var(--eje); }
.propuestas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.propuestas li { background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 16px 18px; }
.propuestas p { margin: 10px 0 0; font-size: 1.08rem; max-width: 60ch; }

/* entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.entrada-caja { width: 100%; max-width: 400px; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 32px 28px; }
.entrada-caja .marca { padding: 0; }
.entrada-lema { font-size: 1.15rem; margin: 10px 0 20px; }
.entrada-caja label { display: block; font-weight: 700; margin: 0 0 6px; }
.entrada-caja input { margin-bottom: 16px; }

/* ── celular ── */
@media (max-width: 860px) {
  .app { display: block; }
  .lateral { display: none; }
  .arriba { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--hoja); border-bottom: 1px solid var(--raya); position: sticky; top: 0; z-index: 5; }
  .arriba .marca { padding: 0; }
  .cuerpo { padding: 20px 16px 110px; }
  h1 { font-size: 1.7rem; }
  .abajo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; background: var(--hoja); border-top: 1px solid var(--raya); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 5; }
  .abajo a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px 8px; font-size: .74rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--tinta-2); text-decoration: none; border-top: 4px solid transparent; margin-top: -1px; }
  .abajo a.on { color: var(--eje); border-top-color: var(--eje); }
  .dos, .mens, .agentes, .cajones { grid-template-columns: minmax(0, 1fr); }
  .escribir-fila { flex-direction: column; }
  .escribir-fila .btn { flex: none; height: 52px; }
  .docs li { grid-template-columns: minmax(0, 1fr) auto; }
  .docs .doc-tipo { grid-column: 1 / -1; }
  .docs .estado { justify-self: start; }
  .docs .btn { grid-row: 2; grid-column: 2; min-height: 44px; padding: 0 14px; }
  .docs .estado { grid-column: 1 / -1; }
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 4px solid var(--eje); }
  .pasos li { border-top: 0; padding: 6px 0 6px 14px; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .conexiones li { flex-wrap: wrap; }
  .acciones .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .nav a, .bloque.enlace { transition: background-color .12s, border-color .12s; } }

/* ── L180: piezas nuevas ── */
.aviso.error { background: var(--rojo-suave); color: var(--rojo); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.arriba-der { display: flex; align-items: center; gap: 8px; }
.respuesta { white-space: pre-wrap; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); padding: 14px; margin-top: 14px; overflow-wrap: anywhere; }
.respuesta.pensando { color: var(--tinta-2); font-style: italic; }
.resultado { margin-top: 16px; }
.resultado .respuesta { margin-top: 0; border: 0; padding: 0; background: transparent; }
.buscar { margin-bottom: 4px; }
.mens-msg { border-top: 1px solid var(--raya); padding: 10px 0; overflow-wrap: anywhere; }
.mens-msg:first-child { border-top: 0; }
.mens-msg .meta { font-size: .85rem; color: var(--tinta-2); display: block; }
.mens-msg.propio .meta { color: var(--eje); }
.mens-msg p { margin: 2px 0 0; white-space: pre-wrap; }
.mens-msg .cita { border-left: 3px solid var(--raya); padding-left: 8px; color: var(--tinta-2); font-size: .9rem; margin: 4px 0 0; }
.personas li { cursor: pointer; }
.personas li:focus-visible { outline-offset: -3px; }
.personas .estado { white-space: normal; }
.vacio-caja { background: var(--hoja); border: 1px dashed var(--tinta-2); border-radius: var(--radio); padding: 18px; }
.vacio-caja b { display: block; margin-bottom: 4px; }
.vacio-caja span { color: var(--tinta-2); }
.eje li.rojo b { color: var(--rojo); }
.lista li .acciones { margin: 8px 0 0; }
.lista li .btn, .conexiones li .btn, .pasos-salida .btn { min-height: 38px; padding: 0 12px; font-size: .9rem; }
.docs .resumen-doc { grid-column: 1 / -1; color: var(--tinta-2); font-size: .93rem; margin: 0; }
.codigo { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.codigo code { flex: 1; min-width: 0; background: var(--papel); border: 1px solid var(--raya); border-radius: var(--radio); padding: 8px 10px; font: .85rem/1.4 Consolas, "Courier New", monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.pasos-salida { list-style: none; margin: 0 0 16px; padding: 0; background: var(--hoja); border: 1px solid var(--raya); border-radius: var(--radio); }
.pasos-salida > li { padding: 14px 16px; border-top: 1px solid var(--raya); }
.pasos-salida > li:first-child { border-top: 0; }
.pasos-salida .tit { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.marca-ok { color: var(--ok); font-weight: 800; }
.marca-pend { color: var(--tinta-2); }
.ficha-lista { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; }
.ficha-lista dt { color: var(--tinta-2); }
.ficha-lista dd { margin: 0; overflow-wrap: anywhere; }
.recientes { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.recientes span { color: var(--tinta-2); font-size: .9rem; }
.cajon .nota { color: var(--tinta-2); font-size: .93rem; margin: 12px 0 0; }
.cajon li { overflow-wrap: anywhere; }
.propuestas .origen { color: var(--tinta-2); font-size: .85rem; margin-left: 8px; }
@media (max-width: 860px) {
  .arriba .empleo-chip { max-width: 50vw; }
  .arriba .empleo-chip span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lateral .salir { display: none; }
}
@media (min-width: 861px) { .arriba-der .btn { display: none; } }