/* Sistema visual común de SAMTRAMS (revisión integral; especificación §2; manual de identidad Samgyc Group v2.0).
   Una sola hoja para todas las pantallas: antes cada plantilla repetía ~280 líneas (H-07).

   Marca: marino #0B2A4A (navegación y superficies), cobre #B5552B (acciones y acentos), cobre claro #E4864F (solo
   sobre marino), hueso #F3F0EA (fondo), arena #D8D2C6 (separaciones), concreto #8C939B (secundario; con texto se
   oscurece para cumplir contraste), grafito #1E242C (texto). Titulares en Saira ancho 112 (archivos oficiales, OFL),
   texto en Public Sans, datos en IBM Plex Mono; respaldo de sistema Arial.

   Los estados llevan siempre texto e icono además de color (ui.js añade el icono). Los nombres de clase anteriores
   (.card, .btn-submit, .notice, .status-pill…) se conservan: el JavaScript de cada módulo los usa. */

@font-face { font-family: "Saira"; src: url("/static/fonts/Saira-400-112.ttf") format("truetype"); font-weight: 400; font-display: swap; }
/* El paquete oficial trae 400, 500 y 800: el 600 del manual (H2) se sirve con el archivo 500. */
@font-face { font-family: "Saira"; src: url("/static/fonts/Saira-500-112.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Saira"; src: url("/static/fonts/Saira-800-112.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }

:root {
  --marino: #0B2A4A;
  --marino-2: #133A62;
  --marino-oscuro: #071C32;
  --cobre: #B5552B;
  --cobre-oscuro: #96441F;
  --cobre-claro: #E4864F;
  --hueso: #F3F0EA;
  --hueso-2: #F8F6F2;
  --arena: #D8D2C6;
  --arena-suave: #EAE6DF;
  --concreto: #8C939B;
  --concreto-texto: #5E6670;   /* concreto oscurecido: 5,9:1 sobre blanco */
  --grafito: #1E242C;
  --blanco: #FFFFFF;

  /* Estados (texto oscuro sobre fondo claro, ≥ 4,5:1; siempre con icono y etiqueta). */
  --ok: #1E6B47;      --ok-fondo: #E4F2EA;
  --aviso: #7A5200;   --aviso-fondo: #FBF0D6;
  --error: #9B2C1F;   --error-fondo: #FBE8E4;
  --info: #0B2A4A;    --info-fondo: #E3ECF5;
  --neutro: #3D4550;  --neutro-fondo: #ECEAE5;

  --f-titulo: "Saira", Arial, sans-serif;
  --f-texto: "Public Sans", Arial, sans-serif;
  --f-datos: "IBM Plex Mono", "Courier New", monospace;

  --r-s: 6px; --r: 10px; --r-l: 14px;
  --sombra: 0 1px 2px rgba(11, 42, 74, .06), 0 4px 16px rgba(11, 42, 74, .06);
  --sombra-alta: 0 12px 40px rgba(11, 42, 74, .22);
  --foco: 0 0 0 3px rgba(181, 85, 43, .35);
  --t: 150ms ease;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-texto);
  font-size: 15px;
  line-height: 1.55;
  background: var(--hueso);
  color: var(--grafito);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--marino); text-underline-offset: 3px; }
a:hover { color: var(--cobre); }
:focus-visible { outline: 3px solid var(--cobre); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p + p { margin-top: .5rem; }
code, .mono { font-family: var(--f-datos); }
.mono-peq { font-family: var(--f-texto); font-size: 13px; color: var(--concreto-texto); line-height: 1.5; }
.muted, .vacio { font-size: 13px; color: var(--concreto-texto); line-height: 1.6; }

/* ── Cabecera con el logotipo oficial ─────────────────────── */
header {
  background: var(--marino);
  color: var(--blanco);
  padding: .75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header-brand img.logo { width: 150px; height: auto; display: block; }   /* ≥ 130 px (manual) */
.header-logo-text { font-family: var(--f-titulo); font-weight: 800; font-size: 20px; letter-spacing: .5px; color: var(--blanco); }
.header-logo-text span { color: var(--cobre-claro); font-weight: 500; }
.header-app { font-family: var(--f-titulo); font-weight: 500; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 12px; }
.user-profile { display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.badge-role {
  background: rgba(228, 134, 79, .16); color: #FFD9C2; border: 1px solid rgba(228, 134, 79, .5);
  font-family: var(--f-texto); font-weight: 600; font-size: 11px; letter-spacing: .6px;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase;
}
.btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: var(--blanco);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font: 500 13px var(--f-texto);
  transition: background var(--t);
}
.btn-logout:hover { background: rgba(255, 255, 255, .1); }
header :focus-visible { outline-color: var(--cobre-claro); }

/* ── Estructura ───────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: 1200px; margin: 1.75rem auto 3rem; padding: 0 1.5rem; }
.dash-section { margin-bottom: 2.5rem; }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--concreto-texto); margin-bottom: .75rem; }
.migas a { color: var(--concreto-texto); text-decoration: none; }
.migas a:hover { color: var(--cobre); text-decoration: underline; }
.volver { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 1rem; color: var(--marino); font-size: 13px; text-decoration: none; }
.volver:hover { text-decoration: underline; }

/* Encabezado de página: titular Saira 800 y subrayado cobre 72 × 6 (manual §4). */
.encabezado-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-title, h1.titulo {
  font-family: var(--f-titulo); font-weight: 800; font-size: 28px; line-height: 1.2; color: var(--marino); margin-bottom: 8px;
}
.accent-bar { width: 72px; height: 6px; background: var(--cobre); margin-bottom: 1.5rem; border-radius: 1px; }
.encabezado-pagina .accent-bar { margin-bottom: 0; }
.descripcion-pagina { max-width: 72ch; color: var(--concreto-texto); font-size: 14px; margin: -.75rem 0 1.5rem; }
h2.subtitulo-seccion, .card h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 19px; color: var(--marino); margin-bottom: .9rem; }
.card h4, .subtitulo {
  font-family: var(--f-titulo); font-weight: 600; font-size: 12.5px; color: var(--cobre); text-transform: uppercase;
  letter-spacing: 1.2px; margin: 1.5rem 0 .6rem;
}

.card {
  background: var(--blanco);
  border: 1px solid rgba(216, 210, 198, .8);
  border-radius: var(--r-l);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.5rem;
}
.card > :last-child { margin-bottom: 0; }
.placeholder-card { border-style: dashed; box-shadow: none; }
.grid-container, .panel-obra { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.panel-obra.sin-form, .detalle-grid.una-columna { grid-template-columns: minmax(0, 1fr); }
.detalle { margin-top: 2rem; }
.detalle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.detalle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.panel-obra > *, .detalle-grid > *, .grid-container > * { min-width: 0; }

/* ── Pestañas ─────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--arena); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; border: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: 600 14px var(--f-titulo); color: var(--concreto-texto); cursor: pointer; border-radius: var(--r-s) var(--r-s) 0 0;
}
.tab:hover { color: var(--marino); background: var(--hueso-2); }
.tab[aria-selected="true"] { color: var(--marino); border-bottom-color: var(--cobre); }

/* ── Botones (texto + icono) ──────────────────────────────── */
.btn, .btn-submit, .btn-secondary, .btn-danger, .btn-link, .copy-btn, .btn-primario, .btn-texto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 16px; border-radius: var(--r-s);
  font: 600 14px var(--f-texto); line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn-submit, .btn-primario { background: var(--marino); color: var(--blanco); }
.btn-submit:hover, .btn-primario:hover { background: var(--marino-2); }
.btn-submit { width: 100%; margin-top: .5rem; }
.btn-acento { background: var(--cobre); color: var(--blanco); }
.btn-acento:hover { background: var(--cobre-oscuro); }
.btn-secondary, .btn-link { background: var(--blanco); color: var(--marino); border-color: var(--arena); }
.btn-secondary:hover, .btn-link:hover { border-color: var(--marino); background: var(--hueso-2); color: var(--marino); }
.btn-danger { background: var(--blanco); color: var(--error); border-color: #E7B9B1; }
.btn-danger:hover { background: var(--error-fondo); border-color: var(--error); }
.btn-texto, .copy-btn { background: transparent; color: var(--marino); padding: 6px 10px; min-height: 32px; }
.btn-texto:hover, .copy-btn:hover { background: var(--arena-suave); }
td .btn-secondary, td .btn-danger, td .btn-link, td .btn-texto, .btn-peq { min-height: 32px; padding: 5px 11px; font-size: 13px; }
td > button + button, td > a + button, td > button + a { margin-left: 6px; }
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; position: relative; }
button[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 1rem; }
.acciones-documento { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acciones-documento .btn-peq { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.barra-documento { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: .25rem 0 1rem; }

/* ── Iconos (ui.js; trazo 2,5 y acento cobre, manual §4) ──── */
svg.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
svg.ico .acento { stroke: var(--cobre); }
.btn-submit svg.ico .acento, .btn-primario svg.ico .acento, header svg.ico .acento, .nav-principal svg.ico .acento { stroke: var(--cobre-claro); }
.btn-acento svg.ico .acento, .btn-danger svg.ico .acento { stroke: currentColor; }
svg.ico-l { width: 22px; height: 22px; }

/* ── Campos: etiqueta permanente, ayuda y error junto al campo ── */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--grafito); }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; font: 400 14px var(--f-texto); color: var(--grafito);
  border: 1px solid #B9B3A7; border-radius: var(--r-s); background: var(--blanco);
  transition: border-color var(--t), box-shadow var(--t);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; text-overflow: ellipsis;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
select[multiple] { background-image: none; padding-right: 12px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--cobre); }
input[type="file"] { padding: 6px; }
input:hover, select:hover, textarea:hover { border-color: var(--concreto-texto); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobre); box-shadow: var(--foco); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); background: #FFFBFA; }
input:disabled, select:disabled, textarea:disabled { background: var(--hueso-2); color: var(--concreto-texto); }
.campo-error { display: flex; gap: 6px; align-items: flex-start; color: var(--error); font-size: 12.5px; font-weight: 500; margin-top: 4px; }
.campo-ayuda { color: var(--concreto-texto); font-size: 12.5px; margin-top: 3px; font-weight: 400; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.fila-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; margin: .75rem 0; }
.fila-form label { font-size: 12.5px; display: block; }
.fila-form label > input, .fila-form label > select, .fila-form label > textarea { margin-top: 4px; }
.fila-form > button { align-self: end; }
.fila-form[hidden], .fila-form label[hidden] { display: none !important; }
label.mono-peq { display: flex; align-items: center; gap: 8px; font-family: var(--f-texto); color: var(--grafito); }
label.mono-peq input[type=checkbox] { margin: 0; }
.role-select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 12.5px; }
.solo-camion[hidden] { display: none; }

/* Ayuda contextual: botón «?» que abre un texto; teclado (Enter/Espacio, Esc) y toque. */
.ayuda { position: relative; display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ayuda-boton {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 1px solid var(--arena); background: var(--blanco); color: var(--marino); cursor: pointer;
}
.ayuda-boton svg.ico { width: 14px; height: 14px; }
.ayuda-boton:hover, .ayuda-boton[aria-expanded="true"] { border-color: var(--cobre); color: var(--cobre); }
.ayuda-texto {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: -10px; width: min(300px, 80vw);
  background: var(--grafito); color: var(--blanco); font: 400 13px/1.5 var(--f-texto); text-transform: none; letter-spacing: 0;
  padding: 10px 12px; border-radius: var(--r-s); box-shadow: var(--sombra-alta);
}

/* ── Tablas ───────────────────────────────────────────────── */
.tabla-contenedor { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--arena-suave); border-radius: var(--r);
  background:
    linear-gradient(to right, var(--blanco) 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--blanco) 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(11, 42, 74, .14), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(11, 42, 74, .14), transparent) right center / 10px 100% no-repeat scroll;
  margin: .75rem 0; }
.tabla-contenedor > table { border: none; margin: 0; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--arena-suave); vertical-align: middle; }
th {
  font: 600 12px var(--f-titulo); letter-spacing: .6px; text-transform: uppercase; color: var(--marino);
  background: var(--hueso-2); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
tbody tr:hover td { background: #FBFAF7; }
tbody tr:last-child td { border-bottom: none; }
.num, td.num { font-family: var(--f-datos); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { font-family: var(--f-titulo); text-align: right; }
tfoot td, tr.total td { font-weight: 600; background: var(--hueso-2); border-top: 2px solid var(--arena); }
.nivel-1 td:first-child { padding-left: 1.75rem; } .nivel-2 td:first-child { padding-left: 3.25rem; } .nivel-3 td:first-child { padding-left: 4.75rem; }
.inactivo td, .revocado td { color: var(--concreto-texto); }
.revocado td { text-decoration: line-through; }
.tabla-controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: .75rem; }
.tabla-controles .filtro { position: relative; flex: 1 1 220px; max-width: 340px; }
.tabla-controles .filtro svg.ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--concreto-texto); }
.tabla-controles .filtro input { padding-left: 36px; }
.paginacion { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--concreto-texto); }
.paginacion button { min-height: 32px; padding: 4px 10px; }
.tabla-vacia td { text-align: center; color: var(--concreto-texto); padding: 1.5rem; }

/* ── Indicadores (KPI) ────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: .5rem 0 1.25rem; }
.kpi { background: var(--blanco); border: 1px solid var(--arena-suave); border-radius: var(--r); padding: 14px 16px; position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--marino); }
.kpi.acento::before { background: var(--cobre); }
a.kpi-enlace { text-decoration: none; color: inherit; transition: border-color var(--t), box-shadow var(--t); }
a.kpi-enlace:hover { border-color: var(--cobre); box-shadow: var(--sombra); }
.kpi-etiqueta { font: 600 11.5px var(--f-titulo); letter-spacing: .8px; text-transform: uppercase; color: var(--concreto-texto); }
.kpi-valor { font: 600 22px var(--f-datos); color: var(--marino); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-nota { font-size: 12.5px; color: var(--concreto-texto); margin-top: 2px; }

/* ── Estados: etiqueta + icono + color ────────────────────── */
.status-pill, .chip, .estado {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 12px var(--f-texto); padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--neutro-fondo); color: var(--neutro); border: 1px solid transparent;
}
.status-pill svg.ico, .chip svg.ico, .estado svg.ico { width: 13px; height: 13px; stroke-width: 3; }
.status-pill svg.ico .acento, .chip svg.ico .acento, .estado svg.ico .acento { stroke: currentColor; }
.estado-ok, .status-active, .status-activo { background: var(--ok-fondo); color: var(--ok); }
.estado-aviso, .status-pending, .status-pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.estado-error { background: var(--error-fondo); color: var(--error); }
.estado-info, .chip-propio { background: var(--info-fondo); color: var(--info); }
.estado-borrador { background: var(--blanco); color: var(--neutro); border: 1px dashed var(--concreto); }
.estado-anulado, .status-desactivado { background: var(--neutro-fondo); color: var(--concreto-texto); text-decoration: line-through; }
.chip-alquilado { background: #F9ECE7; color: #8A3D1C; }
.chip-sindicato { background: var(--aviso-fondo); color: var(--aviso); }
.you-tag { font-size: 11px; color: var(--concreto-texto); margin-left: 6px; }

/* ── Avisos ───────────────────────────────────────────────── */
.notice, .aviso-adm {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r); font-size: 14px; margin-bottom: 1rem;
  background: var(--error-fondo); color: var(--error); border: 1px solid #F0C6BE;
}
.notice svg.ico, .aviso-adm svg.ico { margin-top: 1px; }
.notice svg.ico .acento, .aviso-adm svg.ico .acento { stroke: currentColor; }
.notice.ok { background: var(--ok-fondo); color: var(--ok); border-color: #BFDFCC; }
.notice.aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: #EED9A6; }
.notice.info { background: var(--info-fondo); color: var(--info); border-color: #C3D4E6; }
.lista-requisitos { margin: .25rem 0 0 1.25rem; font-size: 13px; }
.activation-box { margin-top: 1rem; padding: 12px; background: var(--hueso-2); border: 1px solid var(--arena); border-radius: var(--r-s); font-size: 12.5px; }
.activation-box code { display: block; font-family: var(--f-datos); font-size: 11.5px; word-break: break-all; margin: 6px 0; }

/* Mensajes breves (toasts), anunciados por lectores de pantalla. */
.toasts { position: fixed; z-index: 100; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r);
  background: var(--grafito); color: var(--blanco); box-shadow: var(--sombra-alta); font-size: 14px;
  animation: entrar .18s ease-out;
}
.toast.error { background: #7C2318; }
.toast.ok { background: #17573A; }
.toast svg.ico .acento { stroke: var(--cobre-claro); }
.toast button { margin-left: auto; background: transparent; border: none; color: inherit; cursor: pointer; padding: 0 2px; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }

/* ── Diálogos (sustituyen prompt, confirm y alert) ────────── */
dialog.dialogo {
  border: none; border-radius: var(--r-l); padding: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  box-shadow: var(--sombra-alta); color: var(--grafito); background: var(--blanco);
}
dialog.dialogo::backdrop { background: rgba(11, 42, 74, .45); }
.dialogo form { display: flex; flex-direction: column; }
.dialogo-cabeza { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px 6px; }
.dialogo-cabeza svg.ico { width: 24px; height: 24px; margin-top: 2px; color: var(--marino); }
.dialogo.peligro .dialogo-cabeza svg.ico { color: var(--error); }
.dialogo h2 { font: 600 19px/1.3 var(--f-titulo); color: var(--marino); }
.dialogo-cuerpo { padding: 6px 22px 8px 58px; font-size: 14px; white-space: pre-line; }
.dialogo-cuerpo label { margin-top: 12px; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; flex-wrap: wrap; }

/* ── Fotos ────────────────────────────────────────────────── */
.galeria-fotos { display: flex; flex-wrap: wrap; gap: 10px; margin: .5rem 0; }
.galeria-fotos figure { margin: 0; width: 150px; font-size: 12px; }
.galeria-fotos img { width: 150px; height: 110px; object-fit: cover; border: 1px solid var(--arena); border-radius: var(--r-s); }

/* ── Cierre de página: capas arena y marino (manual §4) ───── */
.brand-footer-layers { width: 100%; display: flex; flex-direction: column; }
.layer-sand { height: 4px; background: var(--arena); }
.layer-navy { height: 12px; background: var(--marino); }

/* ── Adaptación a móvil ───────────────────────────────────── */
@media (max-width: 860px) {
  header { padding: .6rem 1rem; }
  .header-app { display: none; }
  main { padding: 0 1rem; margin-top: 1.25rem; }
  .grid-container, .panel-obra, .detalle-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .section-title, h1.titulo { font-size: 23px; }
  .card { padding: 1.1rem; border-radius: var(--r); }
  .btn, .btn-submit, .btn-secondary, .btn-danger, .btn-link, .btn-primario { min-height: 44px; }   /* objetivo táctil */
  td .btn-secondary, td .btn-danger, td .btn-link, td .btn-texto { min-height: 38px; }
  th, td { padding: 9px 10px; }
  .dialogo-cuerpo { padding-left: 22px; }
  .toasts { left: 16px; right: 16px; max-width: none; }
}

/* ── Impresión de pantallas (los documentos formales salen en PDF) ── */
@media print {
  header, .nav-principal, .volver, .tabs, .acciones, .tabla-controles, button, .toasts, .brand-footer-layers { display: none !important; }
  body { background: var(--blanco); font-size: 11pt; }
  main { margin: 0; max-width: none; padding: 0; }
  .card { box-shadow: none; border: none; padding: 0; }
  .tabla-contenedor { overflow: visible; border: none; background: none; }
  th { position: static; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
}