/* ==========================================================================
   Estilos del sistema. Iguales para todos los negocios: el color vive en tema.css.
   1 Tokens · 2 Base · 3 Armazón · 4 Componentes · 5 Entrada · 6 Hoy · 7 Embudo
   8 Agenda · 9 Clientes y fichas · 10 Ajustes · 11 Asistente · 12 Pantallas pequeñas
   13 Impresión · 14 Trabajos en terreno
   ========================================================================== */

/* 1 · Tokens de respaldo (tema.css los sobrescribe con los del negocio) ------ */
:root {
  color-scheme: light;
  --color-principal: #1f2328; --color-principal-texto: #ffffff;
  --color-acento: #2459d6; --color-acento-texto: #ffffff; --acento-tinta: #2459d6;
  --enlace: #1f2328; --foco: #1f2328;
  --fondo: #fafaf9; --superficie: #ffffff; --superficie-2: #f2f3f2; --borde: #e4e6e5; --borde-campo: #939595;
  --texto: #0e1013; --texto-suave: #535b60; --texto-sutil: #676f73;
  --info: #2459d6; --exito: #1e7a46; --aviso: #9a5b00; --peligro: #c3362b;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #4a3aa7; --serie-5: #e87ba4; --serie-6: #008300;
  --sombra-tarjeta: 0 1px 2px rgb(0 0 0 / 4%), 0 1px 1px rgb(0 0 0 / 2%);
  --sombra-flotante: 0 12px 40px -12px rgb(0 0 0 / 25%), 0 2px 6px rgb(0 0 0 / 6%);
  --velo: rgb(0 0 0 / 32%);
  --radio: 10px; --radio-kpi: 12px; --radio-tarjeta: 16px; --radio-dialogo: 22px; --radio-hoja: 28px; --radio-pildora: 999px;
  --radio-sm: 6px;
  --sombra: var(--sombra-tarjeta);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --t-corta: 200ms; --t-media: 250ms; --t-fondo: 300ms; --t-dialogo: 400ms;
  --t-toque: 150ms; --t-entra: 280ms; --t-sale: 200ms; --escalon: 35ms;
  --lateral: 240px;
  --inferior: 57px;
  accent-color: var(--color-principal);
  caret-color: var(--acento-tinta);
  scrollbar-color: color-mix(in srgb, var(--texto) 22%, transparent) transparent;
}

/* 2 · Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fuente); font-size: 14px; line-height: 1.5; letter-spacing: -0.006em; color: var(--texto);
  background: var(--fondo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 15px; } h3 { font-size: 14px; }
p { margin: 0 0 .75rem; }
a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { max-width: 100%; }
button { font: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }
/* Lo que pinta el navegador y no el sistema: selección, barras y cifras */
::selection { background: color-mix(in srgb, var(--color-acento) 30%, transparent); color: var(--texto); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto) 20%, transparent); background-clip: padding-box;
  border: 3px solid transparent; border-radius: var(--radio-pildora); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--texto) 34%, transparent); background-clip: padding-box; }
input[type="number"], input[type="date"], input[type="time"], input[type="tel"], .codigo { font-variant-numeric: tabular-nums; }
.suave { color: var(--texto-suave); }
.sutil { color: var(--texto-sutil); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icono { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono--16 { width: 16px; height: 16px; }
.icono--20 { width: 20px; height: 20px; }
.icono--24 { width: 24px; height: 24px; }
.saltar { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--radio); background: var(--superficie);
  color: var(--texto); box-shadow: var(--sombra-flotante); transition: top var(--t-corta) var(--curva); }
.saltar:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 3 · Armazón --------------------------------------------------------------- */
.armazon { min-height: 100vh; min-height: 100dvh; }
@media (min-width: 768px) {
  .armazon { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); }
}
/* Barra lateral (escritorio) */
.lateral { display: none; }
@media (min-width: 768px) {
  .lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 12px;
    border-right: 1px solid var(--borde); background: color-mix(in srgb, var(--superficie) 78%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); z-index: 30; view-transition-name: lateral; }
}
.lateral__marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; min-width: 0; text-decoration: none; color: var(--texto); }
.lateral__logo, .superior__logo { width: 32px; height: 32px; flex: none; object-fit: contain; }
.lateral__nombre { font-weight: 600; font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lateral__nav { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu__grupo { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--texto-sutil); padding: 14px 10px 4px; }
.menu__enlace { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radio);
  color: var(--texto-suave); text-decoration: none; font-weight: 450; transition: background var(--t-corta) var(--curva), color var(--t-corta) var(--curva); }
.menu__enlace:hover { background: var(--superficie-2); color: var(--texto); }
.menu__enlace:active { transform: scale(.98); background: color-mix(in srgb, var(--texto) 7%, var(--superficie-2)); }
.menu__enlace { transition: background var(--t-corta) var(--curva), color var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); }
.menu__enlace[aria-current="page"] { background: color-mix(in srgb, var(--color-acento) 14%, var(--superficie)); color: var(--texto); font-weight: 600; }
.menu__enlace[aria-current="page"]::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--color-acento); }
.menu__enlace[aria-current="page"] .icono { color: var(--acento-tinta); }
.lateral__pie { position: relative; border-top: 1px solid var(--borde); padding-top: 8px; }
.usuario { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--radio); background: none;
  color: var(--texto); text-align: left; cursor: pointer; transition: background var(--t-corta) var(--curva); }
.usuario:hover, .usuario[aria-expanded="true"] { background: var(--superficie-2); }
.usuario:active { transform: scale(.98); }
.usuario__texto { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.usuario__nombre { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario__rol { font-size: 12px; color: var(--texto-suave); }
.avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radio-pildora); font-size: 12px; font-weight: 600;
  background: var(--color-principal); color: var(--color-principal-texto); letter-spacing: 0; }
.avatar--grande { width: 56px; height: 56px; font-size: 20px; border-radius: 16px; }
.menu-usuario { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); padding: 6px; border-radius: var(--radio-kpi); border: 1px solid var(--borde);
  background: var(--superficie); box-shadow: var(--sombra-flotante); display: grid; gap: 2px; z-index: 40;
  animation: aparecer var(--t-corta) var(--curva); }
.menu-usuario__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none;
  color: var(--texto); text-decoration: none; text-align: left; cursor: pointer; width: 100%; }
.menu-usuario__item:hover, .menu-usuario__item:focus-visible { background: var(--superficie-2); }
.menu-usuario__item--peligro { color: var(--peligro); }
.menu-usuario__sep { height: 1px; background: var(--borde); margin: 4px 2px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Barra superior (móvil) */
.superior { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 16px;
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
  background: color-mix(in srgb, var(--superficie) 82%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--borde); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  view-transition-name: superior; }
/* Al bajar, el borde se vuelve sombra y el logo se recoge un poco */
.superior::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--texto) 9%, transparent), transparent);
  transition: opacity var(--t-corta) var(--curva); }
.superior--compacta { border-bottom-color: transparent; }
.superior--compacta::after { opacity: 1; }
.superior__logo { transition: transform var(--t-entra) var(--curva); transform-origin: left center; }
.superior--compacta .superior__logo { transform: scale(.84); }
.superior__nombre { transition: transform var(--t-entra) var(--curva); }
.superior--compacta .superior__nombre { transform: translateX(-4px); }
.superior__usuario { transition: transform var(--t-toque) var(--curva); -webkit-tap-highlight-color: transparent; }
.superior__usuario:active { transform: scale(.92); }
.superior__nombre { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.superior__usuario { border: 0; background: none; padding: 4px; border-radius: var(--radio-pildora); cursor: pointer; }
@media (min-width: 768px) { .superior { display: none; } }

/* Barra inferior (móvil) */
.inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  border-top: 1px solid var(--borde); view-transition-name: inferior;
  background: color-mix(in srgb, var(--superficie) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
.inferior__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; min-width: 0;
  border: 0; background: none; color: var(--texto-suave); font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer; padding: 0 2px;
  -webkit-tap-highlight-color: transparent; transition: color var(--t-corta) var(--curva), transform 120ms var(--curva); }
.inferior__item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inferior__item .icono { width: 22px; height: 22px; }
.inferior__item[aria-current="page"], .inferior__item[data-activo] { color: var(--texto); font-weight: 600; }
.inferior__item[aria-current="page"] .icono, .inferior__item[data-activo] .icono { color: var(--acento-tinta); }
.inferior__item .icono { transition: transform var(--t-toque) var(--curva); }
.inferior__item:active { transform: scale(.94); }
.inferior__item:active .icono { transform: translateY(1px); }
.inferior__item:focus-visible { outline-offset: -4px; border-radius: var(--radio); }
.inferior__indicador { position: absolute; top: -1px; left: env(safe-area-inset-left); height: 3px; pointer-events: none;
  width: calc((100% - env(safe-area-inset-left) - env(safe-area-inset-right)) / var(--n, 1));
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--t-entra) var(--curva), opacity var(--t-corta) var(--curva); }
.inferior__indicador::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-acento); }
.inferior[data-sin-activo] .inferior__indicador { opacity: 0; }
.inferior:not([data-listo]) .inferior__indicador { transition: none; }
@media (min-width: 768px) { .inferior { display: none; } }

/* Hoja «Más» (móvil) */
.hoja { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-flotante); padding-bottom: env(safe-area-inset-bottom); }
.hoja[open] { display: flex; flex-direction: column; }
.hoja__asa { flex: none; position: relative; width: 36px; height: 5px; border-radius: 3px; background: var(--borde-campo); margin: 8px auto 4px; opacity: .6; }
.hoja__asa::after { content: ""; position: absolute; inset: -12px -48px; }   /* zona de agarre cómoda */
.hoja__asa, .hoja__cabecera { touch-action: none; }
.hoja__cabecera { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 16px 8px; }
.hoja__cabecera h2 { margin: 0; font-size: 17px; }
.hoja__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 0 8px 12px; display: grid; gap: 2px; align-content: start; }
.hoja__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--radio); width: 100%;
  background: none; color: var(--texto); text-decoration: none; font-size: 15px; text-align: left; cursor: pointer; }
.hoja__item { transition: background var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); -webkit-tap-highlight-color: transparent; }
.hoja__item:hover, .hoja__item:focus-visible { background: var(--superficie-2); }
.hoja__item:active { transform: scale(.98); background: color-mix(in srgb, var(--texto) 7%, var(--superficie-2)); }
.hoja__item[aria-current="page"] { background: color-mix(in srgb, var(--color-acento) 14%, var(--superficie)); font-weight: 600; }
.hoja__item--peligro { color: var(--peligro); }
.hoja__sep { height: 1px; background: var(--borde); margin: 6px 12px; }
.hoja__usuario { display: flex; align-items: center; gap: 12px; padding: 8px 20px 12px; }
/* Diálogo y hoja: entran con muelle desde abajo (o creciendo, en escritorio) y salen más
   rápido. La salida usa transiciones discretas: donde no existen, simplemente se cierran. */
.hoja, .modal { transition: transform var(--t-entra) var(--curva), opacity var(--t-entra) var(--curva); }
.hoja { transform: translateY(100%); }
.hoja[open] { transform: none; }
.hoja--arrastrando { transition: none; }
.modal { opacity: 0; transform: translateY(12px) scale(.97); }
.modal[open] { opacity: 1; transform: none; }
.hoja::backdrop, .modal::backdrop { background: var(--velo); opacity: 0; -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  transition: opacity var(--t-entra) var(--curva); }
.hoja[open]::backdrop, .modal[open]::backdrop { opacity: 1; }
@starting-style {
  .hoja[open] { transform: translateY(100%); }
  .modal[open] { opacity: 0; transform: translateY(12px) scale(.97); }
  .hoja[open]::backdrop, .modal[open]::backdrop { opacity: 0; }
}
@supports (overlay: auto) {
  .hoja, .modal { transition: transform var(--t-sale) var(--curva), opacity var(--t-sale) var(--curva),
      overlay var(--t-sale) allow-discrete, display var(--t-sale) allow-discrete; }
  .hoja::backdrop, .modal::backdrop { transition: opacity var(--t-sale) var(--curva), overlay var(--t-sale) allow-discrete, display var(--t-sale) allow-discrete; }
  .hoja[open], .modal[open] { transition-duration: var(--t-entra); }
  .hoja[open]::backdrop, .modal[open]::backdrop { transition-duration: var(--t-entra); }
  .hoja--arrastrando[open] { transition: none; }
}


/* Contenido */
.vista { width: 100%; max-width: 72rem; margin: 0 auto; outline: none; view-transition-name: contenido;
  padding: 16px max(16px, env(safe-area-inset-right)) calc(6rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 768px) { .vista { padding: 32px; } }
/* La pantalla nueva se prepara en la misma celda, invisible, hasta que tiene sus datos */
.vista > * { grid-area: 1 / 1; min-width: 0; }
.vista__pagina--preparando { visibility: hidden; pointer-events: none; }
/* Un solo momento de movimiento por pantalla: las piezas suben en cascada */
.entra { animation: pieza-entra var(--t-entra) var(--curva) both; animation-delay: calc(var(--i, 0) * var(--escalon)); }
@keyframes pieza-entra { from { opacity: 0; transform: translateY(10px); } }
/* Cambio de pantalla: la cabecera y las barras se quedan quietas; el contenido se funde */
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
::view-transition-group(superior), ::view-transition-group(inferior), ::view-transition-group(lateral), ::view-transition-group(contenido) { animation: none; }
::view-transition-old(superior), ::view-transition-old(inferior), ::view-transition-old(lateral) { display: none; }
::view-transition-new(superior), ::view-transition-new(inferior), ::view-transition-new(lateral) { animation: none; }
::view-transition-old(contenido) { animation: vt-sale 160ms var(--curva) both; }
::view-transition-new(contenido) { animation: vt-entra 240ms var(--curva) both; }
@keyframes vt-sale { to { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
@keyframes vt-entra { from { opacity: 0; } }
/* Esqueleto: solo si la pantalla tarda; sobrio y sin brillos */
.esqueleto { display: grid; gap: 16px; align-content: start; }
.esqueleto > *, .esqueleto__kpis > span { border-radius: var(--radio-kpi); background: var(--superficie-2); animation: latido 1.4s ease-in-out infinite; }
.esqueleto__titulo { width: min(16rem, 60%); height: 34px; margin-bottom: 8px; }
.esqueleto__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: none !important; animation: none !important; }
@media (min-width: 1024px) { .esqueleto__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.esqueleto__kpis > span { height: 84px; }
.esqueleto__bloque { height: 180px; border-radius: var(--radio-tarjeta); }
.esqueleto__bloque--corto { height: 120px; }
@keyframes latido { 50% { opacity: .55; } }
.vista__cabecera, .cabecera-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; justify-content: space-between; margin-bottom: 24px; }
.vista__cabecera h1, .cabecera-pagina h1 { margin: 0; font-size: 28px; }
@media (min-width: 768px) { .vista__cabecera h1, .cabecera-pagina h1 { font-size: 30px; } }
.cabecera-pagina__texto { min-width: 0; flex: 1 1 18rem; }
.cabecera-pagina .descripcion, .cabecera-pagina__saludo { margin: 4px 0 0; color: var(--texto-suave); font-size: 14px; }
.cabecera-pagina__saludo { margin: 0 0 2px; }
.cabecera-pagina .acciones, .vista__cabecera .acciones, .vista__cabecera .buscador { gap: 8px; }
.cabecera-pagina__volver { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); text-decoration: none; font-size: 13px; margin-bottom: 8px; }
.cabecera-pagina__volver:hover { color: var(--texto); }

/* 4 · Componentes ----------------------------------------------------------- */
/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-height: 40px; padding: 0 14px;
  border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  box-shadow: var(--sombra-tarjeta);
  transition: background var(--t-corta) var(--curva), border-color var(--t-corta) var(--curva), filter var(--t-corta) var(--curva), transform 120ms var(--curva); }
.boton:hover { background: var(--superficie-2); }
.boton:active { transform: scale(.97); box-shadow: none; }
.boton { -webkit-tap-highlight-color: transparent; }
.boton--principal:active, .boton--acento:active { filter: brightness(.94); }
.boton .icono { width: 16px; height: 16px; }
.boton--principal { background: var(--color-principal); color: var(--color-principal-texto); border-color: transparent; }
.boton--principal:hover { background: var(--color-principal); filter: brightness(1.12); }
.boton--acento { background: var(--color-acento); color: var(--color-acento-texto); border-color: transparent; }
.boton--acento:hover { background: var(--color-acento); filter: brightness(1.05); }
.boton--fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--texto-suave); }
.boton--fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.boton--peligro { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }
.boton--peligro:hover { background: color-mix(in srgb, var(--peligro) 10%, var(--superficie)); }
.modal__pie .boton--peligro[type="submit"] { background: var(--peligro); color: #fff; border-color: transparent; }
.boton--mini { height: 32px; min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.boton--icono { width: 36px; height: 36px; min-height: 36px; padding: 0; }
.boton--icono.boton--mini { width: 32px; height: 32px; }
.boton--grande { height: 48px; min-height: 48px; padding: 0 18px; font-size: 15px; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.boton[disabled]:hover, .boton[aria-disabled="true"]:hover { background: var(--superficie); filter: none; }
.boton--principal[disabled]:hover { background: var(--color-principal); }
.boton--acento[disabled]:hover { background: var(--color-acento); }
.boton--fantasma[disabled]:hover { background: transparent; }
/* Esperando respuesta: el botón se queda quieto y gira mientras dura la petición */
.boton[data-cargando], .entrada .boton[type="submit"][disabled], .modal__pie .boton[type="submit"][disabled] {
  opacity: 1; cursor: progress; }
.boton[data-cargando]::before, .entrada .boton[type="submit"][disabled]::before, .modal__pie .boton[type="submit"][disabled]::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color: currentColor;
  animation: girar .7s linear infinite; }

/* Tarjetas y rejillas */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 16px; box-shadow: var(--sombra-tarjeta); min-width: 0; }
@media (min-width: 768px) { .tarjeta { padding: 20px; } }
.tarjeta > h2, .tarjeta__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.tarjeta__cabecera h2 { margin: 0; font-size: 15px; }
.tarjeta__cabecera .acciones { gap: 6px; }
.tarjeta__pie { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.tarjeta--plana { box-shadow: none; }
.tarjeta--sin-relleno { padding: 0; overflow: hidden; }
.tarjeta--sin-relleno > h2, .tarjeta--sin-relleno > .tarjeta__cabecera { padding: 16px 16px 0; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.rejilla + .rejilla, .kpis + .rejilla, .rejilla + .tarjeta, .tarjeta + .tarjeta, .tarjeta + .rejilla { margin-top: 16px; }
.panel { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 16px; }
@media (min-width: 1024px) { .panel { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.panel__columna { display: grid; gap: 16px; min-width: 0; }
.panel > .tarjeta, .panel__columna > .tarjeta { margin-top: 0; }   /* en rejilla el hueco lo pone gap */
.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 24px 0 10px; }
.seccion-titulo h2 { margin: 0; font-size: 15px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-kpi);
  padding: 12px; box-shadow: var(--sombra-tarjeta); text-decoration: none; color: var(--texto); }
@media (min-width: 768px) { .kpi { padding: 16px; } }
a.kpi { transition: border-color var(--t-corta) var(--curva), background var(--t-corta) var(--curva); }
a.kpi:hover { border-color: var(--borde-campo); }
a.kpi { transition: border-color var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); }
a.kpi:active { transform: scale(.98); box-shadow: none; }
.kpi__etiqueta { order: -1; display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 12px; font-weight: 500; }
.kpi__etiqueta .icono { width: 14px; height: 14px; color: var(--texto-sutil); }
.kpi__valor { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .kpi__valor { font-size: 22px; } }
.kpi__valor small { font-size: 14px; font-weight: 500; color: var(--texto-suave); letter-spacing: 0; }
.kpi__detalle { font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.kpi--ancho { grid-column: span 2; }
@media (min-width: 1024px) { .kpi--ancho { grid-column: span 1; } }

/* Insignias */
.insignia { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radio-pildora); font-size: 11px; font-weight: 500; line-height: 1.5;
  background: var(--superficie-2); color: var(--texto-suave); white-space: nowrap; vertical-align: middle; letter-spacing: 0; }
.insignia--peligro { background: color-mix(in srgb, var(--peligro) 12%, var(--superficie)); color: var(--peligro); }
.insignia--aviso { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); color: var(--aviso); }
.insignia--exito { background: color-mix(in srgb, var(--exito) 12%, var(--superficie)); color: var(--exito); }
.insignia--info { background: color-mix(in srgb, var(--info) 12%, var(--superficie)); color: var(--info); }
.insignia--acento { background: color-mix(in srgb, var(--color-acento) 22%, var(--superficie)); color: var(--texto); }
.insignia--solida { background: var(--color-principal); color: var(--color-principal-texto); }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--borde); }
.lista > li:first-child { border-top: 0; padding-top: 4px; }
.lista > li:last-child { padding-bottom: 0; }
.lista__principal { min-width: 0; flex: 1; display: grid; gap: 2px; }
.lista__titulo { font-weight: 600; display: block; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
a.lista__titulo:hover { text-decoration: underline; }
.lista__principal .suave { font-size: 13px; }
.lista__vacia { color: var(--texto-suave); padding: 8px 0; }
.lista > li.lista__vacia { justify-content: flex-start; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Formularios */
.formulario { display: grid; gap: 14px; }
.formulario--doble { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.formulario label, .campo { display: grid; gap: 6px; font-weight: 500; font-size: 14px; color: var(--texto-suave); }
.formulario label > input, .formulario label > select, .formulario label > textarea { color: var(--texto); }
.formulario .casilla, .casilla { display: flex; gap: 10px; align-items: center; font-weight: 450; color: var(--texto); }
.formulario fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formulario legend { font-weight: 500; color: var(--texto-suave); padding: 0; margin-bottom: 6px; }
.ayuda { font-size: 12px; color: var(--texto-sutil); font-weight: 400; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-campo);
  border-radius: var(--radio); padding: 0 12px; height: 40px; min-height: 40px; width: 100%; letter-spacing: normal;
  transition: border-color var(--t-corta) var(--curva), box-shadow var(--t-corta) var(--curva); }
@media (min-width: 768px) { input, select, textarea { font-size: 14px; } }
textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { padding-right: 32px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-acento) 22%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--color-principal); box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
input[type="file"] { height: auto; padding: 8px; }
input::placeholder, textarea::placeholder { color: var(--texto-sutil); }
input[disabled], select[disabled], textarea[disabled], fieldset[disabled] input { opacity: .6; cursor: not-allowed; }
.campo-ancho { grid-column: 1 / -1; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; --canal: 4px; }
/* Dentro de una tarjeta sin relleno, la tabla pone ella misma el margen lateral */
.tarjeta--sin-relleno .tabla { --canal: 16px; }
.tarjeta--sin-relleno > .paginacion { padding: 0 16px 16px; margin-top: 8px; }
.tabla th, .tabla td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { font-size: 12px; font-weight: 500; color: var(--texto-suave); padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: var(--canal); }
.tabla th:last-child, .tabla td:last-child { padding-right: var(--canal); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr[data-id] { cursor: pointer; transition: background var(--t-corta) var(--curva); }
.tabla tbody tr[data-id]:hover { background: var(--superficie-2); }
.tabla tbody tr[data-id]:active { background: color-mix(in srgb, var(--texto) 7%, var(--superficie-2)); }
.tabla tbody tr[data-id] { -webkit-tap-highlight-color: transparent; }
.tabla .num, .tabla .derecha { text-align: right; }
.tabla td.num strong { font-weight: 600; }
.tabla__secundario { display: block; font-size: 12px; color: var(--texto-suave); }

/* Diálogo */
/* El cuerpo es lo único que se desplaza: el pie con los botones no se sale nunca */
.modal { border: 1px solid var(--borde); border-radius: var(--radio-dialogo); padding: 0; width: min(34rem, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  color: var(--texto); background: var(--superficie); box-shadow: var(--sombra-flotante); overflow: hidden; }
.modal[open] { display: flex; flex-direction: column; }
.modal > form, .modal__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px 24px; }
.modal__cabecera h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.modal__cuerpo { flex: 1 1 auto; min-height: 0; padding: 18px 24px 20px; overflow-y: auto; overscroll-behavior: contain; }
.modal__cuerpo > h2:first-child { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.modal__cuerpo > p:first-child { color: var(--texto-suave); }
.modal__pie { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--borde); background: var(--superficie); }
.modal__error, .entrada__error { color: var(--peligro); font-weight: 500; }
.modal__error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio); margin-bottom: 12px;
  background: color-mix(in srgb, var(--peligro) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--peligro) 25%, var(--borde)); }

/* Aviso flotante */
.aviso-flotante { position: fixed; z-index: 60; left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--inferior) + 12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radio-kpi); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-flotante); font-weight: 500; }
.aviso-flotante--entra { animation: aviso-entra var(--t-entra) var(--curva); }
.aviso-flotante__texto { min-width: 0; overflow-wrap: anywhere; }
.aviso-flotante .icono { color: var(--exito); }
.aviso-flotante--error { border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }
.aviso-flotante--error .icono { color: var(--peligro); }
.aviso-flotante--sale { animation: aviso-sale var(--t-sale) var(--curva) forwards; }
@media (min-width: 768px) { .aviso-flotante { left: auto; right: 24px; bottom: 24px; max-width: 24rem; } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Franjas (avisos dentro de la página) */
.franja { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin: 0 0 12px; border-radius: var(--radio-kpi);
  background: color-mix(in srgb, var(--aviso) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--aviso) 24%, var(--borde)); color: var(--texto); }
.franja::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--aviso); }
.franja--peligro { background: color-mix(in srgb, var(--peligro) 8%, var(--superficie)); border-color: color-mix(in srgb, var(--peligro) 25%, var(--borde)); }
.franja--peligro::before { background: var(--peligro); }
.franja--info { background: color-mix(in srgb, var(--info) 7%, var(--superficie)); border-color: color-mix(in srgb, var(--info) 22%, var(--borde)); }
.franja--info::before { background: var(--info); }
.franja a { color: inherit; font-weight: 600; }

/* Estado vacío y carga */
.vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 40px 24px;
  border: 1px dashed color-mix(in srgb, var(--borde-campo) 55%, var(--borde)); border-radius: var(--radio-kpi);
  background: color-mix(in srgb, var(--superficie-2) 45%, transparent); color: var(--texto-suave); }
.vacio .icono { width: 24px; height: 24px; color: var(--texto-sutil); }
.vacio strong { color: var(--texto); font-weight: 600; }
.vacio p { margin: 0; max-width: 32rem; }
.vacio--compacto { padding: 20px 16px; }
.cargando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto-suave); padding: 48px 0; text-align: center; }
.cargando::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borde); border-top-color: var(--texto-suave); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Control segmentado, chips y pestañas de ficha */
.segmentado { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--borde); }
.segmentado button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--texto-suave); font-weight: 500; cursor: pointer;
  transition: background var(--t-corta) var(--curva), color var(--t-corta) var(--curva); }
.segmentado button:hover { color: var(--texto); }
.segmentado button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-tarjeta), 0 0 0 1px var(--borde); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radio-pildora); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto-suave); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background var(--t-corta) var(--curva), border-color var(--t-corta) var(--curva), color var(--t-corta) var(--curva); }
.chip:hover { border-color: var(--borde-campo); color: var(--texto); }
.chip:active, .segmentado button:active { transform: scale(.96); }
.chip, .segmentado button { -webkit-tap-highlight-color: transparent; }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--color-acento) 16%, var(--superficie)); border-color: color-mix(in srgb, var(--color-acento) 60%, var(--borde)); color: var(--texto); }
.chip[aria-pressed="false"] .grua-punto { opacity: .35; }
.pestanas-ficha { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 24px 0 16px; overflow-x: auto; scrollbar-width: none; }
.pestanas-ficha::-webkit-scrollbar { display: none; }
.pestanas-ficha [role="tab"] { position: relative; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--texto-suave); font-weight: 500; cursor: pointer; white-space: nowrap; }
.pestanas-ficha [role="tab"]:hover { color: var(--texto); }
.pestanas-ficha [role="tab"][aria-selected="true"] { color: var(--texto); font-weight: 600; }
.pestanas-ficha [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-acento); }
.pestanas-ficha .insignia { margin-left: 4px; }

/* Grúas: un color por máquina (siempre acompañado del nombre) */
.grua-punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--grua, var(--texto-sutil)); }
.grua--1 { --grua: var(--serie-1); } .grua--2 { --grua: var(--serie-2); } .grua--3 { --grua: var(--serie-3); }
.grua--4 { --grua: var(--serie-4); } .grua--5 { --grua: var(--serie-5); } .grua--6 { --grua: var(--serie-6); }
.grua-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: var(--radio-pildora); font-size: 12px; font-weight: 500;
  background: color-mix(in srgb, var(--grua, var(--texto-sutil)) 12%, var(--superficie)); color: var(--texto); white-space: nowrap; }

/* Autocompletar (cliente) */
.combo { position: relative; }
.combo__lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 4px; max-height: 15rem; overflow-y: auto;
  border-radius: var(--radio-kpi); border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra-flotante); }
.combo__opcion { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); font-weight: 500; }
.combo__opcion small { font-size: 12px; color: var(--texto-suave); font-weight: 400; }
.combo__opcion[aria-selected="true"], .combo__opcion:hover { background: var(--superficie-2); }
.combo__opcion--nuevo { color: var(--texto); border-top: 1px solid var(--borde); border-radius: 0 0 8px 8px; }
.combo__elegido { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; min-height: 40px; border-radius: var(--radio);
  border: 1px solid var(--borde-campo); background: var(--superficie-2); color: var(--texto); font-weight: 500; }
.combo__elegido small { display: block; color: var(--texto-suave); font-weight: 400; font-size: 12px; }
.opciones-grua { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion-grua { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px; border-radius: var(--radio);
  border: 1px solid var(--borde-campo); background: var(--superficie); color: var(--texto); font-weight: 500; cursor: pointer; }
.opcion-grua input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-grua:has(input:checked) { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); background: color-mix(in srgb, var(--grua, var(--texto-sutil)) 10%, var(--superficie)); }
.opcion-grua:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.duraciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--texto-suave); font-weight: 400; }

/* 5 · Entrada (acceso e instalación) ------------------------------------------ */
/* Dos columnas en pantalla grande; en el móvil, la tarjeta sola y centrada de verdad:
   los márgenes automáticos centran mientras sobre sitio y se anulan si el teclado
   deja menos alto que la tarjeta, así nunca se corta por arriba. */
.pagina-entrada { display: flex; min-height: 100vh; min-height: 100dvh; background: var(--fondo); }
.entrada-lado { display: flex; flex: 1 1 0; min-width: 0; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); }
.entrada-lado > .entrada { margin: auto; }
.pagina-entrada > .entrada { margin: auto; width: min(26rem, 100% - 2rem); }  /* pantalla de instalación */

/* En oscuro el panel no se pinta del color principal (ahí ya es el acento): iría
   una mancha de color saturada a pantalla completa, mala de noche y de madrugada. */
.entrada-marca { display: none; --panel-fondo: var(--color-principal); --panel-texto: var(--color-principal-texto); }
:root[data-tema="oscuro"] .entrada-marca { --panel-fondo: var(--superficie-2); --panel-texto: var(--texto); }
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] .entrada-marca { --panel-fondo: var(--superficie-2); --panel-texto: var(--texto); }
}
@media (min-width: 900px) {
  .entrada-marca { position: relative; display: flex; flex: 1.12 1 0; min-width: 0; flex-direction: column; gap: 20px;
    padding: 48px; overflow: hidden; background: var(--panel-fondo); color: var(--panel-texto); }
  .entrada-marca__centro { margin-top: auto; }  /* el mensaje y la nota, juntos abajo */
  .entrada-marca::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(88% 66% at 10% 0%, color-mix(in srgb, var(--color-acento) 20%, transparent), transparent 62%); }
  .entrada-marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-acento); }
  .entrada-marca > * { position: relative; }
  .entrada-lado { padding: 48px 32px; }
}
.entrada-marca__logo { width: auto; height: 124px; max-width: min(15rem, 100%); object-fit: contain; object-position: left center; }
.entrada-marca__centro { display: grid; gap: 12px; justify-items: start; }
.entrada-marca__lema { margin: 0; max-width: 17ch; font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.entrada-marca__apoyo { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.5;
  color: color-mix(in srgb, var(--panel-texto) 78%, var(--panel-fondo)); }
.entrada-marca__pie { margin: 0; font-size: 12px; color: color-mix(in srgb, var(--panel-texto) 66%, var(--panel-fondo)); }

.entrada { width: min(26rem, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  padding: 28px 24px 24px; box-shadow: var(--sombra-tarjeta); animation: entrada-llega var(--t-dialogo) var(--curva); }
@keyframes entrada-llega { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.entrada__logo { width: 56px; height: 56px; object-fit: contain; object-position: left center; display: block; margin-bottom: 18px; }
@media (min-width: 900px) { .entrada-lado .entrada__logo { display: none; } }
.entrada__titulo { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.022em; text-wrap: balance; }
@media (min-width: 400px) { .entrada__titulo { font-size: 28px; } }
.entrada__texto { color: var(--texto-suave); margin: 0 0 22px; }
.entrada .formulario { gap: 16px; }
.entrada .formulario > label { font-size: 13px; }
.entrada input[type="email"], .entrada input[type="password"], .entrada input[type="text"] { height: 48px; min-height: 48px; font-size: 16px; }
.entrada .casilla { min-height: 44px; margin: -6px 0; font-size: 14px; }
.entrada .casilla input[type="checkbox"] { width: 20px; height: 20px; }
.entrada .boton--principal { width: 100%; margin-top: 4px; }
.entrada .franja, .entrada__error { margin-bottom: 18px; }
.entrada__nota { margin: 22px 0 0; font-size: 13px; color: var(--texto-suave); }
.entrada__error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radio);
  background: color-mix(in srgb, var(--peligro) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--peligro) 25%, var(--borde)); }
.entrada__error::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--peligro); }
/* Móvil con el teclado abierto: cabe todo sin que el botón quede fuera */
@media (max-width: 899px) and (max-height: 560px) {
  .entrada-lado { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .entrada { padding: 20px; }
  .entrada__logo { width: 40px; height: 40px; margin-bottom: 10px; }
  .entrada__titulo { font-size: 22px; }
  .entrada__texto { margin-bottom: 16px; }
  .entrada .formulario { gap: 12px; }
  .entrada__nota { margin-top: 16px; }
}

/* 6 · Hoy -------------------------------------------------------------------- */
.hoy-fecha { color: var(--texto-suave); font-weight: 500; }
.medidor { display: grid; gap: 4px; margin-top: 8px; }
.medidor__fila { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--texto-suave); }
.medidor__pista { height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.medidor__barra { display: block; height: 100%; border-radius: 3px; background: var(--color-acento); width: var(--ancho, 0%); }
.medidor__barra--gasto { background: color-mix(in srgb, var(--peligro) 60%, var(--superficie)); }
/* Flota ahora: la firma del panel */
.flota { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.flota__grua { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radio-kpi); border: 1px solid var(--borde);
  background: var(--superficie); box-shadow: var(--sombra-tarjeta); min-width: 0; }
.flota__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* El color de cada grúa, en el mismo punto que se usa en el resto del sistema */
.flota__nombre { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.flota__nombre::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--grua, var(--texto-sutil)); }
.flota__estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--texto-suave); white-space: nowrap; }
.flota__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--borde-campo); }
.flota__grua--terreno .flota__estado { color: var(--texto); }
.flota__grua--terreno .flota__estado::before { background: var(--exito); box-shadow: 0 0 0 3px color-mix(in srgb, var(--exito) 22%, transparent); }
.flota__detalle { font-size: 13px; color: var(--texto-suave); min-width: 0; }
.flota__detalle strong { color: var(--texto); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flota__progreso { height: 4px; border-radius: 2px; background: var(--superficie-2); overflow: hidden; margin-top: 2px; }
.flota__progreso span { display: block; height: 100%; width: var(--avance, 0%); background: var(--grua, var(--texto-sutil)); border-radius: 2px; }
/* Trabajos (Hoy, Reports del operador, ficha) */
.trabajos { list-style: none; margin: 0; padding: 0; }
.trabajo { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--borde); }
.trabajo:first-child { border-top: 0; padding-top: 2px; }
.trabajo:last-child { padding-bottom: 0; }
.trabajo__hora { font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.3; align-self: start; padding-top: 1px; }
.trabajo__hora small { display: block; color: var(--texto-suave); font-weight: 400; font-size: 12px; }
.trabajo__cuerpo { min-width: 0; display: grid; gap: 4px; }
.trabajo__cliente { font-weight: 600; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
a.trabajo__cliente:hover { text-decoration: underline; }
.trabajo__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--texto-suave); }
.trabajo__meta .icono { width: 14px; height: 14px; color: var(--texto-sutil); }
.trabajo__meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.trabajo__accion { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.trabajo--hecho .trabajo__hora { color: var(--texto-suave); }
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tarea { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; }
.tarea__caja { width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--borde-campo); }
.tarea__texto { min-width: 0; overflow-wrap: anywhere; }
.tarea__origen { font-size: 12px; color: var(--texto-sutil); display: block; }
.barras { display: grid; gap: 8px; }
.barra-fase { display: grid; grid-template-columns: minmax(90px, 9rem) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.barra-fase__pista { height: 8px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.barra-fase__relleno { display: block; height: 100%; background: var(--color-acento); border-radius: 4px; width: var(--ancho, 0%); }

/* 7 · Embudo ---------------------------------------------------------------- */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.columna { background: var(--superficie-2); border-radius: var(--radio-tarjeta); padding: 8px; min-height: 200px; border: 1px dashed transparent;
  transition: border-color var(--t-corta) var(--curva); }
.columna--sobre { border-color: var(--foco); }
.columna__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 6px 10px; }
.columna__nombre { font-weight: 600; }
.columna__totales { color: var(--texto-suave); font-size: 12px; text-align: right; }
.columna--ganada .columna__nombre { color: var(--exito); }
.columna--perdida .columna__nombre { color: var(--texto-suave); }
.ficha-op { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-kpi); padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--sombra-tarjeta);
  transition: box-shadow var(--t-corta) var(--curva), transform var(--t-corta) var(--curva); }
.ficha-op:hover { box-shadow: var(--sombra-flotante); }
.ficha-op:active { cursor: grabbing; transform: scale(.98); box-shadow: var(--sombra-tarjeta); }
.ficha-op--atascada { border-color: color-mix(in srgb, var(--peligro) 45%, var(--borde)); background: color-mix(in srgb, var(--peligro) 5%, var(--superficie)); }
.ficha-op__titulo { font-weight: 600; display: block; }
.ficha-op__linea { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--texto-suave); }

/* 8 · Agenda ---------------------------------------------------------------- */
.agenda-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 12px; }
.agenda-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.agenda-titulo { margin: 0 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.agenda-filtros select { width: auto; min-width: 12rem; height: 32px; min-height: 32px; font-size: 13px; }
.agenda-rejilla { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1200px) { .agenda-rejilla { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.agenda { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 8px; box-shadow: var(--sombra-tarjeta); min-width: 0; }
.proximos { position: sticky; top: 16px; }
.proximos__dia { font-size: 12px; font-weight: 600; color: var(--texto-suave); margin: 14px 0 6px; }
.proximos__dia:first-of-type { margin-top: 0; }
.proximos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.proximo { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 10px; padding: 8px 10px 8px 8px; border-radius: var(--radio); background: var(--superficie-2);
  cursor: pointer; border: 0; width: 100%; text-align: left; color: var(--texto); transition: background var(--t-corta) var(--curva); }
.proximo:hover { background: color-mix(in srgb, var(--texto) 6%, var(--superficie-2)); }
.proximo:active { transform: scale(.98); }
.proximo { transition: background var(--t-corta) var(--curva), transform var(--t-toque) var(--curva); }
.proximo__marca { border-radius: 2px; background: var(--grua, var(--color-principal)); }
.proximo__texto { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.proximo__texto strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proximo__texto span { color: var(--texto-suave); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* FullCalendar con los tokens */
.fc { --fc-border-color: var(--borde); --fc-page-bg-color: var(--superficie); --fc-neutral-bg-color: var(--superficie-2); --fc-neutral-text-color: var(--texto-suave);
  --fc-small-font-size: 12px; --fc-list-event-hover-bg-color: var(--superficie-2);
  --fc-today-bg-color: color-mix(in srgb, var(--color-acento) 7%, transparent); --fc-now-indicator-color: var(--peligro);
  --fc-highlight-color: color-mix(in srgb, var(--color-acento) 20%, transparent); --fc-non-business-color: color-mix(in srgb, var(--superficie-2) 60%, transparent);
  --fc-event-bg-color: color-mix(in srgb, var(--color-principal) 14%, var(--superficie)); --fc-event-border-color: var(--color-principal); --fc-event-text-color: var(--texto);
  --fc-button-bg-color: var(--superficie); --fc-button-text-color: var(--texto); --fc-button-border-color: var(--borde);
  --fc-button-hover-bg-color: var(--superficie-2); --fc-button-hover-border-color: var(--borde); --fc-button-active-bg-color: var(--color-principal); --fc-button-active-border-color: var(--color-principal);
  font-size: 13px; color: var(--texto); }
.fc a { color: inherit; text-decoration: none; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--color-principal-texto); }
.fc .fc-button-primary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: none; }
.fc .fc-scrollgrid { border-radius: var(--radio-kpi); overflow: hidden; border-color: var(--borde); }
.fc .fc-col-header-cell { background: var(--superficie); }
.fc .fc-col-header-cell-cushion { display: inline-block; padding: 10px 4px; font-weight: 500; color: var(--texto-suave); font-size: 12px; text-transform: capitalize; }
.fc .fc-day-today .fc-col-header-cell-cushion { color: var(--texto); font-weight: 700; }
.fc .fc-timegrid-slot { height: 2.1em; }
.fc .fc-timegrid-slot-minor { border-top-style: dotted; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion { font-size: 11px; color: var(--texto-sutil); font-variant-numeric: tabular-nums; }
.fc .fc-daygrid-day-number { font-size: 12px; color: var(--texto-suave); padding: 6px 8px; font-variant-numeric: tabular-nums; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--color-principal-texto); background: var(--color-principal); border-radius: var(--radio-pildora); min-width: 24px; padding: 2px 7px; margin: 4px; text-align: center; }
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top { opacity: .45; }
.fc .fc-timegrid-now-indicator-line { border-width: 2px 0 0; }
.fc-theme-standard .fc-list { border: 0; }
/* «martes 22 de septiembre», no «Martes 22 De Septiembre»: solo sube la primera letra */
.fc .fc-list-day-cushion { background: var(--superficie-2); font-weight: 600; font-size: 12px; padding: 8px 12px; }
.fc .fc-list-day-text, .fc .fc-list-day-side-text { display: inline-block; }
.fc .fc-list-day-text::first-letter { text-transform: uppercase; }
.fc .fc-list-event td { border-color: var(--borde); padding: 10px 12px; }
.fc .fc-list-event-time { color: var(--texto-suave); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.fc .fc-list-empty { background: var(--superficie); color: var(--texto-suave); }
.fc .fc-event { cursor: pointer; }
.fc .fc-v-event.evento, .fc .fc-h-event.evento, .fc .fc-daygrid-block-event.evento {
  background: color-mix(in srgb, var(--evento, var(--color-principal)) 15%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--evento, var(--color-principal)) 55%, transparent);
  border-radius: 6px; box-shadow: 0 0 0 1px var(--superficie); }
.fc .fc-v-event.evento:hover { background: color-mix(in srgb, var(--evento, var(--color-principal)) 24%, var(--superficie)); }
.fc .fc-event.evento .fc-event-main { color: var(--texto); padding: 3px 5px; }
.fc .fc-daygrid-dot-event.evento { color: var(--texto); }
.fc .fc-daygrid-dot-event.evento .fc-daygrid-event-dot { border-color: var(--evento, var(--color-principal)); }
.fc .fc-list-event.evento .fc-list-event-dot { border-color: var(--evento, var(--color-principal)); border-radius: 3px; }
.evento--grua-1 { --evento: var(--serie-1); } .evento--grua-2 { --evento: var(--serie-2); } .evento--grua-3 { --evento: var(--serie-3); }
.evento--grua-4 { --evento: var(--serie-4); } .evento--grua-5 { --evento: var(--serie-5); } .evento--grua-6 { --evento: var(--serie-6); }
.evento--sin-grua { --evento: var(--texto-sutil); }
.evento--realizada { --evento: var(--exito); }
.evento__cuerpo { display: grid; gap: 1px; line-height: 1.25; overflow: hidden; min-width: 0; }
.evento__hora { font-size: 11px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.evento__titulo { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento__meta { font-size: 11px; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento__linea { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.fc .fc-list-event .evento__cuerpo { gap: 2px; }
.fc .fc-list-event .evento__hora { display: none; }  /* la lista ya trae su propia columna de hora */
.fc .fc-list-event .evento__titulo { font-size: 13px; white-space: normal; }
.fc .fc-list-event .evento__meta { font-size: 12px; white-space: normal; }
/* Barra del calendario: en el móvil, título arriba y botones en filas propias */
.fc .fc-button { min-height: 36px; }
@media (max-width: 767px) {
  .fc .fc-header-toolbar.fc-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
  .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .fc .fc-toolbar-chunk:nth-child(2) { order: -1; }
  .fc .fc-toolbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
  .fc .fc-button { min-height: 40px; }
  .fc .fc-toolbar-chunk:last-child .fc-button-group { display: flex; width: 100%; }
  .fc .fc-toolbar-chunk:last-child .fc-button-group .fc-button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
}
.fc .cita--propuesta { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--superficie) 55%, transparent) 6px 11px); }
.fc .cita--cancelada, .fc .cita--no_asistio { opacity: .5; }
.fc .cita--cancelada .evento__titulo, .fc .cita--no_asistio .evento__titulo { text-decoration: line-through; }

/* 9 · Clientes y fichas ------------------------------------------------------- */
.buscador { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.buscador > input, .buscador > select, .buscador > label { width: auto; }
.buscador > input[type="search"], .buscador > input[type="password"], .buscador > input[name="nombre"] { flex: 1 1 14rem; min-width: 12rem; max-width: 24rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.filtros .busqueda { flex: 1 1 16rem; max-width: 26rem; }
.filtros select { width: auto; min-width: 11rem; }
.busqueda { position: relative; display: block; }
.busqueda .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-sutil); pointer-events: none; }
.busqueda input { padding-left: 36px; }
.paginacion { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.paginacion .suave { margin-right: auto; font-size: 13px; }
.cliente-celda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cliente-celda .avatar { width: 32px; height: 32px; font-size: 12px; border-radius: 10px; background: var(--superficie-2); color: var(--texto-suave); }
.cliente-celda strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ficha-cliente { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin-bottom: 24px; }
.ficha-cliente__principal { display: flex; align-items: flex-start; gap: 16px; min-width: 0; flex: 1 1 22rem; }
.ficha-cliente__principal h1 { margin: 0; font-size: 28px; overflow-wrap: anywhere; }
.ficha-cliente__rut { margin: 2px 0 10px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.datos-contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.datos-contacto li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--texto-suave); font-size: 13px; }
.datos-contacto a { color: var(--texto); text-decoration: none; }
.datos-contacto a:hover { text-decoration: underline; }
.datos-contacto .icono { width: 15px; height: 15px; color: var(--texto-sutil); }
.ficha { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { padding: 8px 0 12px 18px; border-left: 2px solid var(--borde); position: relative; margin-left: 4px; }
.linea-tiempo li::before { content: ""; position: absolute; left: -6px; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--color-acento); }
.linea-tiempo li.lista__vacia { border-left: 0; padding-left: 0; }
.linea-tiempo li.lista__vacia::before { display: none; }
.linea-tiempo__meta { font-size: 12px; color: var(--texto-sutil); display: block; margin-bottom: 2px; }

/* 10 · Ajustes ----------------------------------------------------------------- */
.ajustes { display: grid; gap: 16px; max-width: 56rem; }
.ajustes > .tarjeta > h2, .ajustes__extra > .tarjeta > h2 { font-size: 16px; }
.fila-edit { display: grid; gap: 8px 10px; grid-template-columns: minmax(140px, 2fr) repeat(3, minmax(80px, 1fr)) auto; align-items: end; padding: 12px 0; border-top: 1px solid var(--borde); }
.fila-edit label { font-size: 12px; }
.codigo { font-family: var(--mono); font-size: 12px; background: var(--superficie-2); border: 1px solid var(--borde); padding: 10px 12px; border-radius: var(--radio); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.usuario-fila { display: flex; align-items: center; gap: 12px; }

/* 11 · Asistente (la burbuja vive en su propio aislamiento; aquí solo su posición) */
.prueba-asistente { font-size: 13px; color: var(--texto-suave); }
body[data-pagina="app"] #crm-asistente { --crm-asistente-abajo: 24px; --crm-asistente-derecha: 24px; }
@media (max-width: 767px) { body[data-pagina="app"] #crm-asistente { --crm-asistente-abajo: calc(var(--inferior) + 16px + env(safe-area-inset-bottom)); --crm-asistente-derecha: 16px; } }
body[data-rol="tecnico"][data-terreno] #crm-asistente { display: none; }

/* 12 · Pantallas pequeñas ------------------------------------------------------ */
@media (max-width: 1023px) {
  .ficha { grid-template-columns: 1fr; }
  .fila-edit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  /* Zonas táctiles: nada por debajo de 44 px donde se toca a diario */
  input, select, textarea { height: 44px; min-height: 44px; }
  textarea { height: auto; min-height: 96px; }
  input[type="file"] { height: auto; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; }
  .boton { height: 44px; min-height: 44px; }
  .boton--grande { height: 48px; min-height: 48px; }
  .boton--icono { width: 44px; }
  .casilla { min-height: 44px; }
  .agenda-filtros select { height: 44px; min-height: 44px; font-size: 16px; }
  /* Controles densos: se ven de 40 px y se tocan en 44 */
  .boton--mini, .chip, .segmentado button { height: 40px; min-height: 40px; position: relative; }
  .boton--icono.boton--mini { width: 40px; }
  .boton--mini::after { content: ""; position: absolute; inset: -2px -4px; }
  .chip::after, .segmentado button::after { content: ""; position: absolute; inset: -2px 0; }
  .tabla--apilable td:first-child a { position: relative; }
  .tabla--apilable td:first-child a::after { content: ""; position: absolute; inset: -12px -8px; }

  .vista__cabecera, .cabecera-pagina { align-items: flex-start; margin-bottom: 16px; }
  .vista__cabecera .buscador, .cabecera-pagina .buscador { width: 100%; justify-content: flex-start; }
  .vista__cabecera .buscador > input, .cabecera-pagina .buscador > input,
  .vista__cabecera .buscador > select, .cabecera-pagina .buscador > select { flex: 1 1 100%; max-width: none; min-width: 0; width: auto; }
  .vista__cabecera .buscador > .boton, .cabecera-pagina .buscador > .boton { flex: 1 1 auto; }
  .cabecera-pagina .acciones { width: 100%; }
  .tabla--apilable thead { display: none; }
  .tabla--apilable, .tabla--apilable tbody { display: block; }
  .tabla--apilable tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px var(--canal); border-bottom: 1px solid var(--borde); }
  .tabla--apilable tr:last-child { border-bottom: 0; }
  .tabla--apilable td { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; padding: 0; text-align: left !important; min-width: 0; }
  .tabla--apilable td::before { content: attr(data-etiqueta); font-size: 11px; font-weight: 500; color: var(--texto-sutil); }
  .tabla--apilable td:first-child { grid-column: 1 / -1; padding-left: 0; }
  .tabla--apilable td:last-child { padding-right: 0; }
  .tabla--apilable td:first-child::before { display: none; }
  .tabla--apilable td[colspan] { grid-column: 1 / -1; }
  .tabla--apilable td[colspan]::before { display: none; }
  .modal { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; padding-top: 14px;
    border-radius: var(--radio-hoja) var(--radio-hoja) 0 0; border-bottom: 0; }
  .modal { transform: translateY(100%); opacity: 1; }
  .modal[open] { transform: none; }
  @starting-style { .modal[open] { transform: translateY(100%); opacity: 1; } }
  .modal::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 5px; border-radius: 3px; background: var(--borde); }
  .modal__cuerpo { padding: 10px 20px 18px; }
  .modal__pie { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal__pie .boton { flex: 1; }
  .trabajo { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .trabajo__accion { grid-column: 2; justify-content: flex-start; margin-top: 4px; }
  .agenda { padding: 4px; border-radius: var(--radio-kpi); }
  .agenda-titulo { font-size: 15px; }
  .segmentado { width: 100%; }
  .segmentado button { flex: 1; }
  .filtros select { flex: 1 1 10rem; }
  .ficha-cliente .acciones { width: 100%; }
  .proximos { position: static; }
}
@media (max-width: 540px) {
  .rejilla { grid-template-columns: 1fr; }
  .agenda-filtros select { width: 100%; }
}

/* 13 · Impresión ------------------------------------------------------------------ */
@media print {
  .lateral, .superior, .inferior, .acciones, .boton, .modal, .hoja, .aviso-flotante, #crm-asistente, .pestanas-ficha, .saltar { display: none !important; }
  .armazon { display: block; }
  body { background: #fff; color: #000; }
  .vista { padding: 0; max-width: none; }
  .vista > * { animation: none; }
  .entra { animation: none; }
  .tarjeta, .kpi { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .ficha, .panel { grid-template-columns: 1fr; }
}

/* 14 · Trabajos en terreno (Reports) ------------------------------------------------- */
.terreno-sin-conexion { margin: 12px 16px 0; }
@media (min-width: 768px) { .terreno-sin-conexion { margin: 16px 32px 0; } }
.terreno-boton-nuevo, .terreno-boton-cerrar, .terreno-boton-hora { height: 52px; min-height: 52px; font-size: 16px; padding: 0 20px; border-radius: 12px; }
.terreno-envio { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: var(--radio-pildora);
  background: var(--superficie-2); color: var(--texto-suave); font-size: 13px; font-weight: 500; }
.terreno-envio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--exito); }
.terreno-envio--pendiente { background: color-mix(in srgb, var(--aviso) 12%, var(--superficie)); color: var(--aviso); font-weight: 600; }
.terreno-envio--pendiente::before { background: var(--aviso); }
.terreno-envio--error { background: color-mix(in srgb, var(--peligro) 10%, var(--superficie)); color: var(--peligro); font-weight: 600; }
.terreno-envio--error::before { background: var(--peligro); }
.terreno-bloque { margin-bottom: 16px; }
.terreno-bloque:last-child { margin-bottom: 0; }
fieldset.terreno-bloque { border: 1px solid var(--borde); min-width: 0; margin-left: 0; margin-right: 0; }
fieldset.terreno-bloque > legend { float: left; width: 100%; font-weight: 600; font-size: 15px; padding: 0; margin: 0 0 12px; color: var(--texto); }
fieldset.terreno-bloque > legend + * { clear: both; }
.terreno-editor { max-width: 760px; }
.terreno-campo { display: grid; gap: 6px; font-weight: 500; font-size: 14px; color: var(--texto-suave); margin-top: 12px; }
.terreno-opciones { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.terreno-opcion { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--borde-campo);
  border-radius: var(--radio-kpi); font-weight: 600; background: var(--superficie); cursor: pointer; transition: border-color var(--t-corta) var(--curva), background var(--t-corta) var(--curva); }
.terreno-opcion input { width: 18px; height: 18px; min-height: 0; }
.terreno-opcion:has(input:checked) { border-color: var(--texto); box-shadow: 0 0 0 1px var(--texto); background: color-mix(in srgb, var(--grua, var(--color-acento)) 10%, var(--superficie)); }
.terreno-horas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.terreno-hora { display: grid; gap: 8px; }
.terreno-hora label { display: grid; gap: 6px; font-weight: 500; font-size: 14px; color: var(--texto-suave); }
.terreno-cifras { display: grid; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.terreno-cifras > div { display: flex; justify-content: space-between; gap: 16px; }
.terreno-cifras dt { color: var(--texto-suave); }
.terreno-cifras dd { margin: 0; text-align: right; }
.terreno-cifras__total { font-size: 20px; font-weight: 700; border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 4px; letter-spacing: -0.02em; }
.terreno-cifras__total dt { color: var(--texto); }
.terreno-total { border-color: color-mix(in srgb, var(--color-acento) 55%, var(--borde)); background: color-mix(in srgb, var(--color-acento) 6%, var(--superficie)); }
.terreno-fotos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.terreno-foto { display: grid; gap: 4px; font-size: 12px; color: var(--texto-suave); }
.terreno-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--borde); }
.terreno-foto__vacia { display: grid; place-items: center; aspect-ratio: 1; background: var(--superficie-2); border-radius: var(--radio); }
.terreno-firma__lienzo { display: block; width: 100%; height: 180px; touch-action: none; border: 1px dashed var(--borde-campo); border-radius: var(--radio-kpi); margin-bottom: 8px; background: #fff; }
.terreno-firma-guardada img { max-width: 320px; width: 100%; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.terreno-pie { display: grid; gap: 10px; margin: 20px 0 32px; }
.terreno-tarjeta { flex-wrap: wrap; }
.terreno-tarjeta__enlace { display: grid; gap: 2px; text-decoration: none; color: inherit; flex: 1; min-width: 12rem; }
.terreno-tarjeta__numero { font-weight: 700; font-variant-numeric: tabular-nums; }
.terreno-tarjeta__error { flex-basis: 100%; margin: 0; color: var(--peligro); }
.terreno-sugerencias > li { border: 0; padding: 2px 0; }
.terreno-sugerencias > li:first-child { padding-top: 8px; }
.terreno-sugerencia { width: 100%; justify-content: flex-start; height: auto; min-height: 40px; padding: 8px 12px; white-space: normal; text-align: left; box-shadow: none; }
.terreno-datos { display: grid; gap: 10px; margin: 0; }
.terreno-datos > div { display: grid; grid-template-columns: minmax(8rem, 36%) 1fr; gap: 12px; }
.terreno-datos dt { color: var(--texto-suave); }
.terreno-datos dd { margin: 0; overflow-wrap: anywhere; }
.terreno-desglose__total { font-weight: 700; }
.terreno-estado--abierto { background: color-mix(in srgb, var(--info) 12%, var(--superficie)); color: var(--info); }
.terreno-estado--cerrado { background: color-mix(in srgb, var(--aviso) 14%, var(--superficie)); color: var(--aviso); }
.terreno-estado--facturado { background: color-mix(in srgb, var(--exito) 12%, var(--superficie)); color: var(--exito); }
.terreno-estado--anulado { text-decoration: line-through; }
.terreno-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.terreno-fila > input { flex: 1 1 8rem; width: auto; }
.terreno-dias { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.terreno-ayuda { font-size: 13px; }
.terreno-hoy { margin-bottom: 16px; }
.terreno-filtros { justify-content: flex-start; margin-bottom: 12px; }
.terreno-filtros label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-suave); }
.terreno-filtros label input { width: auto; }
@media (max-width: 767px) {
  .terreno-cabecera .boton { width: 100%; }
  .terreno-boton-nuevo { width: 100%; }
}
@media print { .terreno-envio, .terreno-acciones, .terreno-sin-conexion { display: none !important; } }

/* Filtros plegables (en el móvil ocupan menos) */
.terreno-plegable { border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 12px; background: var(--superficie); }
.terreno-plegable > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  cursor: pointer; padding: 10px 14px; font-weight: 500; color: var(--texto-suave); list-style: none; }
.terreno-plegable > summary::-webkit-details-marker { display: none; }
.terreno-plegable > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 2px 3px 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0 0 2px 0;
  transform: rotate(45deg); transition: transform var(--t-corta) var(--curva); }
.terreno-plegable > summary:hover { color: var(--texto); }
.terreno-plegable[open] > summary { border-bottom: 1px solid var(--borde); color: var(--texto); }
.terreno-plegable[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; margin-top: 3px; }
.terreno-plegable > .terreno-filtros { padding: 12px; }