@font-face { font-family: Fraunces; src: url('./fuentes/fraunces-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Fraunces; src: url('./fuentes/fraunces-400-cursiva.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Figtree; src: url('./fuentes/figtree-400-600.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --papel: #f7f2e8;
  --tinta: #2a231d;
  --suave: #6a5e50;
  --oliva: #56653a;
  --oliva-oscuro: #3f4a2a;
  --salvia: #e5e8d9;
  --arcilla: #a3512b;
  --alerta: #8a3f1f;
  --rosa: #fbede5;
  --luz: #fff4dc;
  --linea: #e3d8c4;
  --pasillo: #f1e8d8;
  --titulos: Fraunces, Georgia, serif;
  font: 16px/1.45 Figtree, system-ui, sans-serif;
  color: var(--tinta);
  background: var(--papel);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select, summary { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
a { color: var(--oliva-oscuro); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font: 600 1.5rem/1.15 var(--titulos); }
small, .suave { color: var(--suave); }
small { font-size: .8125rem; }
.solo-lector, .saltar:not(:focus) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.saltar:focus { position: fixed; top: 8px; left: 8px; padding: 12px; background: white; z-index: 10; }

.cabecera { background: white; border-bottom: 1px solid var(--linea); }
.cabecera-interior { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; max-width: 1440px; margin: auto; padding: 12px 24px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); min-height: 44px; }
.marca strong, .marca small { display: block; }
.marca strong { font: 600 1.5rem/1 var(--titulos); }
.cabecera-datos { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cabecera-datos time::first-letter { text-transform: uppercase; }
.socios { display: flex; }
.socios span { display: grid; place-items: center; background: var(--oliva); color: white; border: 2px solid white; border-radius: 50%; width: 38px; height: 38px; font-weight: 600; }
.socios span + span { margin-left: -7px; background: var(--arcilla); }
.contenido { max-width: 1440px; margin-inline: auto; padding: 20px 24px 32px; }
.barra-movil, .aviso-urgente-movil, .volver, .trabajo-texto { display: none; }

.pila { display: grid; align-content: start; gap: 12px; }
.superficie { background: white; border: 1px solid var(--linea); border-radius: 18px; min-width: 0; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 15px; border: 1px solid var(--oliva); border-radius: 10px; background: white; color: var(--oliva-oscuro); font-weight: 600; text-decoration: none; text-align: center; }
.boton:hover { background: var(--salvia); }
.boton.primario, .boton.tinta { color: white; background: var(--arcilla); border-color: transparent; }
.boton.primario:hover { background: var(--alerta); }
.boton.tinta { background: var(--tinta); border-radius: 999px; }
.boton.tinta:hover { background: var(--oliva-oscuro); }
.chip { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 999px; background: var(--pasillo); font-size: .875rem; white-space: nowrap; }
.contador, .dato { min-width: 28px; min-height: 28px; padding-inline: 7px; font-variant-numeric: tabular-nums; font-weight: 600; }
.contador { background: var(--oliva); color: white; }
.alerta { color: var(--alerta); }
.icono-caja { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--oliva-oscuro); background: var(--salvia); border-radius: 9px; }
svg:not(.dibujo-plano) { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.aviso { display: grid; gap: 4px; padding: 12px 14px; background: var(--pasillo); border-radius: 10px; }
.aviso.error { background: var(--rosa); color: var(--alerta); }
.aviso.hecho { background: var(--salvia); color: var(--oliva-oscuro); }

.oficina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 20px; align-items: start; }
.mesa { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 18px; }
.rotulo { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 4px; }
.mesa h1 { font-size: 1.375rem; }
.mesa h1 em { font-weight: 400; color: var(--oliva); }
.mesa ul { display: flex; flex: 1 1 400px; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; list-style: none; }
.mesa li { display: inline-flex; align-items: center; gap: 6px; }
.mesa .contador, .urgente .contador { background: var(--arcilla); }
.visor { overflow-x: auto; border-radius: 15px; }
.plano { position: relative; min-width: 760px; aspect-ratio: 1000 / 640; background: #fbf8f2; }
.dibujo-plano { position: absolute; inset: 0; width: 100%; height: 100%; }
.despacho { position: absolute; inset: var(--y) auto auto var(--x); width: var(--ancho); height: var(--alto); display: flex; align-items: flex-start; padding: 11px; border: 0; background: transparent; color: var(--tinta); text-align: left; }
.despacho.urgente { box-shadow: inset 0 0 0 6px var(--arcilla); }
.despacho[aria-pressed="true"] { box-shadow: inset 0 0 0 5px var(--tinta); }
.despacho.urgente[aria-pressed="true"] { box-shadow: inset 0 0 0 5px var(--tinta), inset 0 0 0 9px var(--arcilla); }
.despacho:focus-visible { outline-offset: -7px; z-index: 1; }
.despacho-texto { display: grid; gap: 4px; max-width: 95%; padding: 7px 9px; border-radius: 11px; border: 1px solid var(--linea); background: white; font-size: .875rem; }
.despacho[data-despacho="diseno"] .despacho-texto { max-width: 60%; }
.despacho:hover .despacho-texto { border-color: var(--oliva); }
.despacho-titulo { display: flex; align-items: center; gap: 7px; }
.despacho-nombre { font: 600 1.125rem/1.1 var(--titulos); }
.urgente .despacho-texto { background: var(--rosa); }
.novedad .despacho-texto { background: var(--luz); }
.apagado .despacho-texto { background: #f3eee5; }
.falta { display: grid; }
.falta strong { white-space: nowrap; }
.novedad-texto { color: var(--oliva-oscuro); }
.leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .875rem; color: var(--suave); }
.bandeja-cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.bandeja-cabecera p { font-size: .875rem; margin-top: 2px; }
.bandeja-cabecera .icono-caja { width: 44px; height: 44px; }
.bandeja-cuerpo { padding: 16px 20px; }
.nmh-trabaja { transform-box: fill-box; transform-origin: center; animation: respirar 4s ease-in-out infinite; }
.nmh-punto { animation: teclear 1.4s ease-in-out infinite; }
.nmh-p2 { animation-delay: .22s; }
.nmh-p3 { animation-delay: .44s; }
@keyframes respirar { 50% { transform: scale(1.03); } }
@keyframes teclear { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1023px) {
  .oficina { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .cabecera-interior, .contenido { padding-inline: 12px; }
  .cabecera-interior { flex-wrap: nowrap; gap: 6px; }
  .cabecera-datos { gap: 6px; }
  .cabecera-datos .chip { font-size: .8125rem; padding-inline: 7px; }
  .cabecera-datos time, .socios { display: none; }
  .contenido { padding-block: 12px 92px; }
  .oficina { gap: 12px; }
  .mesa { padding: 12px; }
  .mesa ul { font-size: .875rem; gap: 4px 10px; }
  .mesa .tinta, .dibujo-plano, .leyenda, .oficina:not(.bandeja-abierta) .bandeja { display: none; }
  .aviso-urgente-movil { display: block; }
  .aviso-urgente-movil .boton { width: 100%; text-align: left; justify-content: flex-start; color: var(--alerta); border-color: var(--arcilla); background: var(--rosa); }
  .visor { overflow: visible; border-radius: 0; }
  .plano { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; aspect-ratio: auto; background: none; }
  .despacho { position: static; width: auto; height: auto; min-height: 132px; background: white; border: 1px solid var(--linea); border-radius: 14px; padding: 10px; }
  .despacho[data-despacho="socios"] { grid-column: span 2; }
  .despacho.apagado { background: repeating-linear-gradient(135deg, #f3eee5, #f3eee5 8px, #eae3d7 8px, #eae3d7 16px); }
  .despacho.novedad { background: var(--luz); }
  .despacho.urgente { background: var(--rosa); }
  .oficina:not(.bandeja-abierta) .despacho:not(.urgente) { box-shadow: none; }
  .oficina:not(.bandeja-abierta) .despacho.urgente { box-shadow: inset 0 0 0 3px var(--arcilla); }
  .despacho .despacho-texto, .despacho[data-despacho="diseno"] .despacho-texto { max-width: 100%; padding: 0; background: none; border: 0; }
  .despacho-nombre { font-size: 1rem; }
  .despacho-titulo { gap: 5px; flex-wrap: wrap; }
  .despacho-titulo .icono-caja { width: 25px; height: 25px; }
  .despacho-titulo .contador { min-width: 25px; min-height: 25px; padding-inline: 6px; }
  .trabajo-texto { display: block; color: var(--oliva-oscuro); font-size: .8125rem; }
  .bandeja-abierta > :not(.bandeja) { display: none; }
  .volver { display: inline-flex; min-width: 44px; padding: 0; }
  .bandeja-cabecera, .bandeja-cuerpo { padding-inline: 12px; }
  .barra-movil { position: fixed; inset: auto 0 0; z-index: 3; display: flex; justify-content: space-around; gap: 2px; padding: 4px 6px max(4px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: white; }
  .barra-movil a, .barra-movil button { display: grid; place-items: center; min-height: 48px; padding: 0 5px; color: var(--oliva-oscuro); text-decoration: none; font-weight: 600; font-size: .875rem; white-space: nowrap; }
}