/* Base visual "Taller": industrial pero simple. Paleta fija, la misma para toda ferretería. */
:root {
  --carbon: #23272B;
  --amarillo: #F2B705;
  --fondo: #F2F3F3;
  --blanco: #fff;
  --texto: #1D1D1B;
  --borde: #CFCFCA;
  --ok: #166534; --ok-fondo: #DCFCE7;
  --aviso: #92400E; --aviso-fondo: #FEF3C7;
  --peligro: #991B1B; --peligro-fondo: #FEE2E2;
  --radio: 3px;
}
@font-face {
  font-family: "Barlow Condensed";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--fondo); color: var(--texto); line-height: 1.4; }
/* Franja de seguridad arriba de todo; el encabezado compartido va debajo. */
body::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(-45deg, #F2B705 0 10px, #23272B 10px 20px); }
main { max-width: 960px; margin: 1.25rem auto; padding: 0 1rem; }
h1, h2 { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--carbon); margin: 0 0 .75rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
a { color: var(--carbon); }
[hidden] { display: none !important; }

form, .barra { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
form.login { flex-direction: column; max-width: 320px; }
form.login input { flex: none; }
input, select, button, a.boton { font: inherit; min-height: 44px; padding: .5rem .75rem; border: 2px solid var(--carbon); border-radius: var(--radio); }
input, select { background: var(--blanco); color: var(--texto); border-color: var(--borde); border-width: 1px; border-bottom: 2px solid var(--carbon); }
input { flex: 1 1 10rem; }
input[type=checkbox], input[type=radio] { flex: none; min-height: 0; width: 1.5rem; height: 1.5rem; }
button, a.boton { background: var(--amarillo); color: var(--carbon); font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.sec, a.boton.sec { background: var(--blanco); }
button:hover, a.boton:hover { filter: brightness(.95); }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--carbon); outline-offset: 2px; box-shadow: 0 0 0 5px var(--amarillo); }

section { margin-top: 2rem; }
table { width: 100%; border-collapse: collapse; background: var(--blanco); }
th, td { text-align: left; padding: .6rem; border-bottom: 1px solid var(--borde); }
th { background: var(--carbon); color: var(--blanco); font-weight: 600; }
tbody tr:nth-child(even):not([class]) td { background: #F7F7F5; }
td.num, th.num { text-align: right; }

/* Semáforo fijo */
.error { color: var(--peligro); font-weight: 600; margin: .5rem 0; }
.aviso { background: var(--aviso-fondo); color: var(--aviso); border-left: 4px solid var(--aviso); padding: .8rem; border-radius: var(--radio); }
tr.negativo td { background: var(--peligro-fondo); color: var(--peligro); font-weight: 700; }
tr.rojo td { background: var(--peligro-fondo); color: var(--peligro); }
tr.bajo td, tr.amarillo td { background: var(--aviso-fondo); color: var(--aviso); }
.baja { color: var(--aviso); font-weight: 700; }
.anulado { text-decoration: line-through; color: #6B6B66; }
tr.formulario td { background: var(--fondo); }

.lado { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.vista { flex: 1; min-width: 0; position: sticky; top: .5rem; }
.vista img, .vista iframe { width: 100%; border: 1px solid var(--borde); background: var(--blanco); }
.vista iframe { height: 80vh; }
.tabla-scroll { flex: 1.6; min-width: 0; overflow-x: auto; }
@media (max-width: 700px) {
  .lado { flex-direction: column; }
  .vista { position: static; width: 100%; }
  .tabla-scroll { width: 100%; }
  main table { display: block; overflow-x: auto; } /* las tablas se desplazan dentro de su caja */
}

/* Encabezado común */
.encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: var(--carbon); color: var(--blanco); padding: .5rem 1rem; }
.encabezado a { color: var(--blanco); }
.encabezado .logo { font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 600; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; color: var(--amarillo); min-height: 44px; display: inline-flex; align-items: center; }
.encabezado .ferreteria { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.encabezado .menu { order: 3; flex: 1 1 100%; }
.encabezado .menu summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 700; }
.encabezado .menu nav { display: flex; flex-direction: column; }
.encabezado .menu nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .5rem; text-decoration: none; border-bottom: 3px solid transparent; }
.encabezado .menu nav a[aria-current="page"] { border-bottom-color: var(--amarillo); font-weight: 700; }
.encabezado :focus-visible { outline-color: var(--blanco); box-shadow: 0 0 0 5px var(--amarillo); }
@media (min-width: 720px) {
  .encabezado .menu summary { display: none; }
  .encabezado .menu nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
}
.encabezado .salir { min-height: 44px; }
.verificacion:empty { display: none; }
.pista { margin: .5rem 0; font-weight: 700; }
.pista:empty { display: none; }