/* Gastos y Horas (SDD_GASTOS_HORAS.md). Solo afecta a .eq-* y a #gastos-root / #horas-root. */
/* 15/10: el verde de acción es #007e50 (5,1:1 con texto blanco). En /tecnicos/equipo no hay --brand-green-dark y caía en
   #0dbb74, que da 2,5:1: «Guardar tramo» y «Hacer foto» casi no se leían al sol. */
#gastos-root, #horas-root { display: block; }
#gastos-root[hidden], #horas-root[hidden] { display: none; }
.eq { --eq-ink: var(--brand-ink, #06150d); --eq-muted: var(--brand-muted, #59675f); --eq-border: var(--brand-border, rgba(6,21,13,.11));
      --eq-soft: var(--brand-green-soft, #eafbf3); --eq-green: #007e50; --eq-navy: var(--brand-navy, #003874);
      --eq-warn-bg: #fff4d6; --eq-warn: #7a5300; --eq-bad-bg: #fdecea; --eq-bad: #9b342d;
      color: var(--eq-ink); font-size: 0.875rem; }
.eq *, .eq *::before, .eq *::after { box-sizing: border-box; }
.eq button, .eq .eq-boton { min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--eq-border); border-radius: 8px;
      background: #fff; color: var(--eq-ink); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center;
      justify-content: center; gap: 6px; text-decoration: none; }
.eq button:disabled { opacity: .5; cursor: default; }
.eq button:focus-visible, .eq input:focus-visible, .eq select:focus-visible, .eq textarea:focus-visible, .eq a:focus-visible {
      outline: 3px solid var(--eq-green); outline-offset: 2px; }
.eq .eq-principal { background: var(--eq-green); border-color: var(--eq-green); color: #fff; }
.eq .eq-peligro { color: var(--eq-bad); border-color: #f0c4bf; }
.eq .eq-discreto { border-color: transparent; background: transparent; color: var(--eq-muted); font-weight: 500; }
.eq input, .eq select, .eq textarea { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--eq-border); border-radius: 8px;
      font: inherit; color: var(--eq-ink); background: #fff; }
.eq textarea { min-height: 72px; resize: vertical; }
/* 15/10: en el móvil, campos a 16 px: con 14 px el iPhone amplía la pantalla al tocarlos. */
@media (pointer: coarse) { .eq :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=submit], [type=button], [type=reset], [type=color], [type=hidden]), select, textarea) { font-size: 16px; } }
.eq label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--eq-muted); margin-bottom: 4px; }
.eq-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.eq-barra h3 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.eq-grupo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eq-nav { display: inline-flex; align-items: center; gap: 4px; }
.eq-nav output { min-width: 150px; text-align: center; font-weight: 600; }
.eq-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--eq-border); margin-bottom: 16px; overflow-x: auto; }
.eq-pestanas button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--eq-muted); white-space: nowrap; }
.eq-pestanas button[aria-selected="true"] { color: var(--eq-ink); border-bottom-color: var(--eq-green); }
.eq-contador { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--eq-soft); font-size: 0.75rem; }
.eq-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.eq-cifra { border: 1px solid var(--eq-border); border-radius: 10px; padding: 14px; background: #fff; min-width: 0; }
.eq-cifra span { display: block; font-size: 0.75rem; color: var(--eq-muted); }
.eq-cifra strong { display: block; font-size: 1.375rem; font-weight: 600; margin-top: 2px; }
.eq-tabla-scroll { overflow-x: auto; border: 1px solid var(--eq-border); border-radius: 10px; background: #fff; }
.eq-tabla { width: 100%; border-collapse: collapse; }
.eq-tabla th, .eq-tabla td { padding: 10px; text-align: left; border-top: 1px solid var(--eq-border); vertical-align: top; }
.eq-tabla thead th { border-top: 0; font-size: 0.75rem; color: var(--eq-muted); font-weight: 600; background: #fafcfb; }
.eq-tabla td.n, .eq-tabla th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-tabla tbody tr[data-id] { cursor: pointer; }
.eq-tabla tbody tr[data-id]:hover, .eq-tabla tbody tr[aria-current="true"] { background: var(--eq-soft); }
.eq-etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.eq-etiqueta--ok { background: var(--eq-soft); color: #0b6b43; }
.eq-etiqueta--pendiente { background: #eef3fa; color: var(--eq-navy); }
.eq-etiqueta--aviso { background: var(--eq-warn-bg); color: var(--eq-warn); }
.eq-etiqueta--mal { background: var(--eq-bad-bg); color: var(--eq-bad); }
.eq-vacio { padding: 36px 16px; text-align: center; color: var(--eq-muted); }
.eq-mensaje { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; border-left: 3px solid var(--eq-navy); background: #f3f6fa; }
.eq-mensaje--error { border-left-color: var(--eq-bad); background: var(--eq-bad-bg); color: var(--eq-bad); }
.eq-mensaje--ok { border-left-color: var(--eq-green); background: var(--eq-soft); }
.eq-mensaje--aviso { border-left-color: var(--eq-warn); background: var(--eq-warn-bg); color: var(--eq-warn); }
.eq-mensaje ul { margin: 4px 0 0 18px; padding: 0; }
.eq-sub { font-size: 0.75rem; color: var(--eq-muted); }
/* Más específica que `.eq input`: un input oculto no puede ocupar el 100 % del ancho. */
.eq-oculto, .eq .eq-oculto, .eq input.eq-oculto { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px;
      padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Revisión de gastos: documento a la izquierda, campos a la derecha. */
.eq-revision { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 16px; margin-top: 16px;
      border: 1px solid var(--eq-border); border-radius: 12px; background: #fff; padding: 16px; }
.eq-documento { min-width: 0; }
.eq-documento img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #f4f6f5; border-radius: 8px; }
.eq-documento .eq-grupo { margin-top: 8px; }
.eq-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.eq-campos .eq-ancho { grid-column: 1 / -1; }
.eq-lineas { display: grid; gap: 8px; }
.eq-linea { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 44px; gap: 8px; align-items: end; }
.eq-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.eq-segmentos { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.eq-segmentos button[aria-pressed="true"] { background: var(--eq-soft); border-color: var(--eq-green); }
.eq-dialogo { border: 1px solid var(--eq-border); border-radius: 12px; padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.eq-dialogo::backdrop { background: rgba(6, 21, 13, .35); }
.eq-dialogo form { padding: 18px; display: grid; gap: 12px; }
.eq-dialogo h4 { margin: 0; font-size: 1.0625rem; }
/* Semana del equipo */
.eq-equipo { display: grid; gap: 16px; }
.eq-tecnico { border: 1px solid var(--eq-border); border-radius: 12px; background: #fff; }
.eq-tecnico header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; }
.eq-tecnico header h4 { margin: 0; font-size: 1rem; }
.eq-tecnico .eq-tabla-scroll { border: 0; border-top: 1px solid var(--eq-border); border-radius: 0 0 12px 12px; }
.eq-check, .eq input.eq-check { width: 22px; height: 22px; min-height: 0; flex: none; padding: 0; }
/* `hidden` manda sobre cualquier display de los componentes (.eq-boton es inline-flex). */
.eq [hidden] { display: none !important; }
/* El input de fichero va oculto antes de su etiqueta: el foco se ve en la etiqueta. */
.eq input.eq-oculto:focus-visible + label { outline: 3px solid var(--eq-green); outline-offset: 2px; }
@media (max-width: 900px) {
  .eq-revision { grid-template-columns: minmax(0, 1fr); }
  .eq-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .eq-campos { grid-template-columns: minmax(0, 1fr); }
  .eq-nav output { min-width: 110px; }
  .eq-barra h3 { font-size: 1.125rem; }
}
/* Página técnica (/tecnicos/equipo): móvil primero, Guardar siempre visible. */
.eq-pagina { margin: 0; background: var(--brand-bg, #f6fbf8); font-family: var(--fuente); }
.eq-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px;
      background: #fff; border-bottom: 1px solid var(--eq-border); }
.eq-cabecera strong { font-size: 0.9375rem; }
.eq-cabecera nav { display: flex; gap: 6px; flex-wrap: wrap; }
.eq-principal-tecnico { max-width: 720px; margin: 0 auto; padding: 16px 16px 120px; }
.eq-tarjeta { border: 1px solid var(--eq-border); border-radius: 12px; background: #fff; padding: 14px; margin-bottom: 12px; }
.eq-tarjeta h4 { margin: 0 0 10px; font-size: 1rem; }
.eq-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eq-tramo { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--eq-border); }
.eq-tramo:first-of-type { border-top: 0; }
.eq-tramo b { font-variant-numeric: tabular-nums; }
.eq-fijo { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff;
      border-top: 1px solid var(--eq-border); display: flex; justify-content: center; gap: 8px; z-index: 10; }
.eq-fijo button { flex: 1; max-width: 360px; }
@media (max-width: 420px) { .eq-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-fila .eq-pausa { grid-column: 1 / -1; } }
/* 15/10 («Bandeja clara»): /tecnicos/equipo con la cabecera compacta y la barra inferior de «Hoy» (ui/components.css);
   «Guardar tramo» queda justo encima de la barra. Solo en .eq-pagina: el portal (index.html) no cambia. */
.eq-pagina { --m-toast-bottom: 156px; }
.eq-pagina .m-mbar.eq-cabecera-m { position: sticky; top: 0; z-index: 20; min-height: 56px; padding: 4px max(16px, calc((100vw - 720px) / 2)); }
.eq-pagina .eq-cabecera-m__texto { min-width: 0; }
.eq-pagina .eq-cabecera-m .m-mbar__title { margin: 0; font-size: var(--m-fs-18); line-height: 1.2; }
.eq-pagina .eq-cabecera-m .m-mbar__sub { margin: 0; font-size: var(--m-fs-14); line-height: 1.3; }
.eq-pagina .m-tabbar.eq-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 max(0px, calc((100vw - 760px) / 2)) env(safe-area-inset-bottom); box-shadow: var(--m-shadow-dock); }
.eq-pagina .eq-tabbar [hidden] { display: none; }
.eq-pagina .eq-principal-tecnico { padding-bottom: 210px; }
.eq-pagina .eq-fijo { bottom: calc(60px + env(safe-area-inset-bottom)); }
.eq-pagina .eq :is(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=submit], [type=button], [type=reset], [type=color], [type=hidden]), select, textarea) { font-size: 16px; }
.eq-pagina .eq button, .eq-pagina .eq .eq-boton { min-height: var(--m-target-field); }
.eq-pagina .eq-etiqueta { font-size: 0.875rem; }
/* Revisión 15/10: la misma tinta de acción y el mismo foco azul que «Hoy» (ui/tokens.css), y 48 px también en los campos,
   el enlace del mes y el desplegable de compañeros (guantes). Solo en /tecnicos/equipo. */
.eq-pagina .eq .eq-principal { background: var(--m-action); border-color: var(--m-action); color: var(--m-on-action); }
.eq-pagina .eq .eq-principal:hover { background: var(--m-action-hover); border-color: var(--m-action-hover); }
.eq-pagina .eq :is(button, input, select, textarea, a, summary):focus-visible { outline: var(--m-focus-width) solid var(--m-focus); outline-offset: var(--m-focus-offset); }
.eq-pagina .eq :is(input:not([type=checkbox], [type=radio], [type=hidden]), select) { min-height: var(--m-target-field); }
.eq-pagina .eq summary { display: flex; align-items: center; min-height: var(--m-target-field); cursor: pointer; }
.eq-pagina .eq .eq-enlace { display: inline-flex; align-items: center; min-height: var(--m-target-field); }