/* idearco DEV — hoja única. Es una bitácora: legible antes que vistosa. */
:root {
  --papel:#f4f6f7; --caja:#fff; --tinta:#16232a; --tenue:#65777f;
  --linea:#dbe3e5; --acento:#14706a; --ok:#1d6f3f; --error:#9c3a2c;
  --urgente:#9a6b0f;
}
@media (prefers-color-scheme: dark) {
  :root { --papel:#101619; --caja:#172126; --tinta:#e3ebec; --tenue:#8b9ba1;
          --linea:#2b383d; --acento:#4cb3a9; --ok:#5fbc85; --error:#d97a68;
          --urgente:#d7a441; }
}
* { box-sizing:border-box }
body { margin:0; background:var(--papel); color:var(--tinta);
       font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif }
main { max-width:1080px; margin:0 auto; padding:28px 20px 80px }
h1 { font-size:1.6rem; margin:0 0 6px; letter-spacing:-.01em }
h2 { font-size:1.05rem; margin:34px 0 10px; padding-bottom:6px;
     border-bottom:1px solid var(--linea) }
a { color:var(--acento) }
code { font-family:ui-monospace,Menlo,monospace; font-size:.88em;
       background:var(--papel); border:1px solid var(--linea);
       border-radius:4px; padding:1px 5px }
pre { font-family:ui-monospace,Menlo,monospace; font-size:.88em; white-space:pre-wrap;
      margin:8px 0 0 }

.barra { display:flex; align-items:center; gap:22px; padding:12px 20px;
         background:var(--caja); border-bottom:1px solid var(--linea) }
.marca { font-weight:400; text-decoration:none; color:var(--tinta) }
.marca b { color:var(--acento) }
.barra nav { display:flex; gap:16px; flex:1 }
.barra nav a { text-decoration:none }
.quien { color:var(--tenue); font-size:.88rem }

table { width:100%; border-collapse:collapse; background:var(--caja);
        border:1px solid var(--linea); border-radius:8px; overflow:hidden;
        font-size:.92rem }
th { text-align:left; font-weight:500; font-size:.74rem; letter-spacing:.08em;
     text-transform:uppercase; color:var(--tenue); padding:10px 14px;
     border-bottom:1px solid var(--linea) }
td { padding:11px 14px; border-bottom:1px solid var(--linea) }
tr:last-child td { border-bottom:none }
.num { text-align:right; font-variant-numeric:tabular-nums }

.tarjeta { background:var(--caja); border:1px solid var(--linea); border-radius:8px;
           padding:16px 18px; margin:10px 0; display:flex; flex-direction:column;
           gap:10px; max-width:520px }
.tarjeta.ancho { max-width:none }
.nota p { margin:0 0 8px; color:var(--tenue); font-size:.9rem }
.nota p:last-child { margin:0 }

label { display:flex; flex-direction:column; gap:5px; font-size:.9rem }
input, select, textarea, button {
  font:inherit; padding:8px 10px; border:1px solid var(--linea);
  border-radius:6px; background:var(--caja); color:var(--tinta) }
textarea { resize:vertical }
button { background:var(--acento); color:#fff; border-color:transparent;
         cursor:pointer; font-weight:500; align-self:flex-start; padding:8px 16px }
button.peligro { background:transparent; color:var(--error); border-color:var(--error) }
:focus-visible { outline:2px solid var(--acento); outline-offset:2px }

.fila { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 }
.fila input { flex:1; min-width:120px }
.filtros { display:flex; gap:10px; margin:14px 0 }

.chip { display:inline-block; font-size:.72rem; letter-spacing:.05em; padding:2px 8px;
        border-radius:20px; background:var(--papel); border:1px solid var(--linea);
        color:var(--tenue) }
.chip.e-desplegado { color:var(--ok); border-color:var(--ok) }
.chip.e-revertido, .chip.e-rechazado { color:var(--error); border-color:var(--error) }
.chip.e-en_curso, .chip.e-revision { color:var(--acento); border-color:var(--acento) }
.chip.urgente { color:var(--urgente); border-color:var(--urgente) }

.aviso { padding:10px 14px; border-radius:6px; border:1px solid var(--linea);
         background:var(--caja); margin:12px 0 }
.aviso.ok { border-color:var(--ok); color:var(--ok) }
.aviso.error { border-color:var(--error); color:var(--error) }
.tenue { color:var(--tenue); font-size:.88rem }
.vacio { color:var(--tenue); padding:22px 0 }
.grande { font-size:2rem; font-variant-numeric:tabular-nums; margin:16px 0 }
.centro { max-width:380px; margin:12vh auto; text-align:center }
.centro .tarjeta { text-align:left }
.historial { list-style:none; padding:0; font-size:.9rem }
.historial li { padding:6px 0; border-bottom:1px solid var(--linea) }
details summary { cursor:pointer; color:var(--tenue); font-size:.88rem }