/* Panel de la oficina · identidad Elnarek (memory/identidad-marca.md): fondo cálido, tinta marrón,
   acento bermellón/terracota, latón de apoyo. Sin degradados ni adornos: es una herramienta de trabajo. */
:root {
  --fondo: oklch(0.975 0.008 75);
  --superficie: oklch(0.995 0.004 75);
  --borde: oklch(0.88 0.015 70);
  --tinta: oklch(0.25 0.03 45);
  --tenue: oklch(0.50 0.025 55);
  --acento: oklch(0.50 0.18 33);
  --acento-suave: oklch(0.93 0.05 40);
  --laton: oklch(0.68 0.10 80);
  --peligro: oklch(0.52 0.20 25);
  /* estados (docs/propuesta-agentes.md §4) */
  --e-inactivo: oklch(0.62 0.01 60);
  --e-en_cola: oklch(0.70 0.08 235);
  --e-trabajando: oklch(0.55 0.15 250);
  --e-esperando_aprobacion: oklch(0.72 0.15 75);
  --e-esperando_informacion: oklch(0.55 0.15 300);
  --e-bloqueado: oklch(0.68 0.13 25);
  --e-revisando: oklch(0.58 0.09 190);
  --e-terminado: oklch(0.58 0.13 150);
  --e-error: oklch(0.52 0.20 25);
  --titulo: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: oklch(0.20 0.015 50);
    --superficie: oklch(0.24 0.018 50);
    --borde: oklch(0.34 0.02 50);
    --tinta: oklch(0.93 0.01 75);
    --tenue: oklch(0.70 0.02 70);
    --acento: oklch(0.68 0.16 38);
    --acento-suave: oklch(0.32 0.06 38);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 15px/1.5 var(--texto); }
h1, h2 { font-family: var(--titulo); font-weight: 600; margin: 0; }
h2 { font-size: 1.15rem; margin-bottom: .6rem; }
button, input, textarea, select { font: inherit; color: inherit; }
.mono, .etiqueta { font-family: var(--mono); font-size: .8rem; }
.tenue { color: var(--tenue); }

/* Cabecera */
.cabecera { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--borde); background: var(--superficie); position: sticky; top: 0; z-index: 2; }
.marca { display: flex; align-items: baseline; gap: .5rem; margin-right: auto; }
.marca h1 { font-size: 1.35rem; }
.marca h1 b { color: var(--acento); }
.pastilla { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 99px; border: 1px solid var(--borde); font-family: var(--mono); font-size: .75rem; }
.pastilla::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--e-terminado); }
.pastilla.parada::before { background: var(--peligro); }
.btn { border: 1px solid var(--borde); background: var(--superficie); padding: .4rem .8rem; border-radius: 6px; cursor: pointer; }
.btn:hover { border-color: var(--tinta); }
.btn.principal { background: var(--acento); border-color: var(--acento); color: white; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: white; font-weight: 600; }
.btn.chico { padding: .2rem .55rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }

/* Rejilla */
main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; max-width: 1280px; margin: 0 auto; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem; }
.vacio { color: var(--tenue); font-style: italic; margin: 0; }

/* Aviso de parada y de demo */
.banda-parada { display: none; background: var(--peligro); color: white; padding: .6rem 1rem; text-align: center; font-weight: 600; }
.detenido .banda-parada { display: block; }
.aviso-demo { background: var(--acento-suave); border: 1px dashed var(--acento); padding: .5rem .75rem; border-radius: 6px; font-size: .9rem; }

/* Bandeja de aprobaciones */
.aprobacion { border: 1px solid var(--borde); border-left: 4px solid var(--e-esperando_aprobacion); border-radius: 8px; padding: .75rem; display: grid; gap: .4rem; }
.aprobacion + .aprobacion { margin-top: .6rem; }
.aprobacion .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.riesgo { font-family: var(--mono); font-size: .72rem; padding: .05rem .45rem; border-radius: 4px; border: 1px solid currentColor; }
.riesgo.alto { color: var(--peligro); }
.riesgo.medio { color: var(--laton); }
.riesgo.bajo { color: var(--e-terminado); }

/* Equipo */
.agente { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; padding: .55rem 0; border-top: 1px solid var(--borde); }
.agente:first-of-type { border-top: 0; }
.punto { width: .7rem; height: .7rem; border-radius: 50%; margin-top: .45rem; background: var(--e-inactivo); }
.punto.trabajando { background: var(--e-trabajando); box-shadow: 0 0 0 4px color-mix(in oklch, var(--e-trabajando) 25%, transparent); }
.barra { height: 6px; border-radius: 3px; background: var(--borde); overflow: hidden; margin-top: .3rem; }
.barra > i { display: block; height: 100%; background: var(--acento); }

/* Tareas */
.tarea { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
.tarea:first-of-type { border-top: 0; }
.tarea .desc { overflow-wrap: anywhere; }
.tarea .acciones { grid-column: 1 / -1; display: flex; gap: .4rem; flex-wrap: wrap; }
.estado { font-family: var(--mono); font-size: .72rem; padding: .1rem .5rem; border-radius: 4px; color: white; white-space: nowrap; align-self: start; }
.estado.en_cola { background: var(--e-en_cola); } .estado.trabajando { background: var(--e-trabajando); }
.estado.esperando_aprobacion { background: var(--e-esperando_aprobacion); color: var(--tinta); }
.estado.esperando_informacion { background: var(--e-esperando_informacion); } .estado.bloqueado { background: var(--e-bloqueado); }
.estado.revisando { background: var(--e-revisando); } .estado.terminado { background: var(--e-terminado); } .estado.error { background: var(--e-error); }

/* Uso */
.uso-fila { margin-bottom: .6rem; }
.uso-fila .barra > i.alto { background: var(--peligro); }

/* Formulario de petición */
form.peticion { display: grid; gap: .5rem; }
textarea, input, select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); }
textarea { min-height: 4.5rem; resize: vertical; }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; } .fila > select { flex: 1 1 10rem; width: auto; }

/* Actividad */
.actividad { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; font-size: .88rem; }
.actividad li { padding: .3rem 0; border-top: 1px dashed var(--borde); display: grid; grid-template-columns: 3.6rem 1fr; gap: .5rem; }
.actividad li:first-child { border-top: 0; }

/* Ver entrega */
dialog { width: min(760px, 94vw); border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); padding: 1rem; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog pre { white-space: pre-wrap; font: .9rem/1.5 var(--mono); max-height: 65vh; overflow: auto; }

/* Pantalla de acceso */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.acceso form { width: min(380px, 100%); display: grid; gap: .75rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.5rem; }
.acceso label { display: grid; gap: .25rem; font-size: .9rem; }
.error-acceso { color: var(--peligro); min-height: 1.2em; margin: 0; font-size: .9rem; }
.margen { margin: 1rem 1rem 0; }
.visor-cabecera { justify-content: space-between; align-items: center; }

/* Oficina visual (Fase 3B) */
.oficina-bloque { max-width: 1280px; margin: 1rem auto 0; padding: 0 1rem; }
.oficina-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: .5rem; }
.oficina-cabecera h2 { margin: 0; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; font-size: .78rem; color: var(--tenue); }
.leyenda li { display: inline-flex; align-items: center; gap: .3rem; }
.leyenda i { display: inline-grid; place-items: center; width: .95rem; height: .95rem; border-radius: 3px; font: bold .7rem var(--mono); font-style: normal; color: white; }
.l-cafe { background: #e3d2b4; } .l-trabajando { background: #e46a3f; } .l-aprobacion { background: #e2a93b; }
.l-info { background: #8a5cc2; } .l-revision { background: #3f9c9c; } .l-error { background: #c8402f; }
.oficina { position: relative; overflow-x: auto; border: 1px solid var(--borde); border-radius: 10px; background: #4a3a2e; line-height: 0; }
#oficina-lienzo { display: block; image-rendering: pixelated; cursor: pointer; }
.oficina-ficha { position: absolute; top: .75rem; right: .75rem; width: min(300px, 80%); line-height: 1.45; background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: .7rem .8rem; box-shadow: 0 6px 20px rgb(0 0 0 / .25); font-size: .9rem; display: grid; gap: .3rem; }
.oficina-ficha p { margin: 0; }
.ficha-nombre { font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; }
.ficha-estado { font-family: var(--mono); font-size: .8rem; }
.ficha-estado.esperando_aprobacion { color: #b77d12; } .ficha-estado.error, .ficha-estado.bloqueado { color: var(--peligro); }
.ficha-estado.trabajando { color: var(--e-trabajando); }
@media (max-width: 860px) { .oficina-ficha { position: static; width: auto; margin: .5rem; } }