/* Obra-OS — CSS propio (ADR-025). Fuente única de los tokens: el sistema de diseño "Obra-OS"
   (https://claude.ai/artifact/2mL1fZBxURkqsbB3uimEYk, tokens.json); las variables tienen los mismos nombres. Un cambio va primero allá.
   Mobile-first: se diseña a 390×844 y se amplía con min-width. RNF-011: texto ≥ 4,5:1, táctil ≥ 44 px, estado nunca solo por color. */

/* Fuentes de la marca, servidas por Obra-OS (OFL: IBM Plex y Archivo, vía fontsource). Solo el subconjunto latino. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/archivo-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/archivo-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/static/fonts/archivo-latin-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }

:root {
  /* Marca */
  --azul-marca: #1E5FA8;
  --azul-marca-hover: #164a85;
  --azul-titulo: #101828;
  --azul-boton: #1E5FA8;
  --azul-medio: #3D7FC6;
  --azul-barra: #4A83C4;
  --azul-claro: #EAF2FB;
  --azul-gris: #8FA6C0;

  /* Texto y superficies */
  --tinta: #101828;
  --tinta-secundaria: #475467;
  --tinta-suave: #667085;
  --placeholder: #6B7684;
  --fondo: #F5F7FA;
  --superficie: #FFFFFF;
  --borde: #E4E9F0;
  --borde-suave: #EEF2F6;

  /* Estados (fondo + texto con contraste ≥ 4,5:1) */
  --ok-fondo: #E7F6EE;
  --ok-texto: #0B6B3C;
  --ok-trazo: #23854A;
  --aviso-fondo: #FEF4E2;
  --aviso-texto: #7A4D0B;
  --error-fondo: #FDECEC;
  --error-texto: #9B1C1C;
  --error: #C62828;
  --neutro-fondo: #EEF2F6;
  --neutro-texto: #475467;
  --info-fondo: #EAF2FB;
  --info-texto: #164a85;
  --verde-accion: #2E9E5B;
  --sobre-color: #FFFFFF;

  /* Gráficos de la home v1.2 (anillos y clima) */
  --anillo-avance: #3F7FC2;
  --anillo-pista: #E4EAF1;
  --sol: #F4B53F;
  --nube: #D3DCE6;

  /* Tipografía: Archivo (títulos) + IBM Plex Sans (texto). Se usan si están instaladas; si no, las del sistema. */
  --fuente-titulo: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --fuente-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-datos: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Campos: el borde llega a 3:1 contra el fondo (WCAG 1.4.11); el resto de los bordes es decorativo */
  --borde-campo: #7C8799;

  /* Escalas que antes no existían (tamaño de texto, sombras, movimiento) */
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 4px 12px rgba(16, 24, 40, .08);
  --sombra-3: 0 20px 48px rgba(16, 24, 40, .18);
  --radio-tarjeta: 12px;
  --mov-rapido: 120ms; --mov-medio: 220ms;
  --curva: cubic-bezier(.2, .8, .2, 1);

  --radio: 8px;
  --radio-chip: 999px;
  --radio-etiqueta: 6px;
  --radio-imagen: 8px;
  --radio-hoja: 16px;
  --tactil: 44px;
  --gutter: 16px;
  --alto-nav: 60px;
  --anillo: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.4;
}

a { color: var(--azul-marca); }
a:hover { color: var(--azul-marca-hover); }
button, input { font: inherit; }
input::placeholder { color: var(--placeholder); }

:focus-visible { outline: 3px solid var(--azul-medio); outline-offset: 2px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Encabezado */

.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 10px var(--gutter) 8px 14px;
  background: var(--fondo);
}

.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-height: var(--tactil); }
/* Emblema del logo real (1080×1080): el escudo ocupa ~x 300–780, y 55–695. Se escala a 50 px de alto y se recorta. */
.marca__emblema { position: relative; flex: none; width: 38px; height: 50px; overflow: hidden; }
.marca__emblema img { position: absolute; left: -23px; top: -4px; width: 84px; height: 84px; mix-blend-mode: multiply; }
.marca__textos { display: flex; flex-direction: column; }
.marca__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 24px;
  line-height: 26px;
  color: var(--azul-titulo);
  letter-spacing: -0.4px;
}
.marca__bajada { font-size: 11px; color: var(--tinta-secundaria); }

.sesion { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sesion__nombre {
  font-size: 13px; color: var(--tinta-secundaria);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- Contenido */

.contenido {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 4px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 22px;
  line-height: 26px;
  color: var(--azul-titulo);
  margin: 4px 0 0;
}
.subtitulo { margin: 0; font-size: 14px; color: var(--tinta-secundaria); }

.seccion-titulo {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tinta-secundaria);
  margin: 0 0 6px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}

.volver { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tactil); font-size: 14px; font-weight: 500; text-decoration: none; }

/* ---------------------------------------------------------------- Botones y formularios */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radio);
  background: var(--azul-boton);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
}
.boton:hover { background: var(--azul-marca-hover); color: #FFFFFF; }
.boton--texto {
  background: transparent;
  color: var(--azul-marca);
  min-height: var(--tactil);
  width: auto;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.boton--texto:hover { background: var(--azul-claro); color: var(--azul-marca-hover); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-size: 15px; font-weight: 600; }
.campo__ayuda { font-size: 13px; color: var(--tinta-secundaria); }
.campo__entrada {
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 18px;
  width: 100%;
}
.campo__entrada--codigo { letter-spacing: 6px; font-size: 22px; font-weight: 600; }
.campo__entrada:focus { border-color: var(--azul-marca); outline: 2px solid var(--azul-medio); outline-offset: 1px; }

.formulario { display: flex; flex-direction: column; gap: 14px; }

/* Indicador de HTMX mientras se envía */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ---------------------------------------------------------------- Mensajes y estados */

.mensaje {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radio);
  font-size: 14px;
}
.mensaje svg { flex: 0 0 auto; margin-top: 1px; }
.mensaje--info { background: var(--info-fondo); color: var(--info-texto); }
.mensaje--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.mensaje--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.mensaje--error { background: var(--error-fondo); color: var(--error-texto); }

.estado-vacio, .estado-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 16px;
  background: var(--superficie);
  border: 1px dashed var(--azul-gris);
  border-radius: var(--radio);
}
.estado-error { border-style: solid; border-color: var(--error); }
.estado-vacio__titulo, .estado-error__titulo { font-weight: 600; font-size: 16px; margin: 0; }
.estado-vacio__texto, .estado-error__texto { margin: 0; font-size: 14px; color: var(--tinta-secundaria); max-width: 32ch; }

/* ---------------------------------------------------------------- Chips de estado (siempre con texto e ícono) */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: var(--radio-chip);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.chip svg { flex: 0 0 auto; }
.chip--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.chip--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip--error { background: var(--error-fondo); color: var(--error-texto); }
.chip--info { background: var(--info-fondo); color: var(--info-texto); }
.chip--neutro { background: var(--neutro-fondo); color: var(--neutro-texto); }

/* ---------------------------------------------------------------- Lista de obras */

.obras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.obra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: var(--tactil);
  padding: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
}
.obra:hover { border-color: var(--azul-medio); color: var(--tinta); }
.obra__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.obra__nombre { font-size: 17px; font-weight: 600; line-height: 21px; }
.obra__ubicacion { font-size: 13px; color: var(--tinta-secundaria); }
.obra__parte { font-size: 13px; color: var(--tinta-secundaria); }
.obra__flecha { font-size: 22px; color: var(--azul-marca); }

/* ---------------------------------------------------------------- Detalle de obra */

.indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.indicador { display: flex; flex-direction: column; gap: 2px; }
.indicador__valor { font-family: var(--fuente-titulo); font-size: 28px; font-weight: 700; line-height: 32px; color: var(--azul-titulo); }
.indicador__valor small { font-size: 15px; }
.indicador__etiqueta { font-size: 13px; color: var(--tinta-secundaria); }

.barras { width: 100%; height: auto; display: block; }
.barras__barra { fill: var(--azul-barra); }
.barras__barra--sin-parte { fill: none; stroke: var(--tinta-suave); stroke-width: 1.5; stroke-dasharray: 4 3; }
.barras__eje { stroke: var(--borde); stroke-width: 1; }
.barras__valor { font-size: 12px; font-weight: 600; fill: var(--tinta); }
.barras__dia { font-size: 12px; fill: var(--tinta-secundaria); }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista__item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde-suave); font-size: 14px; }
.lista__item:first-child { border-top: 0; padding-top: 0; }
.lista__item--columna { flex-direction: column; gap: 2px; }
.lista__fecha { font-size: 12px; font-weight: 600; color: var(--tinta-secundaria); }
.lista__cantidad { font-weight: 600; white-space: nowrap; }

.texto-largo { margin: 0; white-space: pre-line; font-size: 15px; }
.nota { font-size: 13px; color: var(--tinta-secundaria); margin: 6px 0 0; }

/* ---------------------------------------------------------------- Login */

.login { max-width: 420px; }
.login__pasos { font-size: 13px; color: var(--tinta-secundaria); margin: 0 0 10px; }
.login__tarjeta { margin-top: 12px; }
.login__tarjeta .mensaje { margin-bottom: 14px; }
.login__acciones { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }

/* ---------------------------------------------------------------- Alta y edición de obras (RF-001–010) */

.campo--error .campo__entrada { border-color: var(--error); border-width: 2px; }
.campo__error { font-size: 14px; font-weight: 600; color: var(--error-texto); }
.casilla { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tactil); font-size: 15px; cursor: pointer; }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--azul-boton); }
.tarjeta--peligro { border-color: var(--error-fondo); }
.boton--peligro { background: var(--error); }
.boton--peligro:hover { background: var(--error-texto); }
.boton--secundario { background: var(--superficie); color: var(--azul-marca); border: 1px solid var(--azul-gris); }
.boton--secundario:hover { background: var(--azul-claro); color: var(--azul-marca-hover); }
.acciones-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.acciones-panel .boton { min-height: var(--tactil); font-size: 15px; padding: 0 10px; }
.obras > li { display: flex; flex-direction: column; }
.obra__editar { align-self: flex-end; display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 8px; font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- Pantallas más anchas */

@media (min-width: 720px) {
  .contenido { padding-top: 12px; }
  .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ADR-036: equipo de la empresa (dueño y administración) */
.lista-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fila-equipo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.en-linea { margin: 0; }

/* Video semanal de la cámara en el reporte publicado (ADR-037 fase 2) */
.video-semanal { display: block; width: 100%; max-height: 60vh; margin-top: 12px; border-radius: var(--radio); background: #000; }

/* ---------------------------------------------------------------- listas de tarjetas, datos y accesos (antes sin estilo) */
.lista-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .lista-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lista-tarjetas > li { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.datos { margin: 0; display: grid; gap: 8px; }
.datos > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; align-items: baseline; }
.datos dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.datos dd { margin: 0; font-size: var(--t-base); overflow-wrap: anywhere; }
.accesos-obra { display: flex; flex-direction: column; gap: 8px; margin-block: 8px; }
.en-linea { display: inline; }
/* tablero del panel de Obra-OS: cifras, medidor y barras (una tinta para magnitud; estado con texto al lado) */
.tablero-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-block: 12px; }
.cifra { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cifra__etiqueta { font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-suave); }
.cifra__valor { font-family: var(--fuente-titulo); font-size: 1.75rem; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.cifra__nota { font-size: var(--t-xs); color: var(--tinta-secundaria); }
.medidor { display: block; height: 8px; border-radius: 4px; background: var(--anillo-pista); overflow: hidden; margin-top: 4px; }
.medidor__relleno { display: block; height: 100%; border-radius: 4px; background: var(--azul-barra); }
.tb-barras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.tb-barras__fila { display: grid; grid-template-columns: minmax(110px, 32%) 1fr auto; gap: 10px; align-items: center; }
.tb-barras__nombre { font-size: var(--t-sm, .9rem); overflow-wrap: anywhere; }
.tb-barras__pista { display: block; height: 10px; border-radius: 4px; background: var(--anillo-pista); overflow: hidden; }
.tb-barras__barra { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--azul-barra); }
.tb-barras__valor { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--tinta-secundaria); text-align: right; white-space: nowrap; }
.medidor__relleno--ok, .tb-barras__barra--ok { background: var(--ok-trazo); }
.medidor__relleno--aviso, .tb-barras__barra--aviso { background: var(--sol); }
.medidor__relleno--error, .tb-barras__barra--error { background: var(--error); }
.dos-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm, .9rem); }
.tabla th, .tabla td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--borde, #E4E7EC); white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { text-align: left; }
.tabla th { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- confirmación de acciones de riesgo (confirmar.js) */
.confirmar { border: 0; border-radius: var(--radio-tarjeta); padding: 0; max-width: min(92vw, 420px); box-shadow: var(--sombra-3); color: var(--tinta); background: var(--superficie); }
.confirmar::backdrop { background: rgba(16, 24, 40, .45); }
.confirmar__cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.confirmar__titulo { margin: 0; font-family: var(--fuente-titulo); font-size: var(--t-lg); }
.confirmar__texto { margin: 0; color: var(--tinta-secundaria); }
.confirmar__acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 6px; }
.boton--peligro { background: var(--error); color: var(--sobre-color); border: 1px solid var(--error); }
.boton--peligro:hover { background: var(--error-texto); color: var(--sobre-color); }
@media (prefers-reduced-motion: no-preference) { .confirmar[open] { animation: confirmar-entra var(--mov-medio) var(--curva); } }
@keyframes confirmar-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- menú global por rol (fase B) */
.menu-global { display: flex; gap: 4px; overflow-x: auto; padding: 0 var(--gutter); background: var(--superficie); border-bottom: 1px solid var(--borde); scrollbar-width: none; }
.menu-global::-webkit-scrollbar { display: none; }
.menu-global__item { flex: none; display: inline-flex; align-items: center; min-height: var(--tactil); padding: 0 12px; font-size: var(--t-sm); font-weight: 600; color: var(--tinta-secundaria); text-decoration: none; border-bottom: 3px solid transparent; }
.menu-global__item:hover { color: var(--azul-marca); }
.menu-global__item--activo { color: var(--azul-marca); border-bottom-color: var(--azul-marca); }

/* Compras y gastos: barra de lo gastado contra el presupuesto (suma, se saca borrando este bloque) */
.progreso { height: 10px; border-radius: 999px; background: var(--borde-suave); overflow: hidden; margin: 8px 0 12px; }
.progreso > span { display: block; height: 100%; background: var(--azul-barra); border-radius: 999px; }

/* Flujo 6: tablet de entradas y salidas en la cuadrilla */
.acciones-en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seccion-subtitulo { font-size: 1rem; margin: 20px 0 8px; }
.campo-archivo { display: inline-flex; flex-direction: column; gap: 2px; }

/* ayuda de instalación de la tablet (Cuadrilla) */
.ayuda-tablet { margin-block: 10px; }
.ayuda-tablet summary { cursor: pointer; font-weight: 600; color: var(--azul-marca); }
.lista-pasos { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }