/* v1-base.css — piezas compartidas de la V1 ampliada. Solo AÑADE; no cambia ningún token ni regla existente.
   Móvil primero (375 px): sin scroll horizontal, objetivos ≥ 40 px, cifras tabulares, barra de acciones fija con safe-area. */

.v1-page { min-width: 0; }
.v1-view { min-width: 0; }
.v1-pane[hidden] { display: none; }
.v1-money, .v1-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.v1-money { font-weight: 600; }
.v1-note { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--ink-2); font-size: var(--fs-sm); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.v1-note .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
/* Objetivos táctiles ≥ 40 px en las pantallas de la V1 y en sus hojas/modales (el .btn base mide 38 px y .btn--sm 30 px) */
.v1-page .btn, .v1-page .btn--sm, .lab-host .btn, .lab-host .btn--sm, .gx .btn, .page-head .btn, .overlay .btn { min-height: 40px; }
.v1-page .check { min-height: 40px; align-items: center; }
.v1-page .btn:not(.btn--block), .lab-host .btn:not(.btn--block), .page-head .btn:not(.btn--block) { min-width: 40px; }
.demo-banner { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--ink); background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: var(--r-md); }
.demo-banner .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.v1-note--warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.v1-note--err { border-left-color: var(--err); background: var(--err-soft); color: var(--ink); }
.v1-note--ok { border-left-color: var(--ok); background: var(--ok-soft); color: var(--ink); }
.v1-note--info { border-left-color: var(--info); background: var(--info-soft); color: var(--ink); }

/* Insignia con icono (nunca solo color) */
.v1-chip { display: inline-flex; align-items: center; gap: .3em; padding: .15em .6em; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-strong); max-width: 100%; }
.v1-chip > span { min-width: 0; overflow-wrap: anywhere; }
.v1-chip .ic { flex: none; }
.v1-chip--ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.v1-chip--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.v1-chip--err { background: var(--err-soft); color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.v1-chip--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.v1-chip--accent { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Esqueletos */
.v1-skel { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-2) 0; }
.v1-skel--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.v1-skel__row { display: flex; gap: var(--s-3); align-items: center; }

/* Cifras */
.v1-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.v1-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
.v1-kpi__l { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.v1-kpi__v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.v1-kpi__s { font-size: var(--fs-sm); color: var(--ink-3); }
.v1-kpi--warn .v1-kpi__v { color: var(--warn); } .v1-kpi--err .v1-kpi__v { color: var(--err); } .v1-kpi--ok .v1-kpi__v { color: var(--ok); }

/* Fichas de lista (móvil primero) */
.v1-list { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.v1-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); min-height: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; color: inherit; font: inherit; width: 100%; cursor: pointer; text-decoration: none; transition: border-color var(--t-fast), transform var(--t-fast); }
.v1-item:hover { border-color: var(--ink-2); }
.v1-item:active { transform: translateY(1px); }
.v1-item__t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.v1-item__s { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; }
.v1-item__r { grid-column: 2; grid-row: 1 / span 2; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.v1-item__x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v1-item.is-attn { border-left: 3px solid var(--warn); }
.v1-item.is-bad { border-left: 3px solid var(--err); }

/* Línea de tiempo vertical (estados de una hoja de gastos, solicitud…) */
.v1-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v1-steps__i { position: relative; display: flex; gap: var(--s-3); padding-bottom: var(--s-4); }
.v1-steps__i:last-child { padding-bottom: 0; }
.v1-steps__i:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: var(--line-strong); }
.v1-steps__d { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed var(--control-line); background: var(--surface); display: grid; place-items: center; color: var(--ok-ink); }
.v1-steps__i.is-done .v1-steps__d { border: 2px solid var(--ok); background: var(--ok); }
.v1-steps__i.is-now .v1-steps__d { border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.v1-steps__i.is-bad .v1-steps__d { border: 2px solid var(--err); background: var(--err); color: var(--err-ink); }
.v1-steps__i.is-todo { color: var(--ink-3); }

.v1-sum { margin: 0 0 var(--s-3); padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); }
.v1-more { margin-top: var(--s-3); }
.v1-more:empty { display: none; }

/* Barra de acciones fija abajo (formularios largos). En móvil queda por encima de la barra inferior de navegación. */
.v1-bar { position: sticky; bottom: 0; z-index: 12; display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: var(--s-3) 0; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); margin-top: var(--s-4); background: var(--paper); border-top: 1px solid var(--line-strong); box-shadow: 0 -10px 14px -10px color-mix(in srgb, var(--ink) 22%, transparent); }
.v1-bar > .btn { flex: 1 1 auto; }
.v1-bar > .v1-bar__total { margin-right: auto; font-family: var(--font-display); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
@media (max-width: 959px) { .v1-bar { bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--s-3); } .v1-bar > .btn { min-height: 44px; } }
@media (min-width: 720px) { .v1-bar > .btn { flex: 0 0 auto; } }

/* Formularios de las pantallas nuevas */
.v1-form { display: flex; flex-direction: column; gap: var(--s-4); }
.v1-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.v1-seg-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.v1-seg-row .btn { flex: 1 1 0; min-width: 64px; }
.v1-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: end; margin-bottom: var(--s-4); }
.v1-filters .field { min-width: 140px; flex: 1 1 150px; }
.v1-filters .btn { min-height: 40px; }

/* Tablas de las pantallas nuevas: en móvil se apilan en fichas (ui.table --stack ya lo hace). Cifras alineadas */
.v1-table td.num, .v1-table th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Aviso «función sin servidor» y estados de pantalla completa */
.v1-center { display: grid; place-items: center; min-height: 40vh; text-align: center; }

@media (pointer: coarse), (max-width: 719px) {
  .v1-item { min-height: 64px; }
  .v1-chip { min-height: 24px; }
  .v1-filters .field { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .v1-item { transition: none; } .v1-item:active { transform: none; } }
@media print { .v1-bar { display: none; } }

/* Paginación de ui.table: objetivos táctiles de 40 px también de ancho */
@media (pointer: coarse), (max-width: 719px) { .pagination .btn--icon, .table-foot .btn--icon { min-width: 40px; width: 40px; } }

/* ---- Fichar: elegir modalidad (sin preselección) y estado pendiente de sincronizar ---- */
.zone-pick-list { display: grid; gap: var(--s-2); }
.zone-pick { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 56px; text-align: left; }
.zone-pick__n { font-weight: 600; }
.zone-pick__s { font-size: var(--fs-xs); font-weight: 500; opacity: .85; }
.ini-live.is-pending { color: var(--warn); }
.ini-live.is-pending i { background: var(--warn); animation: none; }
.clock-btn.is-pending { background: var(--warn-soft); border-color: var(--warn); color: var(--ink); cursor: not-allowed; }
.clock-btn.is-pending .dot { background: var(--warn); opacity: 1; animation: none; }
.btn[disabled] { opacity: .65; cursor: not-allowed; }

/* Asignar jornada a equipos (desde Jornadas) */
.org-asg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.org-asg__i { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.org-asg__s { flex: 1 1 180px; min-width: 0; }

/* Casillas sueltas (sin la clase .check): mismo aspecto del sistema, nunca el azul nativo del navegador */
label:not(.switch):not(.check) > input[type="checkbox"]:not([class]) { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border: 1.5px solid var(--ink-3); border-radius: var(--r-xs); background: var(--raised); display: inline-grid; place-content: center; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
label:not(.switch):not(.check) > input[type="checkbox"]:not([class]):checked { background: var(--ink); border-color: var(--ink); }
label:not(.switch):not(.check) > input[type="checkbox"]:not([class])::after { content: ""; width: 10px; height: 6px; border: solid var(--ink-inv); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale var(--t-fast) var(--ease); }
label:not(.switch):not(.check) > input[type="checkbox"]:not([class]):checked::after { scale: 1; }
label:not(.switch):not(.check) > input[type="checkbox"]:not([class]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Usuarios (móvil): el nombre nunca se parte en «NOMBR E1_1…»; se ve entero, en varias líneas si hace falta */
@media (max-width: 719px) {
  .table--stack td .person__name.truncate, .table--cards td .person__name.truncate { display: block; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: normal; -webkit-line-clamp: unset; max-height: none; height: auto; line-height: 1.3; }
  .table--stack td .person__sub, .table--cards td .person__sub { display: block; position: static; margin-top: 2px; }
}

/* Aviso de cookies en la pantalla de acceso (escritorio): va sobre el panel de la marca, para no tapar las cuentas de demostración ni el formulario */
@media (min-width: 960px) { body:has(#loginForm) .cookie { left: var(--s-4); right: auto; bottom: 5.5rem; max-width: 420px; } }

/* Ronda 3 (P2): los avisos no tapan la barra fija de acciones (hoja de gastos) ni la cabecera de una hoja modal en el móvil */
@media (max-width: 959px) { body:has(.v1-bar) .toasts { bottom: auto; top: calc(var(--topbar-h, 56px) + var(--s-2) + env(safe-area-inset-top, 0px)); } }
@media (max-width: 719px) { body:has(.modal) .toasts { top: auto; bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); } }