/* Tokens y componentes de Licitaciones, v2 (CRM-938; v1 en CRM-710). Dos copias gemelas, idénticas byte a byte:
   docs/diseno/tokens.css (referencia del sistema) y licitaciones_web/presupuestos/static/presupuestos/tokens.css (la que
   sirve base.html via {% static %}). Actualizar SIEMPRE las dos juntas (ver docs/diseno/DESIGN.md). */
:root{
  /* Color: blanco + acento teal + menta (propuesta UX 2026-10-22). Contraste de cada par en DESIGN.md §1. */
  --color-texto:#0f1f1c;
  --color-texto-medio:#3b4b47;
  --color-texto-suave:#5b6b66;
  --color-fondo:#f6f8f7;
  --color-superficie:#ffffff;
  --color-borde:#e3e8e5;
  --color-borde-fuerte:#c9d6d1;
  --color-linea:#eef2f0;
  --color-hover:#eef4f1;
  --color-acento:#14625e;
  --color-acento-hover:#0f4f4b;
  --color-sobre-acento:#ffffff;
  --color-menta:#cff2e3;
  --color-suave:#e6f4f0;
  --color-foco:#1f9c91;
  --color-info:#14625e; --color-info-fondo:#e6f4f0;
  --color-ok:#0e6b4e; --color-ok-fondo:#d7f3e6;
  --color-error:#b42318; --color-error-fondo:#fee4e2;
  /* Semáforo de precios (CU-03): directo verde, extrapolado ámbar, manual azul, faltante rojo (AA) */
  --sem-directo-fondo:#d7f3e6; --sem-directo-texto:#0e6b4e;
  --sem-extrapolado-fondo:#fcefc7; --sem-extrapolado-texto:#8a5200;
  --sem-manual-fondo:#dbeafe; --sem-manual-texto:#1e40af;
  --sem-faltante-fondo:#fee4e2; --sem-faltante-texto:#b42318;
  /* Espaciado (escala de .25rem) */
  --esp-1:.25rem; --esp-2:.5rem; --esp-3:.75rem; --esp-4:1rem; --esp-5:1.25rem; --esp-6:1.5rem; --esp-8:2rem;
  /* Radio y sombra */
  --radio-chico:10px; --radio:12px; --radio-grande:16px; --radio-pill:999px;
  --sombra:0 1px 2px rgba(15,31,28,.05);
  /* Tipografía: system-ui (la fuente web Inter es decisión diferida del dueño) */
  --fuente:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --texto-mini:.75rem; --texto-chico:.875rem; --texto-grande:1.25rem; --texto-titulo:1.75rem;
  /* Rejilla: barra lateral desde 1024px; contenido con máximo de 64rem (80rem en pantallas con tablas anchas) */
  --ancho-lateral:16rem;
  --ancho-contenido:64rem;
  --ancho-contenido-amplio:80rem;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;font:var(--fuente);color:var(--color-texto);background:var(--color-fondo)}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-acento)}
a:hover{color:var(--color-acento-hover)}
h1,h2,h3{line-height:1.25}
h1{font-size:var(--texto-titulo);letter-spacing:-.01em;margin:0 0 var(--esp-4)}
:focus-visible{outline:3px solid var(--color-foco);outline-offset:2px}
.saltar-enlace{position:absolute;left:-999px;top:0;background:var(--color-superficie);color:var(--color-acento);padding:var(--esp-2) var(--esp-4);border-radius:var(--radio-chico);z-index:10}
.saltar-enlace:focus{left:var(--esp-2);top:var(--esp-2)}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip{font-size:var(--texto-chico);color:var(--color-texto-suave)}

/* Armazón (componente: barra lateral). Móvil: arriba solo marca, «Nuevo presupuesto» y el <details> «Menú» (plegado por
   el guion de _nav.html; sin JS, abierto); desde 1024px va a la izquierda con el menú siempre abierto y sin summary.
   Nunca fija ni pegajosa: se desplaza con la página. */
.armazon{flex:1 0 auto;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch}
aside.lateral{flex:1 1 100%;display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-3) var(--esp-4);background:var(--color-superficie);border-bottom:1px solid var(--color-borde)}
.lateral-cabeza{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center;justify-content:space-between}
.marca{display:inline-flex;align-items:center;gap:.625rem;padding:var(--esp-1) 0;font-weight:700;color:var(--color-texto);text-decoration:none}
.marca:hover{color:var(--color-texto)}
nav.principal,nav.secundaria{display:flex;flex-wrap:wrap;gap:var(--esp-1)}
.nav-item{display:inline-flex;align-items:center;gap:.625rem;padding:var(--esp-2) var(--esp-3);border-radius:var(--radio-chico);color:var(--color-texto-medio);text-decoration:none;font-size:var(--texto-chico);font-weight:500}
.nav-item svg{flex:none}
.nav-item:hover{background:var(--color-hover);color:var(--color-texto)}
.nav-item[aria-current="page"]{background:var(--color-suave);color:var(--color-acento);font-weight:600}
.menu-lateral{margin:0}
.menu-lateral>summary{display:flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:var(--esp-2) var(--esp-3);border:1px solid var(--color-borde-fuerte);border-radius:var(--radio-chico);font-size:var(--texto-chico);font-weight:600;color:var(--color-texto);cursor:pointer;list-style:none}
.menu-lateral>summary::-webkit-details-marker{display:none}
.menu-lateral>summary:hover{background:var(--color-hover)}
.menu-lateral[open]>summary{margin-bottom:var(--esp-3)}
.lateral-pie{margin-top:var(--esp-3);display:flex;flex-direction:column;gap:var(--esp-3);padding-top:var(--esp-3);border-top:1px solid var(--color-borde)}
.empresa-activa{display:flex;flex-direction:column;gap:2px;padding:var(--esp-3);border-radius:var(--radio);background:var(--color-fondo);font-size:var(--texto-mini);color:var(--color-texto-suave);overflow-wrap:anywhere}
.empresa-activa strong{font-size:var(--texto-chico);color:var(--color-texto)}
.empresa-activa .acciones{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);align-items:center;margin-top:var(--esp-2)}
header.barra{padding:var(--esp-3) var(--esp-4);background:var(--color-superficie);border-bottom:1px solid var(--color-borde)}
main{flex:1 1 20rem;align-self:flex-start;min-width:0;max-width:var(--ancho-contenido);margin:0 auto;padding:var(--esp-6) var(--esp-4) var(--esp-8)}
main.ancho{max-width:var(--ancho-contenido-amplio)}
@media (min-width:1024px){
  .armazon{flex-wrap:nowrap}
  aside.lateral{flex:0 0 var(--ancho-lateral);padding:var(--esp-5) var(--esp-3);border-bottom:0;border-right:1px solid var(--color-borde)}
  .lateral-cabeza{flex-direction:column;align-items:stretch}
  .marca{padding:var(--esp-1) var(--esp-3)}
  nav.principal,nav.secundaria{flex-direction:column;flex-wrap:nowrap}
  .menu-lateral>summary{display:none}
  main{padding:var(--esp-8) var(--esp-8) var(--esp-8)}
}

/* Cargando (componente: indicador). base.html declara hx-indicator="#cargando" en el body: toda petición HTMX lo muestra. */
.htmx-indicator{display:none}
.htmx-request.htmx-indicator,.htmx-request .htmx-indicator{display:block}
.htmx-request{cursor:progress}

/* Botones (componente: botones). Una sola acción primaria por pantalla; el resto, secundarias o mini. */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);font:inherit;font-size:var(--texto-chico);font-weight:600;line-height:1.25;padding:.6875rem 1rem;border:1px solid var(--color-acento);border-radius:var(--radio-chico);background:var(--color-acento);color:var(--color-sobre-acento);cursor:pointer;text-decoration:none}
button:hover,.btn:hover,.btn-primario:hover{background:var(--color-acento-hover);border-color:var(--color-acento-hover);color:var(--color-sobre-acento)}
.btn-primario{background:var(--color-acento);border-color:var(--color-acento);color:var(--color-sobre-acento)}
button.secundario,.btn-sec{background:var(--color-superficie);border-color:var(--color-borde-fuerte);color:var(--color-acento)}
button.secundario:hover,.btn-sec:hover{background:var(--color-hover);border-color:var(--color-borde-fuerte);color:var(--color-acento-hover)}
.btn-mini{padding:.3125rem .625rem;font-size:var(--texto-mini);border-radius:8px}
button:disabled{opacity:.55;cursor:not-allowed}

/* Mensajes (componente: mensajes) */
.banner{padding:var(--esp-3) var(--esp-4);border-radius:var(--radio);border-left:4px solid currentColor;margin:0 0 var(--esp-4)}
.b-error{background:var(--color-error-fondo);color:var(--color-error)}
.b-info{background:var(--color-info-fondo);color:var(--color-info)}
.b-ok{background:var(--color-ok-fondo);color:var(--color-ok)}

/* Formulario (componente: formulario) */
form.enlinea{display:inline}
label{display:block;font-weight:600;margin:var(--esp-3) 0 var(--esp-1)}
input,select,textarea{font:inherit;padding:var(--esp-2) var(--esp-3);border:1px solid var(--color-borde-fuerte);border-radius:var(--radio-chico);width:100%;max-width:24rem;background:var(--color-superficie);color:var(--color-texto)}

/* Tarjeta (componente: tarjeta) y tablero de conteos del inicio */
.card,.tarjeta{background:var(--color-superficie);border:1px solid var(--color-borde);border-radius:var(--radio-grande);box-shadow:var(--sombra)}
.tarjeta{padding:var(--esp-4) var(--esp-5)}
.tarjetas{display:grid;grid-template-columns:1fr;gap:var(--esp-4);margin:var(--esp-4) 0}
@media (min-width:640px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.tarjetas{grid-template-columns:repeat(4,1fr)}}
.tarjeta .num{display:block;font-size:var(--texto-titulo);font-weight:700;font-variant-numeric:tabular-nums}

/* Tabla con filtros (componente: tabla). .tabla envuelve y desplaza (relativa: contiene las .solo-lector absolutas de sus
   celdas, gotcha CRM-945); table.lista es la variante densa del rediseño. */
.tabla{position:relative;overflow-x:auto;background:var(--color-superficie);border:1px solid var(--color-borde);border-radius:var(--radio-grande);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:var(--esp-2) var(--esp-3);border-bottom:1px solid var(--color-linea)}
thead th{font-size:var(--texto-mini);font-weight:600;color:var(--color-texto-suave);text-transform:uppercase;letter-spacing:.02em;border-bottom-color:var(--color-borde)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.lista{font-size:var(--texto-chico)}
table.lista td{padding:.875rem var(--esp-3);vertical-align:middle}
.filtros{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);align-items:end;margin-bottom:var(--esp-3)}
.filtro{display:inline-flex;align-items:center;gap:.375rem;padding:.4375rem var(--esp-3);border:1px solid var(--color-borde-fuerte);border-radius:var(--radio-pill);background:var(--color-superficie);font:inherit;font-size:.8125rem;font-weight:600;color:var(--color-texto-medio);cursor:pointer;text-decoration:none}
.filtro:hover{background:var(--color-hover);border-color:var(--color-borde-fuerte);color:var(--color-texto)}
.filtro.on,.filtro[aria-pressed="true"],.filtro[aria-current]{background:var(--color-texto);border-color:var(--color-texto);color:var(--color-sobre-acento)}

/* Semáforo de precios (componente: pill). .sem-* es el nombre v1, vigente en detalle y matriz. */
.pill,.sem{display:inline-flex;align-items:center;gap:.375rem;padding:.1875rem .625rem;border-radius:var(--radio-pill);font-size:var(--texto-mini);font-weight:600;line-height:1.125rem;white-space:nowrap}
.pill-directo,.sem-directo{background:var(--sem-directo-fondo);color:var(--sem-directo-texto)}
.pill-extrapolado,.sem-extrapolado{background:var(--sem-extrapolado-fondo);color:var(--sem-extrapolado-texto)}
.pill-manual,.sem-manual{background:var(--sem-manual-fondo);color:var(--sem-manual-texto)}
.pill-faltante,.sem-faltante{background:var(--sem-faltante-fondo);color:var(--sem-faltante-texto)}

/* Hilo de pasos (componente: paso): hecho / actual / pendiente (sin clase) */
.pasos{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3);margin:0;padding:0;list-style:none}
.paso{display:inline-flex;align-items:center;gap:.375rem;font-size:var(--texto-mini);color:var(--color-texto-suave)}
.paso b{display:inline-flex;width:1.125rem;height:1.125rem;align-items:center;justify-content:center;border-radius:var(--radio-pill);font-size:.6875rem;font-weight:700;background:var(--color-borde);color:var(--color-texto-medio)}
.paso.hecho b{background:var(--color-acento);color:var(--color-sobre-acento)}
.paso.actual{color:var(--color-texto);font-weight:600}
.paso.actual b{background:var(--color-menta);color:var(--sem-directo-texto);outline:2px solid var(--color-acento)}

/* Estados vacíos (componente: estado vacío): texto y, si la pantalla la tiene, su acción primaria */
.estado-vacio{display:flex;flex-direction:column;align-items:center;gap:var(--esp-3);padding:var(--esp-6);border:1px dashed var(--color-borde-fuerte);border-radius:var(--radio-grande);background:var(--color-superficie);text-align:center;color:var(--color-texto-suave)}
.estado-vacio p{margin:0}

/* Pestañas del detalle de un presupuesto (componente: pestañas; el hilo de pasos las sustituirá en su issue de M1.6) */
nav.pestanas{display:flex;flex-wrap:wrap;gap:var(--esp-1);border-bottom:1px solid var(--color-borde);margin:var(--esp-4) 0}
nav.pestanas a{padding:var(--esp-2) var(--esp-4);border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--color-texto-suave);text-decoration:none;font-weight:500}
nav.pestanas a:hover{color:var(--color-texto)}
nav.pestanas a[aria-current="page"]{color:var(--color-acento);font-weight:600;border-bottom-color:var(--color-acento)}