:root {
  --azul: #1f4e78;
  --azul-medio: #2e6da4;
  --azul-claro: #dce8f4;
  --fondo: #f2f4f6;
  --panel: #ffffff;
  --tinta: #1c2430;
  --gris: #66707c;
  --linea: #d6dbe1;
  --verde: #2f9e5a;
  --verde-suave: #d8f0e0;
  --amarillo: #f2c230;
  --amarillo-suave: #fdf3cf;
  --rojo: #d6453d;
  --rojo-suave: #fadbd8;
  --radio: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--azul-medio); }

/* ---------------------------------------------------------------- encabezado */
header {
  background: var(--azul);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
header .barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}
header .marca { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
header .marca span { font-weight: 400; opacity: 0.8; }
header .proyecto { font-size: 0.85rem; opacity: 0.85; white-space: nowrap; }
header .quien { margin-left: auto; font-size: 0.85rem; white-space: nowrap; }
header .quien a { color: #fff; opacity: 0.85; margin-left: 0.6rem; }
nav {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.75rem;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.15);
  scrollbar-width: none;
}
nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  font-size: 0.92rem;
  border-bottom: 3px solid transparent;
  opacity: 0.85;
}
nav a.activo { border-bottom-color: #fff; opacity: 1; font-weight: 600; }

main { max-width: 1500px; margin: 0 auto; padding: 1rem; }
main.angosto { max-width: 760px; }
h1 { font-size: 1.35rem; margin: 0.2rem 0 0.3rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; color: var(--azul); }
p.nota, .nota { color: var(--gris); font-size: 0.88rem; }

/* ---------------------------------------------------------------- piezas */
.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  margin: 0 0 1rem;
}
.aviso { padding: 0.7rem 1rem; border-radius: var(--radio); margin: 0 0 1rem; }
.aviso.ok { background: var(--verde-suave); color: #1d5e37; }
.aviso.error { background: var(--rojo-suave); color: #8a231d; }
.aviso.alerta { background: var(--amarillo-suave); color: #5c4700; }
.aviso ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

label { display: block; font-size: 0.85rem; color: var(--gris); margin-bottom: 0.2rem; }
input, select, textarea {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: #fff;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-medio); border-color: transparent; }
.campos { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: flex-end; }

.boton, button {
  font: inherit;
  display: inline-block;
  background: var(--azul-medio);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}
.boton.secundario, button.secundario { background: #fff; color: var(--azul-medio); border: 1px solid var(--azul-medio); }
.boton.peligro, button.peligro { background: var(--rojo); }
button.enlace { background: none; color: var(--azul-medio); padding: 0; font-weight: 400; text-decoration: underline; }
button:disabled { opacity: 0.5; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.8rem 0; }

/* ---------------------------------------------------------------- inicio */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.acceso {
  display: block;
  background: var(--panel);
  border: 1px solid var(--linea);
  border-left: 5px solid var(--azul-medio);
  border-radius: var(--radio);
  padding: 0.9rem 1rem;
  color: var(--tinta);
  text-decoration: none;
}
.acceso strong { display: block; font-size: 1.05rem; color: var(--azul); }
.acceso span { font-size: 0.85rem; color: var(--gris); }
.acceso.captura { border-left-color: var(--verde); }

/* ---------------------------------------------------------------- tablas */
.tabla-ancha { overflow-x: auto; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--linea); text-align: center; white-space: nowrap; }
th { background: var(--azul-claro); color: var(--azul); font-weight: 600; font-size: 0.82rem; }
td.izq, th.izq { text-align: left; }
tr.total td { font-weight: 700; background: #f7f9fb; border-top: 2px solid var(--linea); }
td.marca, th.marca { text-align: left; font-weight: 700; position: sticky; left: 0; background: inherit; z-index: 1; }
tbody tr { background: #fff; }
tbody tr:hover { background: #f8fafc; }
.separa { border-left: 2px solid #9fb6cc; }
td.vacio { color: #b6bdc6; }

/* semáforo */
.verde { background: var(--verde); color: #fff; font-weight: 600; }
.amarillo { background: var(--amarillo); color: #3b2e00; font-weight: 600; }
.rojo { background: var(--rojo); color: #fff; font-weight: 600; }
.chip { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 99px; font-size: 0.85rem; }
.leyenda { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--gris); margin: 0.5rem 0; }
.leyenda .chip { margin-right: 0.25rem; }

/* cuadro de despachos */
.cuadro th.fecha { font-size: 0.95rem; background: var(--azul); color: #fff; }
.cuadro th.fecha a { color: #fff; }
.cuadro th.torres { font-weight: 600; background: #eef3f8; }
.cuadro th.pasado { background: #6f8196; }
.cuadro td.cump { min-width: 4.2rem; }

/* avance por torre */
.torres td .celda { display: block; line-height: 1.2; }
.torres td small { color: var(--gris); font-size: 0.75rem; }
.torres td.verde small, .torres td.rojo small { color: rgba(255, 255, 255, 0.85); }
.pestanas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.pestanas a { padding: 0.35rem 0.8rem; border-radius: 99px; background: #fff; border: 1px solid var(--linea);
              text-decoration: none; color: var(--tinta); font-size: 0.9rem; }
.pestanas a.activo { background: var(--azul-medio); color: #fff; border-color: var(--azul-medio); }

/* ---------------------------------------------------------------- captura (celular) */
.selector-torres { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.selector-torres a {
  display: block; text-align: center; padding: 0.8rem 0.4rem; border-radius: var(--radio);
  background: #fff; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); font-weight: 600;
}
.selector-torres a.activo { background: var(--azul-medio); color: #fff; border-color: var(--azul-medio); }
.etapa-titulo { font-size: 0.85rem; color: var(--gris); margin: 0.8rem 0 0.35rem; }
.torres-plegables { margin-top: 0.8rem; }
.torres-plegables summary { cursor: pointer; color: var(--azul-medio); font-weight: 600; padding: 0.3rem 0; }

.captura td input { width: 5.2rem; text-align: center; font-size: 1.05rem; padding: 0.45rem 0.3rem; }
.captura td input.con-error { border: 2px solid var(--rojo); background: var(--rojo-suave); }
.captura td .error-celda { display: block; color: var(--rojo); font-size: 0.78rem; white-space: normal; max-width: 12rem; margin: 0.2rem auto 0; }
.captura td .llevamos { font-size: 0.8rem; color: var(--gris); display: block; }
.captura td.no-aplica { color: #b6bdc6; font-size: 0.85rem; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 5; background: rgba(242, 244, 246, 0.96); padding: 0.7rem 0;
  border-top: 1px solid var(--linea); display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
}
.barra-guardar button { padding: 0.75rem 1.6rem; font-size: 1.05rem; }

/* despacho editor */
.editor td input { width: 4.4rem; text-align: center; padding: 0.35rem 0.2rem; }
.editor td .libre { display: block; font-size: 0.75rem; color: var(--gris); }
.editor td.cero input { color: #9aa3ad; }
.lista-torres { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.3rem 0 0.8rem; }
.lista-torres label { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--tinta); font-size: 0.95rem; margin: 0; }

.espera { position: fixed; inset: 0; background: rgba(28, 36, 48, 0.35); display: grid; place-items: center; z-index: 50; }
.espera[hidden] { display: none; }
.espera div { background: #fff; padding: 1rem 1.5rem; border-radius: var(--radio); font-weight: 600; }

footer { text-align: center; color: var(--gris); font-size: 0.8rem; padding: 2rem 1rem; }

@media (max-width: 640px) {
  main { padding: 0.75rem; }
  header .proyecto, header .marca span { display: none; }
  header .barra { gap: 0.5rem; }
  header .quien { font-size: 0.8rem; }
  header .quien a { margin-left: 0.4rem; }
  .barra-guardar .nota { display: none; }
  .barra-guardar button { width: 100%; }
  th, td { padding: 0.35rem 0.4rem; }
}
@media print {
  header, nav, .acciones, .no-imprimir, footer { display: none !important; }
  main { max-width: none; padding: 0; }
  .tabla-ancha { overflow: visible; border: 0; }
  .verde, .amarillo, .rojo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- planilla diaria (computador) */
p.fijo { margin: 0; padding: 0.5rem 0; font-weight: 600; }
.interruptor { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--tinta); font-size: 0.9rem; margin: 0; }
.planilla td { padding: 0.2rem 0.35rem; }
.planilla tbody.bloque { border-top: 2px solid #9fb6cc; }
.planilla td.marca-bloque { text-align: left; vertical-align: top; background: #f7f9fb; min-width: 5.5rem; }
.planilla td.marca-bloque strong { display: block; font-size: 1rem; color: var(--azul); }
.planilla td.marca-bloque span { font-size: 0.78rem; color: var(--gris); }
.planilla td.ref { text-align: left; font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.85rem; }
.planilla td.acabado { font-size: 0.8rem; color: var(--gris); vertical-align: top; white-space: normal; max-width: 7rem; }
.planilla input { width: 4.2rem; text-align: center; padding: 0.3rem 0.2rem; }
.planilla input.cambiado { background: var(--amarillo-suave); border-color: var(--amarillo); }
.planilla input.con-error { border: 2px solid var(--rojo); background: var(--rojo-suave); }
.planilla .error-celda { display: block; color: var(--rojo); font-size: 0.75rem; white-space: normal; max-width: 9rem; margin: 0.15rem auto 0; }
.planilla .no-aplica { color: #c3c9d0; }
.planilla .llevan { display: none; font-size: 0.72rem; color: var(--gris); }
body.ver-llevan .planilla .llevan { display: block; }

/* ---------------------------------------------------------------- informes */
.informe td, .informe th { text-align: right; }
.informe td.izq, .informe th.izq { text-align: left; }
.informe tr.semana td { font-weight: 700; background: #f7f9fb; border-top: 2px solid var(--linea); }
.informe tr.semana.actual td { background: var(--azul-claro); }
.informe tr.parte td { color: #3d4652; }
.informe tr.parte td.izq { padding-left: 1.6rem; }
.informe td.cero { color: #c3c9d0; }
.resumen-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.resumen-cifras div { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.6rem 0.8rem; }
.resumen-cifras span { display: block; font-size: 0.8rem; color: var(--gris); }
.resumen-cifras strong { font-size: 1.35rem; color: var(--azul); }
details.torre-detalle summary { cursor: pointer; }
/* El color del avance manda sobre el fondo de la fila de la torre. */
.informe tr.semana td.verde { background: var(--verde); }
.informe tr.semana td.amarillo { background: var(--amarillo); }
.informe tr.semana td.rojo { background: var(--rojo); }

/* selector de marca de la planilla */
.selector-marcas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.selector-marcas a { padding: 0.45rem 0.9rem; border-radius: 6px; background: #fff; border: 1px solid var(--linea);
                     text-decoration: none; color: var(--tinta); font-weight: 600; position: relative; }
.selector-marcas a.activo { background: var(--azul-medio); color: #fff; border-color: var(--azul-medio); }
.selector-marcas a.anotada::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px;
                                    border-radius: 50%; background: var(--verde); }
.selector-marcas a.todas { font-weight: 400; color: var(--gris); }

/* ---------------------------------------------------------------- producción / instalación */
/* La instalación lleva otro color de encabezado: se nota de un vistazo en qué módulo se está. */
header.obra { background: #2d5a3d; }
nav a.cambiar { margin-left: auto; opacity: 0.75; font-size: 0.85rem; }
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0; max-width: 820px; }
.modulo {
  display: block; background: var(--panel); border: 1px solid var(--linea); border-top: 6px solid var(--azul);
  border-radius: var(--radio); padding: 1.4rem 1.3rem; text-decoration: none; color: var(--tinta);
}
.modulo:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.modulo.obra { border-top-color: #2d5a3d; }
.modulo strong { display: block; font-size: 1.5rem; letter-spacing: 0.04em; color: var(--azul); margin-bottom: 0.3rem; }
.modulo.obra strong { color: #2d5a3d; }
.modulo span { color: var(--gris); font-size: 0.9rem; }
.modulo em { display: block; font-style: normal; font-size: 0.8rem; color: var(--verde); margin-top: 0.6rem; }
table.planilla td.piso-bloque { font-weight: 700; color: var(--azul); vertical-align: top; white-space: nowrap; }
.pendientes { color: var(--rojo); font-weight: 600; }

/* ---------------------------------------------------------------- tablas compactas (sep-28) */
table { font-size: 0.84rem; width: auto; min-width: 0; }
table.compacta, table.informe, table.planilla { width: auto; }
th, td { padding: 0.22rem 0.45rem; }
th { font-size: 0.76rem; line-height: 1.2; }
.planilla input { width: 3.4rem; padding: 0.2rem 0.15rem; }
td small { display: block; font-size: 0.7rem; opacity: 0.85; line-height: 1.1; }
.informe tr.grupo td { background: var(--azul); color: #fff; font-weight: 600; text-align: left; }
.planilla .llevan.verde, .planilla .llevan.amarillo, .planilla .llevan.rojo { border-radius: 3px; padding: 0 0.2rem; }
.planilla tr.completas td { background: #f7f9fb; border-top: 1px dashed var(--linea); }
.planilla tr.completas input { border-color: var(--azul-medio); }
td.ajustada { background: var(--amarillo-suave); }
td.ajustada input { font-weight: 600; }
label.volver { display: inline-flex; gap: 0.1rem; align-items: center; margin: 0 0 0 0.2rem; font-size: 0.8rem; }
nav.indice { width: 100%; font-size: 0.85rem; margin-top: 0.3rem; background: none; padding: 0; }
nav.indice a { color: var(--azul-medio); padding: 0; border: 0; opacity: 1; }
table.accesos th { max-width: 7rem; white-space: normal; }
table.acumulado td { min-width: 5.5rem; }
.leyenda { margin: 0; }
.tabla-ancha { display: inline-block; max-width: 100%; vertical-align: top; }
/* «lo que llevan» debajo de cada casilla: solo el texto en color, sin fondo. */
.planilla .llevan.verde, .planilla .llevan.amarillo, .planilla .llevan.rojo { background: none; font-weight: 600; padding: 0; }
.planilla .llevan.verde { color: var(--verde); }
.planilla .llevan.amarillo { color: #a07a00; }
.planilla .llevan.rojo { color: var(--rojo); }
.planilla td.marca-bloque span { display: block; }

/* ---------------------------------------------------------------- ingreso diario de instalación */
.planilla tr.grupo td { background: #2d5a3d; color: #fff; font-weight: 700; text-align: left; }
.planilla tr.subgrupo td { background: var(--azul-claro); color: var(--azul); font-weight: 600; text-align: left; font-size: 0.85rem; }
.ingreso-obra th { font-size: 0.72rem; max-width: 6.5rem; white-space: normal; line-height: 1.15; }
.ingreso-obra input { width: 3.2rem; }
/* El avance de la marca en ese hito, sin tapar la casilla: un borde de color abajo. */
.ingreso-obra td.hecho-verde { box-shadow: inset 0 -3px 0 var(--verde); }
.ingreso-obra td.hecho-amarillo { box-shadow: inset 0 -3px 0 var(--amarillo); }
.ingreso-obra td.hecho-rojo { box-shadow: inset 0 -3px 0 var(--rojo); }

/* planilla: título fijo al bajar, y la fila de la marca (vidrios+empaque, embalaje) */
.tabla-fija { max-height: calc(100vh - 170px); overflow: auto; }
.tabla-fija thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--linea); }
.planilla td.por-marca { background: #eef1f4; }
.planilla tr.fila-marca td { background: #f7f9fb; border-top: 1px dashed var(--linea); }
.planilla tr.fila-marca input { border-color: var(--azul-medio); }

/* Títulos de columna en dos líneas: la columna toma el ancho de su contenido
   y el título se parte en las palabras (y después de «+»). */
th { white-space: normal; width: 1px; line-height: 1.15; vertical-align: bottom; }
th.izq, th.marca { width: auto; }
/* Líneas verticales en toda la tabla (ingreso diario). */
table.con-lineas { border: 1px solid var(--linea); }
table.con-lineas th, table.con-lineas td { border-left: 1px solid var(--linea); border-right: 1px solid var(--linea); }
table.con-lineas thead th { border-bottom: 1px solid #b8c7d6; }

/* ---------------------------------------------------------------- todas las tablas (29-sep)
   Líneas verticales en toda la tabla, títulos incluidos, y la fila de títulos
   fija al bajar. Con bordes «colapsados» los títulos fijos pierden sus líneas,
   por eso van separados (sin espacio entre celdas). La tabla baja dentro de
   su recuadro, que ocupa a lo sumo el alto de la pantalla. */
table { border-collapse: separate; border-spacing: 0; }
th, td { border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); border-left: 0; }
th { border-right-color: #b8c7d6; border-bottom-color: #b8c7d6; }
tr > :last-child { border-right: 0; }
.tabla-ancha { max-height: calc(100vh - 170px); overflow: auto; }
.tabla-ancha thead { position: sticky; top: 0; z-index: 4; }
table.con-lineas { border: 0; }
table.con-lineas th, table.con-lineas td { border-left: 0; }
/* Líneas verticales más oscuras, y títulos centrados en todas las columnas. */
th, td { border-right-color: #a9b5c1; }
th { border-right-color: #8fa3b8; }
th { text-align: center !important; }   /* manda sobre los .izq de cada tabla */
table.con-lineas td { border-right-color: #a9b5c1; }
table.con-lineas th { border-right-color: #8fa3b8; }

/* ---------------------------------------------------------------- títulos más pequeños (1-oct) */
th { font-size: 0.68rem; padding: 0.15rem 0.3rem; line-height: 1.1; font-weight: 600; }
.ingreso-obra th { font-size: 0.64rem; max-width: 7.5rem; }
.planilla th { font-size: 0.66rem; }
/* Acumulado de instalación: los apartamentos dentro de un piso abierto. */
.informe tr.apto td { font-size: 0.8rem; }
.informe tr.apto td.izq { padding-left: 2.2rem; }