/* Trasteros Sagasta — panel operativo.
   Paleta: azul persiana metálica sobre gris frío; latón solo en acciones.
   Tipos: monospace con peso para códigos y cifras (troquelado de puerta);
   sistema para el resto. Móvil primero (barra inferior). */

:root {
  --tinta: #1e2a32;        /* texto principal */
  --tinta-suave: #5a6b75;
  --metal: #46606e;        /* azul persiana — primario */
  --metal-oscuro: #32444f;
  --fondo: #eef1f2;        /* gris frío de nave */
  --panel: #ffffff;
  --linea: #d5dbde;
  --laton: #c98a2d;        /* candado — SOLO acciones */
  --laton-oscuro: #a97120;
  --libre: #4f8a5b;
  --reservado: #c98a2d;
  --ocupado: #46606e;
  --oxido: #a6432d;        /* deuda / peligro */
  --radio: 6px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); color: var(--tinta); background: var(--fondo);
  font-size: 16px; line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- cabecera ---- */
header.app {
  background: var(--metal-oscuro); color: #fff;
  padding: 10px 16px; display: flex; align-items: baseline; gap: 10px;
}
header.app .marca { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; }
header.app .quien { margin-left: auto; font-size: .82rem; opacity: .85; }
header.app button { background: none; border: none; color: #fff; opacity: .8;
  cursor: pointer; font-size: .82rem; text-decoration: underline; padding: 0 0 0 10px; }

/* ---- navegación: pestañas inferiores en móvil, laterales en pantalla grande ---- */
nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; background: var(--panel); border-top: 1px solid var(--linea);
}
nav.tabs a {
  flex: 1; text-align: center; padding: 10px 2px 12px; text-decoration: none;
  color: var(--tinta-suave); font-size: .72rem; font-weight: 600;
}
nav.tabs a .ic { display: block; font-size: 1.15rem; font-family: var(--mono); }
nav.tabs a.activa { color: var(--metal); border-top: 3px solid var(--laton); margin-top: -1px; }
main { padding: 14px 14px 84px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) {
  nav.tabs { top: 0; bottom: auto; left: 0; right: auto; height: 100%;
    width: 172px; flex-direction: column; border-top: none;
    border-right: 1px solid var(--linea); padding-top: 56px; }
  nav.tabs a { flex: 0 0 auto; text-align: left; padding: 12px 16px; font-size: .88rem; }
  nav.tabs a .ic { display: inline; margin-right: 8px; }
  nav.tabs a.activa { border-top: none; border-left: 3px solid var(--laton);
    margin-top: 0; margin-left: -1px; background: var(--fondo); }
  main { margin-left: 186px; padding-bottom: 24px; }
  header.app { padding-left: 186px; }
}

/* ---- piezas ---- */
h2 { font-size: 1.02rem; margin: 18px 0 8px; }
h2 .cuenta { font-family: var(--mono); color: var(--tinta-suave); font-weight: 600; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 10px;
}
.tarjeta .fila { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.cod { font-family: var(--mono); font-weight: 700; }
.suave { color: var(--tinta-suave); font-size: .86rem; }
.importe { font-family: var(--mono); font-weight: 700; }
.deuda { color: var(--oxido); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vacio { color: var(--tinta-suave); padding: 8px 2px; font-size: .92rem; }

button, .boton {
  font: 600 .9rem var(--sans); border-radius: var(--radio); cursor: pointer;
  padding: 9px 14px; border: 1px solid transparent; text-decoration: none;
  display: inline-block;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--laton); outline-offset: 1px;
}
.primario { background: var(--laton); color: #fff; }
.primario:hover { background: var(--laton-oscuro); }
.secundario { background: var(--panel); color: var(--metal); border-color: var(--metal); }
.peligro { background: var(--panel); color: var(--oxido); border-color: var(--oxido); }
.silencio { background: none; color: var(--tinta-suave); text-decoration: underline; padding: 9px 4px; }

form.linea { display: grid; gap: 10px; }
label { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); display: block; }
input, select {
  width: 100%; padding: 10px; border: 1px solid var(--linea);
  border-radius: var(--radio); font-size: 1rem; background: #fff;
}
.aviso { background: #fdf6ea; border: 1px solid var(--laton);
  border-radius: var(--radio); padding: 10px 12px; font-size: .9rem; margin: 10px 0; }
.error { background: #faeae5; border-color: var(--oxido); color: var(--oxido); }

/* ---- firma: el plano de puertas ---- */
.plano {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.puerta {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden; text-align: center;
  padding-bottom: 8px; position: relative; transition: transform .08s ease;
}
.puerta:hover { transform: translateY(-1px); }
.puerta .bisagra { height: 7px; }
.puerta.libre .bisagra { background: var(--libre); }
.puerta.reservado .bisagra { background: var(--reservado); }
.puerta.ocupado .bisagra { background: var(--ocupado); }
.puerta .num { font-family: var(--mono); font-weight: 800; font-size: 1.25rem;
  letter-spacing: .04em; margin: 8px 0 0; }
.puerta .m2 { font-size: .72rem; color: var(--tinta-suave); }
.puerta .quien { font-size: .68rem; color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.puerta .banderin { position: absolute; top: 10px; right: 6px;
  font-size: .62rem; font-weight: 700; color: var(--oxido); }
.leyenda { display: flex; gap: 14px; font-size: .78rem; color: var(--tinta-suave);
  margin: 8px 0 12px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 4px; }

/* ---- login y formulario público ---- */
.centrado { max-width: 380px; margin: 8vh auto; padding: 0 16px; }
.centrado .marca { font-family: var(--mono); font-weight: 800; font-size: 1.3rem;
  letter-spacing: .08em; color: var(--metal-oscuro); margin-bottom: 14px; }
.resumen-oferta dt { font-size: .78rem; color: var(--tinta-suave); margin-top: 8px; }
.resumen-oferta dd { margin: 0; font-family: var(--mono); font-weight: 700; }
.total { border-top: 2px solid var(--metal); margin-top: 10px; padding-top: 8px; }

/* Incremento 12: línea manual de reparto en conciliación */
.linea-manual { display: inline-flex; gap: .4rem; align-items: center; }
.linea-manual input { width: 6.5rem; }