/* Paleta AZUL (ley 36, 21/10/2026; usuario: «los tonos azules de Gabi, que están muy bonitos»; logo en BLANCO).
   Los nombres de las variables son los de antes (madera…) para no tocar cada regla: ahora son azules. La madera
   queda sólo como una línea fina bajo la barra (--veta), la firma de Timberline. */
:root {
  --fondo: #EEF1F6;          /* fondo general, gris azulado muy claro */
  --superficie: #FFFFFF;     /* tarjetas */
  --madera: #1B3866;         /* cabeceras de tabla, enlaces */
  --madera-oscura: #102341;  /* títulos */
  --accion: #1F6DD6;         /* lo que se pulsa */
  --accion-claro: #2F9DFF;
  --veta: #A9733F;           /* SÓLO la línea de madera bajo la barra */
  --linea: #9FB0C8;          /* bordes de casillas, tablas y pestañas (antes, la madera) */
  --texto: #23272F;
  --texto-suave: #667085;
  --aviso: #B54708;
  --barra: #060B18;          /* barra de arriba, azul casi negro */
  --borde: #DCE2EA;
}

* { box-sizing: border-box; }

/* `hidden` manda siempre: sin esto, una regla con display:flex lo enseñaba igual. */
[hidden] { display: none !important; }

a { color: var(--madera); }
a:hover { color: var(--accion); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

header.barra {
  background: var(--barra);
  color: #FFFFFF;
  padding: 12px 20px;
  font-weight: 600;
  letter-spacing: .5px;
  border-bottom: 3px solid var(--veta);
}

/* Ancho: la web usa la pantalla (ley 36; antes 760 px y la tabla de Projects se cortaba con la pantalla libre). */
main { max-width: 1400px; margin: 32px auto; padding: 0 24px; }

h1 { color: var(--madera-oscura); font-size: 22px; margin: 0 0 4px; }

.suave { color: var(--texto-suave); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 35, 65, .06);
  padding: 18px 20px;
  margin-top: 20px;
}

.ok { color: var(--madera-oscura); font-weight: 600; }
.aviso { color: var(--aviso); font-weight: 600; }

button {
  background: var(--accion);
  color: #fff;
  border: 0;
  padding: 9px 17px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--accion-claro); }

header.barra { display: flex; justify-content: space-between; align-items: center; }
.sesion { display: flex; align-items: center; gap: 12px; font-weight: 400; }

button.secundario {
  background: transparent;
  color: var(--fondo);
  border: 1px solid color-mix(in srgb, var(--fondo) 60%, transparent);
  padding: 5px 12px;
}
button.secundario:hover { background: #1B3866; }
button:disabled { opacity: .6; cursor: wait; }

/* Login */
main.login { max-width: 380px; }
main.login form { display: flex; flex-direction: column; gap: 6px; }
main.login label { color: var(--madera-oscura); font-weight: 600; font-size: 14px; margin-top: 8px; }
main.login input {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: var(--fondo);
  color: var(--texto);
}
main.login input:focus { outline: 2px solid var(--accion-claro); outline-offset: 1px; }
main.login button[type=submit] { margin-top: 16px; }
main.login .aviso { margin: 10px 0 0; }

/* Deshacer / Rehacer (public/deshacer.js) — va junto al área de edición */
.deshacer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
button.secundario-claro {
  background: transparent;
  color: var(--madera);
  border: 1px solid var(--linea);
  padding: 6px 12px;
}
button.secundario-claro:hover:not(:disabled) { background: var(--superficie); }
button.secundario-claro:disabled { opacity: .45; cursor: not-allowed; }
.deshacer-info { font-size: 13px; }
.deshacer-aviso { flex-basis: 100%; font-size: 14px; }

/* ── Lista de obras ─────────────────────────────────────────── */
main.ancho { max-width: 1400px; }
.titulo-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista { padding: 0; overflow-x: auto; }
.lista > p { padding: 18px 20px; margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: var(--madera); color: var(--fondo); text-align: left; padding: 9px 12px; font-weight: 600; }
td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 25%, transparent); }
tbody tr[data-codigo] { cursor: pointer; }
tbody tr[data-codigo]:hover, tbody tr[data-codigo]:focus { background: var(--fondo); outline: none; }
.codigo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--madera-oscura); white-space: nowrap; }
.estado { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--linea); color: var(--madera-oscura); background: var(--fondo); }
.estado-won { background: var(--madera); color: var(--fondo); border-color: var(--madera); }
.estado-lost { color: var(--texto-suave); border-color: color-mix(in srgb, var(--texto-suave) 50%, transparent); }
.pie { margin-top: 28px; font-size: 13px; }

.nueva .fila-campo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.nueva input { flex: 1 1 220px; }
.nueva .pista { font-size: 13px; margin: 8px 0 0; }
.nueva label { color: var(--madera-oscura); font-weight: 600; font-size: 14px; }

/* ── Campos de formulario (login, nueva obra, brief) ───────── */
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=search], input:not([type]), select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 7px;
  background: var(--fondo); color: var(--texto); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accion-claro); outline-offset: 1px; }
textarea { resize: vertical; line-height: 1.5; }

/* ── Brief ──────────────────────────────────────────────────── */
.volver { color: var(--madera); text-decoration: none; font-size: 14px; }
.volver:hover { text-decoration: underline; }
main.ancho h1 { margin-top: 10px; }
main.ancho > .codigo { margin: 2px 0 18px; }
.acciones {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--fondo); padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--linea) 30%, transparent);
}
#mensaje { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--aviso); border-radius: 8px; background: color-mix(in srgb, var(--aviso) 6%, var(--fondo)); }
#mensaje ul { margin: 6px 0 0; padding-left: 20px; }
.grupo { border: 1px solid color-mix(in srgb, var(--linea) 35%, transparent); border-radius: 10px; background: var(--superficie);
  margin: 18px 0 0; padding: 12px 18px 16px; min-width: 0; /* un fieldset crece con su contenido; así la tabla se desplaza dentro */ }
.grupo legend { color: var(--madera-oscura); font-weight: 700; padding: 0 6px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.ancho-total { grid-column: 1 / -1; }
.etiqueta { color: var(--madera-oscura); font-weight: 600; font-size: 13px; }
.obligatorio { color: var(--aviso); }
.casillas { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.casilla { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.casilla input { accent-color: var(--accion); width: 16px; height: 16px; }

.codigo-movil { display: none; }

@media (max-width: 600px) {
  main { margin: 20px auto; }
  .col-codigo { display: none; }
  .codigo-movil { display: block; font-size: 11px; margin-top: 2px; white-space: normal; word-break: break-all; }
  th:nth-child(5), td:nth-child(5), th:nth-child(6), td:nth-child(6) { display: none; }
}

/* ── Pestañas de la obra ────────────────────────────────────── */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid color-mix(in srgb, var(--linea) 35%, transparent); margin: 6px 0 16px; }
.pestanas a { padding: 8px 16px; color: var(--madera); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a[href]:hover { color: var(--accion); }
.pestanas a.activa { color: var(--madera-oscura); border-bottom-color: var(--accion); }

/* ── Intake ─────────────────────────────────────────────────── */
.zona { border: 2px dashed var(--linea); border-radius: 12px; background: var(--superficie); padding: 22px; text-align: center; cursor: pointer; }
.zona p { margin: 4px 0; }
.zona.encima { border-color: var(--accion); background: color-mix(in srgb, var(--accion-claro) 12%, var(--superficie)); }
.zona:focus { outline: 2px solid var(--accion-claro); outline-offset: 2px; }
.subidas { list-style: none; padding: 0; margin: 12px 0 0; }
.subidas li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); font-size: 14px; }
.subidas progress { flex: 1 1 120px; accent-color: var(--accion); }
.subidas .resultado { flex-basis: 100%; }
#aviso { margin: 12px 0; }
.suave-aviso { color: var(--texto); }
.grupo h2 { font-size: 16px; color: var(--madera-oscura); margin: 0 0 8px; }
.archivos { list-style: none; padding: 0; margin: 0; }
.archivos li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
.archivos .dato { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.archivos .nombre { color: var(--madera-oscura); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.archivos .nombre:hover { color: var(--accion); text-decoration: underline; }
.archivos .dato .suave { font-size: 13px; }
.archivos.miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--linea) 40%, transparent); display: block; }

/* ── Perfil: tabla de partidas ──────────────────────────────── */
.intro { margin: 0 0 6px; font-size: 14px; }
.avisos { margin: 12px 0; padding: 10px 14px; border-radius: 8px; border: 1px solid #D9B44A; background: #FFF6D6; color: var(--texto); }
.avisos ul { margin: 6px 0 0; padding-left: 20px; }
.tabla-partidas { overflow-x: auto; margin: 0 -6px; }
#partidas { min-width: 1040px; }
#partidas td:nth-child(1) { width: 130px; }
#partidas td:nth-child(4) { width: 120px; }
#partidas td:nth-child(5) { width: 125px; }
#partidas td:nth-child(6) { width: 150px; }
#partidas th { font-size: 12px; padding: 7px 6px; white-space: nowrap; }
#partidas td { padding: 4px 3px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
#partidas input, #partidas select { padding: 6px 7px; font-size: 14px; }
#partidas td:nth-child(2) { min-width: 200px; }
#partidas td:nth-child(7) { min-width: 140px; }
#partidas .num, #partidas .num input { text-align: right; width: 90px; }
#partidas tr.falta td { background: #FFF6D6; }   /* cantidad desconocida: amarillo (§ 2.11) */
.quitar-fila { background: transparent; color: var(--texto-suave); padding: 4px 8px; font-size: 14px; }
.quitar-fila:hover { background: var(--fondo); color: var(--aviso); }
.pie-partidas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.totales { margin: 10px 0 0; font-size: 13px; }

/* ── Navegación principal (cabecera) ────────────────────────── */
header.barra > span:first-child { display: flex; align-items: center; gap: 22px; }
nav.principal { display: flex; gap: 4px; font-weight: 500; letter-spacing: 0; }
nav.principal a { color: color-mix(in srgb, var(--fondo) 80%, transparent); text-decoration: none; padding: 4px 10px; border-radius: 6px; }
nav.principal a:hover { color: #FFFFFF; background: #1B3866; }
nav.principal a.activa { color: #FFFFFF; background: #1B3866; }
@media (max-width: 600px) { header.barra > span:first-child { gap: 8px; } nav.principal a { padding: 4px 6px; } .sesion #quien { display: none; } }

/* ── Biblioteca ─────────────────────────────────────────────── */
h2 { font-size: 17px; color: var(--madera-oscura); margin: 0 0 8px; }
.pequeno { font-size: 12px; }
.motor { margin: 14px 0; padding: 12px 14px; border-radius: 8px; border: 1px solid #D9B44A; background: #FFF6D6; }
code { background: var(--fondo); padding: 2px 6px; border-radius: 5px; font-size: 13px; overflow-wrap: anywhere; }
.candidatos, .trabajos { list-style: none; padding: 0; margin: 8px 0 12px; }
.trabajos li > span > b + * { margin-left: 0; }
.candidatos li, .trabajos li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
.trabajos li > span { display: flex; flex-direction: column; gap: 2px; }
.trabajo-failed b, .trabajo-interrupted b { color: var(--aviso); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros input, .filtros select { width: auto; }
.desplaza { overflow-x: auto; }
.lista-precedentes table { min-width: 860px; }
.lista-precedentes tbody tr[data-id] { cursor: pointer; }
.lista-precedentes tbody tr[data-id]:hover, .lista-precedentes tbody tr[data-id]:focus { background: var(--fondo); outline: none; }
td.num, th.num { text-align: right; }
.revision { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--linea); }
.revision-reviewed { background: var(--madera); color: var(--fondo); border-color: var(--madera); }
.revision-unreviewed { background: var(--fondo); color: var(--madera-oscura); }
.revision-doubtful { background: #FFF6D6; color: var(--aviso); border-color: #D9B44A; }
.ajustes { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.ajustes label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--madera-oscura); font-size: 14px; }
.zonas { margin: 6px 0; }
.zonas td { padding: 3px; border: 0; }
.tarjeta h2 + p { margin-top: 0; }

/* ── Ficha de precedente ────────────────────────────────────── */
.revision-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 4px; }
.metricas { margin-top: 14px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.cifras > div { display: flex; flex-direction: column; gap: 2px; }
.cifras b { font-size: 20px; color: var(--madera-oscura); }
#partidas.con-precios { min-width: 1260px; }
#partidas.con-precios td:nth-child(7), #partidas.con-precios td:nth-child(8) { width: 120px; }
#partidas.con-precios td:nth-child(7) input, #partidas.con-precios td:nth-child(8) input { text-align: right; }

/* ── Estimado ───────────────────────────────────────────────── */
.trabajo-en-curso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; background: var(--fondo); border-radius: 8px; }
.pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--accion); animation: pulso 1.2s infinite ease-in-out; }
@keyframes pulso { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }
.precedentes-usados { list-style: none; padding: 0; margin: 4px 0; }
.precedentes-usados li { padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
.precedentes-usados li.no-usado a { color: var(--texto-suave); }
.puntos { display: inline-block; font-size: 12px; font-weight: 700; color: var(--madera-oscura); background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: 0 7px; }
.cifras.tarjeta { margin-top: 0; }
.confianza-low { color: var(--aviso); }
.confianza-high { color: var(--madera); }
.markup { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: var(--madera-oscura); font-size: 14px; max-width: 280px; }
.estimado-tabla { min-width: 1180px; }
.estimado-tabla td { padding: 4px 3px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
.estimado-tabla input, .estimado-tabla select { padding: 6px 7px; font-size: 14px; }
.estimado-tabla td.num { white-space: nowrap; }
.estimado-tabla td.num input { text-align: right; width: 100px; }
.estimado-tabla td:nth-child(9) select { min-width: 120px; }
.estimado-tabla td:nth-child(2) { min-width: 200px; }
.estimado-tabla td:nth-child(10) { min-width: 260px; }
.estimado-tabla td.total { font-weight: 700; white-space: nowrap; }
.estimado-tabla tr.falta td { background: #FFF6D6; }
.estimado-tabla tr.excluida td { color: var(--texto-suave); text-decoration: line-through; }
.estimado-tabla tr.excluida input { text-decoration: line-through; }
.rombo { color: var(--linea); margin-right: 3px; font-size: 11px; }
.boton-enlace { display: inline-block; padding: 6px 12px; border-radius: 7px; text-decoration: none; font-weight: 600; font-size: 14px; cursor: pointer; }
a.secundario-claro { color: var(--madera); border: 1px solid var(--linea); }
a.secundario-claro:hover { background: var(--superficie); }
.listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px; }

/* ── Logo ───────────────────────────────────────────────────── */
/* El PNG tiene fondo transparente: se usa como MÁSCARA, así el color lo pone
   la hoja de estilos (crema sobre la barra, nogal sobre el fondo claro). */
.logo, .logo-grande {
  display: inline-block;
  -webkit-mask: url(logo.png) left center / contain no-repeat;
          mask: url(logo.png) left center / contain no-repeat;
}
header.barra .logo { width: 128px; height: 30px; background-color: #FFFFFF; }
header.barra .logo:hover { background-color: #FFFFFF; }
.logo-grande { display: block; width: 100%; max-width: 360px; height: 82px; background-color: var(--madera-oscura); margin: 4px 0 2px; }
.subtitulo-app { margin: 0 0 22px; letter-spacing: .5px; }
@media (max-width: 600px) { header.barra .logo { width: 96px; height: 24px; } }
.vendido { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: .4px; background: var(--madera-oscura); color: var(--fondo); white-space: nowrap; }

/* ── Tipo de estimado / vendido ─────────────────────────────── */
.opciones-tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 9px; background: var(--fondo); cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--madera); box-shadow: inset 0 0 0 1px var(--madera); }
.opcion input { accent-color: var(--accion); margin-top: 3px; }
.opcion > span { display: flex; flex-direction: column; gap: 2px; }
.fila-tipo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.fila-tipo label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 14px; color: var(--madera-oscura); min-width: 200px; }
#vendido-resumen { margin-top: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--linea) 30%, transparent); }
.boton-cifra { justify-content: center; }
.semaforo { white-space: nowrap; font-size: 13px; font-weight: 600; }
.semaforo-tight { color: var(--aviso); }
.estimado-tabla.con-presupuesto { min-width: 1500px; }
.estimado-tabla input.sin-presupuesto { background: #FFF6D6; }

/* ── Lo que puso la IA (Process intake): «AI — to review» hasta que se acepta ── */
.marca-ia { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; background: #E4ECF7; color: #2D5486; border: 1px solid #9DB5D6; cursor: pointer; vertical-align: middle; }
button.marca-ia:hover { background: #2D5486; color: #fff; }
.marca-ia.estatica { cursor: default; }
#partidas tr[data-revisar="1"] td, #finishes tr[data-revisar="1"] td { background: #EEF3FA; }
#partidas tr[data-revisar="1"].falta td { background: #FFF6D6; }
#partidas td:has(> .marca-ia) { white-space: nowrap; }
#partidas td:has(> .marca-ia) input { width: calc(100% - 40px); }
.campo.de-ia input, .campo.de-ia select, .campo.de-ia textarea { background: #EEF3FA; }
.aviso-ia { margin: 10px 0; padding: 10px 12px; border-radius: 6px; background: #EEF3FA; border: 1px solid #C5D5EA; font-size: 14px; }
#partidas input.corto, #finishes input.corto { width: 100px; }
#finishes { width: 100%; border-collapse: collapse; }
#finishes th { font-size: 12px; padding: 7px 6px; text-align: left; }
#finishes td { padding: 4px 3px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
#finishes input { padding: 6px 7px; font-size: 14px; width: 100%; }
#finishes td:first-child { width: 160px; white-space: nowrap; }
#finishes td:first-child input { width: 100px; }
.resultado-ia { margin: 14px 0; padding: 14px 16px; }
.resultado-ia ul { margin: 6px 0 0 18px; padding: 0; }
#partidas.con-takeoff td:nth-child(8) { min-width: 160px; }  /* Location */
#partidas.con-takeoff td:nth-child(10) { min-width: 170px; } /* Found in */
#partidas.con-takeoff td:nth-child(11) { min-width: 140px; } /* Notes */
/* Botones de Excel junto a Save (regla «como en Gabi») */
.botones-excel { display: inline-flex; gap: 8px; margin-left: auto; }

/* ── Barra de avance (como en Gabi): el color va de azul a verde con el % ── */
.pbar-wrap { margin: 6px 0 10px; width: 100%; }
.pbar { position: relative; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--linea) 18%, transparent); overflow: visible; margin-top: 18px; }
.pbar-fill { height: 100%; border-radius: 6px; transition: width .6s ease, background .6s ease; }
.pbar-pct { position: absolute; top: -18px; transform: translateX(-50%); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pbar-fase { font-size: 13px; margin-top: 4px; color: var(--texto); }
#procesar-caja .trabajo-en-curso { flex-direction: column; align-items: stretch; }
.trabajo-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Estado de cada archivo del intake frente a «Process intake» */
.etiqueta-estado { display: inline-block; margin-top: 3px; font-size: 12px; padding: 1px 7px; border-radius: 4px; }
.etiqueta-estado.hecho { background: #E3F1E5; color: #2E6B3A; }
.etiqueta-estado.pendiente { background: #EEF3FA; color: #2D5486; }
.etiqueta-estado.aviso-estado { background: #FFF2D9; color: #8A5A12; }

/* ── Takeoff por áreas (como los planos, 04/10/2026) ── */
details.area { border: 1px solid color-mix(in srgb, var(--linea) 30%, transparent); border-radius: 8px; margin: 12px 0; background: var(--fondo); }
details.area > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--madera-oscura, var(--madera)); background: var(--superficie); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
details.area[open] > summary { border-radius: 8px 8px 0 0; }
details.area > summary .nombre-area { font-size: 16px; }
details.area > summary .cuenta { font-weight: 400; font-size: 13px; }
details.area > summary .subtotal-area { font-weight: 400; font-size: 13px; color: var(--texto); margin-left: auto; }
details.area > *:not(summary) { margin-left: 12px; margin-right: 12px; }
.acciones-area { display: flex; gap: 8px; margin: 10px 12px; }
.tabla-takeoff, .tabla-medidas, .tabla-totales { width: 100%; border-collapse: collapse; }
.tabla-takeoff th, .tabla-medidas th, .tabla-totales th { font-size: 12px; padding: 7px 6px; text-align: left; white-space: nowrap; background: var(--madera); color: #FAF6F1; }
.tabla-takeoff td, .tabla-medidas td, .tabla-totales td { padding: 4px 3px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); }
.tabla-takeoff input, .tabla-takeoff select, .tabla-medidas input, .tabla-medidas select { padding: 6px 7px; font-size: 14px; width: 100%; }
.tabla-takeoff input.corto, .tabla-medidas input.corto { min-width: 90px; }
.tabla-takeoff [data-k="elemento"], .tabla-medidas [data-k="elemento"] { min-width: 200px; }
.tabla-takeoff [data-k="fuente"], .tabla-medidas [data-k="fuente"] { min-width: 150px; }
.tabla-medidas input.medida { min-width: 250px; font-family: ui-monospace, Menlo, monospace; }
.tabla-takeoff .num, .tabla-takeoff .num input { text-align: right; width: 90px; }
.tabla-takeoff tr.falta td, .tabla-medidas tr.falta td { background: #FFF6D6; }
.tabla-takeoff tr[data-revisar="1"] td, .tabla-medidas tr[data-revisar="1"] td { background: #EEF3FA; }
.tabla-takeoff tr[data-revisar="1"].falta td, .tabla-medidas tr[data-revisar="1"].falta td { background: #FFF6D6; }
.tabla-takeoff td:has(> .marca-ia), .tabla-medidas td:has(> .marca-ia) { white-space: nowrap; }
.tabla-takeoff td:has(> .marca-ia) input, .tabla-medidas td:has(> .marca-ia) input { width: calc(100% - 40px); }
.titulo-medidas { margin: 16px 12px 6px; font-size: 14px; }
details.area .anadir-fila, details.area .anadir-medida { margin: 8px 12px 12px; }
.tabla-totales td.num, .tabla-totales th.num { text-align: right; }
.tabla-totales tr.incompleto td { background: #FFF6D6; }
.titulo-edificio { margin: 28px 0 6px; font-size: 18px; }
.tabla-takeoff [data-k="unidad"] { min-width: 72px; }
.tabla-takeoff [data-k="notas"], .tabla-medidas [data-k="notas"] { min-width: 130px; }
.tabla-takeoff [data-k="categoria"] { min-width: 120px; }
.tabla-takeoff [data-k="partida"] { min-width: 130px; }
.tabla-medidas [data-k="tipo"] { min-width: 150px; }
.tabla-takeoff tr.falta input[data-k="cantidad"], .tabla-medidas tr.falta input[data-k="medida"] { background: #FFF6D6; border-color: #E0C25A; }
/* Área → ELEVACIÓN (04/10/2026): cada elevación con su encabezado, su tabla de finishes y sus medidas */
details.area > summary .nombre-area { font-size: 19px; text-transform: uppercase; letter-spacing: .03em; }
section.elevacion { margin: 14px 12px 18px; padding: 0 0 6px; border-left: 3px solid var(--linea); padding-left: 12px; }
.cabecera-elevacion { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cabecera-elevacion h4 { margin: 0; font-size: 15px; color: var(--madera); }
.cabecera-elevacion .subtotal-elevacion { font-size: 12px; margin-right: auto; }
.cabecera-elevacion button { padding: 2px 8px; font-size: 12px; }
section.elevacion .anadir-fila, section.elevacion .anadir-medida { margin: 6px 0 4px; }
.bloque-medidas .titulo-medidas { margin: 10px 0 4px; font-size: 13px; font-weight: 700; }
.bloque-medidas.vacio .titulo-medidas, .bloque-medidas.vacio .tabla-partidas { display: none; }
details.area > .anadir-elevacion { margin: 0 12px 14px; }
/* Áreas bien resaltadas (pedido del usuario, 04/10/2026): banda azul como en el Excel */
details.area > summary { background: #3FA3DC; color: #0B2236; }
details.area > summary .nombre-area { color: #0B2236; font-size: 20px; }
details.area > summary .cuenta, details.area > summary .subtotal-area, details.area > summary .ref-area { color: #0B2236; opacity: .85; }
details.area { border-color: #3FA3DC; }
details.area > summary .estado { margin-left: 4px; }
.estado { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #fff; color: #0B2236; border: 1px solid #0B2236; }
.estado.ready-for-production { background: #E3F1E5; color: #2E6B3A; border-color: #2E6B3A; }
.estado.in-production { background: #FFF2D9; color: #8A5A12; border-color: #8A5A12; }
.estado.delivered { background: #E4ECF7; color: #2D5486; border-color: #2D5486; }
.estado.installed { background: #2E6B3A; color: #fff; border-color: #2E6B3A; }
.filtro-totales { display: inline-block; margin-bottom: 8px; font-size: 14px; }
.tabla-areas { width: 100%; border-collapse: collapse; }
.tabla-areas th { font-size: 12px; padding: 7px 6px; text-align: left; background: var(--madera); color: #FAF6F1; white-space: nowrap; }
.tabla-areas td { padding: 4px 4px; border-bottom: 1px solid color-mix(in srgb, var(--linea) 20%, transparent); vertical-align: top; }
.tabla-areas input, .tabla-areas select { padding: 6px 7px; font-size: 14px; width: 100%; }
.tabla-areas [data-a="nombre"] { min-width: 260px; }
.tabla-areas td.num { text-align: right; font-variant-numeric: tabular-nums; padding-top: 10px; }
.tabla-areas td.incompleto { background: #FFF6D6; }
.tabla-areas details.planos summary { cursor: pointer; padding-top: 6px; white-space: nowrap; }
.tabla-areas details.planos .casilla { display: block; font-size: 12px; margin: 3px 0; white-space: nowrap; }
details.area > summary .ref-area { font-size: 13px; font-weight: 400; }
/* La medida primero, luego la cantidad (04/10/2026). A escala = naranja (aproximada). */
.tabla-takeoff input.medida { min-width: 190px; font-family: ui-monospace, Menlo, monospace; }
.tabla-takeoff input.piezas { width: 54px; }
.tabla-takeoff input[readonly] { background: transparent; border-color: transparent; font-weight: 600; }
.tabla-takeoff [data-k="metodo"] { min-width: 120px; }
.tabla-takeoff tr.a-escala td { background: #FFE3C7; }
.tabla-takeoff tr.a-escala [data-k="metodo"] { font-weight: 700; color: #8A4A12; }
.tabla-totales td.a-escala-total { background: #FFE3C7; font-weight: 700; }

/* ── Takeoff simple (05/10/2026): bloques por elevación, Approval, Details, samples ── */
.tabla-takeoff .detalle { display: none; }
#areas.con-detalles .tabla-takeoff .detalle { display: table-cell; }
section.elevacion .bloque { margin: 6px 0 10px; }
section.elevacion .bloque.vacio { display: none; }
.titulo-bloque { font-size: 13px; font-weight: 700; color: var(--madera); margin: 8px 0 4px; }
.anadir-bloques { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.anadir-bloques button { padding: 3px 9px; font-size: 12px; }
.tabla-takeoff [data-k="unidad"] { min-width: 62px; width: 62px; margin-left: 4px; }
.tabla-takeoff td.num { white-space: nowrap; }
.tabla-takeoff td.num [data-k="cantidad"] { width: 80px; }
.tabla-takeoff input.pcs, .tabla-takeoff input.lf { width: 56px; text-align: right; }
.tabla-takeoff input.lf { background: transparent; border-color: transparent; font-weight: 600; }
.tabla-takeoff select.aprobacion { min-width: 165px; font-weight: 600; }
.aprob-pending { background: #FFF6D6; }
.aprob-approved-by-reviewer { background: #E4ECF7; color: #2D5486; }
.aprob-approved-by-client { background: #E3F1E5; color: #2E6B3A; }
.aprob-rejected { background: #F8DADA; color: #8A1F1F; }
.tabla-takeoff .quien { display: block; font-size: 11px; }
.samples .lista-samples { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 12px 8px; }
.samples .sample { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.samples .sample span { font-weight: 700; min-width: 70px; }
.samples .sample input { width: 220px; padding: 5px 7px; font-size: 13px; }
details.area .samples { margin: 0 12px; }
#ver-detalles[aria-pressed="true"] { background: var(--madera); color: #FAF6F1; }
.tabla-gabinetes [data-k="tipo"] { min-width: 95px; }
.tabla-gabinetes [data-k="bisagra"] { min-width: 180px; }
.tabla-gabinetes input.medida, .tabla-puertas input.medida { min-width: 230px; }
.tabla-puertas [data-k="tipo"] { min-width: 130px; }
.tabla-puertas [data-k="marco"], .tabla-puertas [data-k="herrajes"] { min-width: 120px; }
.tabla-items [data-k="elemento"] { min-width: 220px; }

/* ── Cada bloque con SU color (05/10/2026): Finishes · Cabinets · Doors · Dimensions ── */
section.elevacion .bloque { --color-bloque: var(--madera); --texto-bloque: #FAF6F1; border-left: 4px solid var(--color-bloque); padding-left: 8px; margin: 10px 0 12px; }
section.elevacion .bloque[data-bloque="gabinetes"] { --color-bloque: #2E6B3A; }
section.elevacion .bloque[data-bloque="puertas"] { --color-bloque: #4A5568; }
section.elevacion .bloque[data-bloque="medidas"] { --color-bloque: #C9B49B; --texto-bloque: #3A2A1E; }
section.elevacion .bloque > .titulo-bloque { background: var(--color-bloque); color: var(--texto-bloque); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; padding: 5px 10px; margin: 0 0 4px; border-radius: 4px; }
section.elevacion .bloque .tabla-takeoff th { background: var(--color-bloque); color: var(--texto-bloque); }
.anadir-bloques [data-anadir="gabinetes"] { border-color: #2E6B3A; color: #2E6B3A; }
.anadir-bloques [data-anadir="puertas"] { border-color: #4A5568; color: #4A5568; }

/* «Check»: cada medida contra las cotas escritas en el plano (07/10/2026) */
.check { display: inline-block; min-width: 1.4em; text-align: center; font-weight: 700; border-radius: 4px; cursor: help; }
.check-ok { color: #2E6B3A; }
.check-aviso { color: #B7791F; }
.check-mal { color: #fff; background: #C53030; padding: 0 4px; }
.check-falta { color: #9C8A76; }
table.tabla-areas td .check-mal { padding: 0 4px; border-radius: 4px; }

/* Material list (07/10/2026): clic en una línea = de dónde sale */
table.tabla-materiales tr.material { cursor: pointer; }
table.tabla-materiales tr.material:hover td { background: #F3EBDF; }
table.tabla-materiales tr.origenes td { background: #FBF8F3; font-size: 12px; }
table.tabla-materiales tr.origenes ul { margin: 4px 0; padding-left: 18px; max-height: 260px; overflow: auto; }
.tabla-gabinetes .sup { white-space: nowrap; font-size: 12px; }
.aprob-to-verify { background: #FFD8A8; color: #8A4B08; font-weight: 600; }

/* Resumen por tipo de unidad (16/10/2026) */
.tabla-resumen-tipos tr.total td { border-top: 2px solid var(--madera); }
.estimado-resumen { font-size: 15px; margin: 10px 0 4px; }
details#detalle-takeoff > summary.ver-detalle-takeoff { cursor: pointer; font-weight: 600; color: var(--madera); padding: 6px 0; }

/* Estimate: lo de precedentes (IA) plegado bajo el estimado directo (ley 24). */
.avanzado-estimado { margin-top: 1.2rem; }
.avanzado-estimado > summary { cursor: pointer; color: var(--texto-suave); padding: .5rem 0; }

/* Cost Sheet (ley 26): pasos para el estimador y casillas de costo. */
.pasos-costo { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1rem 0; counter-reset: paso; }
.pasos-costo li { counter-increment: paso; padding: .45rem .8rem; border-radius: 999px; background: var(--superficie); color: var(--texto-suave); font-size: .9rem; }
.pasos-costo li::before { content: counter(paso) ". "; }
.pasos-costo li.hecho { background: #e3efe0; color: #2E6B3A; }
.pasos-costo li.ahora { background: var(--accion); color: #fff; }
.pasos-costo li.ahora a { color: #fff; }
.tabla-costos .entrada-costo { width: 7rem; text-align: right; }
.tabla-costos tr.incompleto .entrada-costo { background: #fff3cd; border-color: #e0b84a; }
.boton-archivo { display: inline-flex; align-items: center; cursor: pointer; padding: .45rem .8rem; border-radius: 8px; border: 1px solid var(--madera); color: var(--madera-oscura); font-size: .9rem; }
.boton-archivo:hover { background: var(--superficie); }

/* Ley 32: el nombre en la cabecera lleva a «Account / Users». */
.sesion a.mi-cuenta { color: inherit; text-decoration: none; }
.sesion a.mi-cuenta:hover { text-decoration: underline; }
.solo-lectura { margin: 10px 0; }

/* Ley 35: borrar un proyecto — zona aparte, botón ROJO y advertencia con Sí / No. */
.zona-peligro { margin-top: 40px; padding: 16px 20px; border: 1px solid #F1C4C4; border-radius: 10px; background: #FFF7F7; }
.zona-peligro h2 { margin: 0 0 4px; font-size: 16px; color: #A3212F; }
button.peligro { background: #C0273A; color: #fff; }
button.peligro:hover { background: #A3212F; }
.velo { position: fixed; inset: 0; background: rgba(6, 11, 24, .55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialogo { background: #fff; border-radius: 12px; border-top: 6px solid #C0273A; max-width: 460px; width: 100%; padding: 20px 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.dialogo h2 { margin: 0 0 8px; color: #A3212F; font-size: 18px; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
details#borrados summary { cursor: pointer; }

/* Ley 36: cada estado del proyecto con SU color (Projects y Brief). */
.estado.estado-lead { background: #FFF4DC; color: #8A5300; border-color: #E8B04A; }
.estado.estado-estimating { background: #E8F1FD; color: #1B4F9C; border-color: #8DB4EC; }
.estado.estado-submitted { background: #EEE9FC; color: #4A2FA0; border-color: #B6A6EE; }
.estado.estado-won { background: #E2F4EA; color: #136B43; border-color: #6CC59A; }
.estado.estado-lost { background: #F1F2F4; color: #5B6270; border-color: #C5CAD3; }