:root {
  --fondo: #f5f3ee; --superficie: #ffffff; --texto: #1d231f; --suave: #5f6b63; --borde: #e2ddd2;
  --marca: #1f3a2e; --marca-2: #2f5a45; --acento: #c8963e; --ok: #2e7d4f; --pausa: #b7791f; --peligro: #b3261e;
  --radio: 14px; --sombra: 0 1px 2px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .04);
  --menu-alto: 0px;   /* alto de los botones de espacio de abajo (solo si se ven) */
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-tema="oscuro"] {
  & { --fondo: #121513; --superficie: #1b201d; --texto: #e8ece9; --suave: #9aa59e; --borde: #2c332f;
          --marca: #8fc3a5; --marca-2: #a6d3b8; --acento: #e0b05c; --ok: #6fcf97; --pausa: #e8b04f; --peligro: #f28b82; color-scheme: dark; }
}
/* Color del espacio activo (Personal naranja de serie, o el que se elija en Ajustes) */
body[data-color] { --marca: var(--color-espacio); --marca-2: color-mix(in srgb, var(--color-espacio) 85%, black); }
:root[data-tema="oscuro"] {
  body[data-color] { --marca: color-mix(in srgb, var(--color-espacio) 55%, white); --marca-2: color-mix(in srgb, var(--color-espacio) 45%, white); }
  body[data-color] .barra { background: color-mix(in srgb, var(--color-espacio) 45%, #121513); }
}
/* …y el texto encima, en negro o blanco según contraste (lo calcula main.js: --sobre-barra y --sobre-marca) */
body[data-color] .barra, body[data-color] .marca, body[data-color] .selector-empresa, body[data-color] .menu a.activo { color: var(--sobre-barra); }
body[data-color] .menu a { color: color-mix(in srgb, var(--sobre-barra) 75%, transparent); }
body[data-color] .menu a.activo { background: color-mix(in srgb, var(--sobre-barra) 12%, transparent); }
body[data-color] .selector-empresa { border-color: color-mix(in srgb, var(--sobre-barra) 35%, transparent); }
body[data-color] .btn.primario, body[data-color] .espacios button.activo, body[data-color] .opciones .btn[aria-pressed="true"] { color: var(--sobre-marca); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overscroll-behavior-x: none; background: var(--fondo); color: var(--texto); font-size: 16px; line-height: 1.45; }
a { color: var(--marca-2); }
h1 { font-size: 1.5rem; margin: 0; } h2 { font-size: 1.1rem; margin: 0 0 .75rem; } h3 { font-size: 1rem; margin: 1rem 0 .5rem; }

.barra { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--marca); color: #fff; }
:root[data-tema="oscuro"] { .barra { background: #18251e; } }
.marca { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.marca span { font-weight: 400; margin-left: 4px; opacity: .85; }
.empresa { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; }
.empresa > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-empresa { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .35); max-width: 55vw; }
.selector-empresa option { color: #000; }

.vista { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(var(--menu-alto) + 24px + env(safe-area-inset-bottom)); outline: none; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarjeta { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); }
.tarjeta.destacada { border-color: var(--acento); }
.tarjeta.interior { box-shadow: none; margin-top: 12px; }
.ayuda { color: var(--suave); font-size: .9rem; }
.vacio { color: var(--suave); text-align: center; padding: 12px 0; margin: 0; }
.pie { text-align: center; }
.cargando-pagina { padding: 40px; text-align: center; color: var(--suave); }

/* Botones y formularios */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: transform .05s, filter .15s; }
.btn:active { transform: scale(.98); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
:root[data-tema="oscuro"] { .btn.primario { color: #0f1a14; } }
.btn.peligro { background: transparent; border-color: var(--peligro); color: var(--peligro); }
.btn.enlace { border: 0; background: none; color: var(--marca-2); padding: 8px 0; min-height: 0; font-weight: 500; text-decoration: underline; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn.cargando::after { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
label { display: block; font-size: .9rem; font-weight: 600; margin: 10px 0 4px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); color: var(--texto); font: inherit; }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--marca); flex: none; }
.formulario .btn[type=submit] { margin-top: 16px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtros input[type=search] { flex: 1 1 220px; }
.filtros select, .filtros input[type=date] { flex: 1 1 140px; width: auto; }

.acceso { max-width: 420px; margin: 8vh auto 0; }
.acceso h1 { margin-bottom: 8px; }
.acceso .btn { width: 100%; margin-top: 16px; }

/* Estado de jornada */
.estado { text-align: center; padding: 20px 16px; }
.estado-cab { display: flex; align-items: center; justify-content: center; gap: 8px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--suave); flex: none; }
.trabajando .punto, .punto.trabajando { background: var(--ok); box-shadow: 0 0 0 4px rgb(46 125 79 / .18); }
.pausa .punto, .punto.pausa { background: var(--pausa); }
.reloj { font-size: clamp(2.6rem, 12vw, 3.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 8px 0 0; }
.cliente-actual { margin-top: 8px; }
.desplazamiento { margin-top: 12px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 14%, transparent); }
.desplazamiento .fila-botones { justify-content: center; }
.botones-fichar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.botones-fichar .btn { flex: 1 1 140px; min-height: 56px; font-size: 1.02rem; }
.botones-fichar .btn.primario { flex-basis: 100%; }
.botones-fichar .btn.enlace { flex-basis: 100%; min-height: 0; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; padding: 8px 0 8px 12px; border-left: 3px solid var(--ok); margin-left: 4px; }
.linea-tiempo li.pausa { border-color: var(--pausa); color: var(--suave); }
.linea-tiempo li.desplazamiento { border-color: var(--acento); }
.linea-tiempo .horas { font-variant-numeric: tabular-nums; color: var(--suave); font-size: .9rem; }
.linea-tiempo .asignar { display: block; padding: 2px 0; font-size: .85rem; }
.nav-dia { display: flex; gap: 6px; }
.linea-tiempo .dur { font-variant-numeric: tabular-nums; font-size: .9rem; }
.totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.totales div { background: var(--fondo); border-radius: 10px; padding: 8px 10px; }
.totales small { display: block; color: var(--suave); }
.totales strong { white-space: nowrap; font-size: .95rem; }
.correccion { margin-top: 6px; }

/* Listas y tablas */
.lista { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; color: inherit; text-decoration: none; cursor: pointer; }
.item small, .opcion small { display: block; color: var(--suave); }
.acciones-rapidas { display: flex; gap: 6px; flex: none; }
.mini { font-size: .8rem; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 8px; text-decoration: none; }
.lista-clientes .grupo { color: var(--suave); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.lista-clientes { max-height: 50vh; overflow: auto; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.opcion { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; font-weight: 400; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, transparent); }
.lista-equipo { list-style: none; margin: 0; padding: 0; }
.lista-equipo li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla th { color: var(--suave); font-weight: 600; font-size: .82rem; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td select { min-height: 36px; padding: 4px 8px; }
.tabla .exceso { color: var(--pausa); font-weight: 600; }
.tabla .falta { color: var(--peligro); }
.tarjeta:has(> .tabla), details { overflow-x: auto; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.datos dt { color: var(--suave); } .datos dd { margin: 0; }
.etiqueta { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--fondo); border: 1px solid var(--borde); margin-left: 6px; }
.etiqueta.demo { background: var(--acento); color: #231a08; border: 0; }
.etiqueta.cobrada { color: var(--ok); } .etiqueta.vencida { color: var(--peligro); } .etiqueta.pendiente, .etiqueta.parcial { color: var(--pausa); }
.volver { text-decoration: none; font-weight: 600; }
.ventajas { padding-left: 20px; }

/* Menú de secciones en la cabecera (segunda fila en el móvil) */
.menu { order: 3; display: flex; gap: 2px; width: calc(100% + 32px); margin: 0 -16px -6px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; font-size: .88rem; white-space: nowrap;
  color: rgb(255 255 255 / .75); text-decoration: none; }
.menu a.activo { color: #fff; font-weight: 700; background: rgb(255 255 255 / .12); }
.menu .icono { width: 18px; height: 18px; }

/* Botones de espacio abajo (Personal / Pro) */
body.con-espacios { --menu-alto: 60px; }
.espacios { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; gap: 8px; height: calc(var(--menu-alto) + env(safe-area-inset-bottom));
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borde); }
.espacios button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--fondo); color: var(--suave); font: inherit; font-weight: 600; cursor: pointer; }
.espacios button.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
:root[data-tema="oscuro"] { .espacios button.activo { color: #0f1a14; } }
.espacios button:focus-visible { outline: 3px solid var(--acento); outline-offset: 1px; }
.icono.maletin { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 13h18"/></svg>'); }
.icono { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.icono.reloj { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>'); }
.icono.pin { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>'); }
.icono.carpeta { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z"/></svg>'); }
.icono.equipo { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6"/></svg>'); }
.icono.reparto { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M12 3a9 9 0 1 0 9 9h-9z"/><path d="M15 2.5A7 7 0 0 1 21.5 9H15z"/></svg>'); }
.icono.crono { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="14" r="7"/><path d="M12 14V10M10 3h4M12 3v4M18 7l1.5-1.5"/></svg>'); }
.icono.factura { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linejoin="round"><path d="M6 2h9l4 4v16H6z"/><path d="M9 11h7M9 15h7M9 7h3"/></svg>'); }
.icono.ajustes { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="18" cy="18" r="2"/></svg>'); }
@media (min-width: 900px) {
  .vista:has(.catalogo-productos) { max-width: 1100px; }
  .menu { order: 1; flex: 1; width: auto; margin: 0; padding: 0; justify-content: center; gap: 4px; }
  .menu a { font-size: .9rem; padding: 8px 12px; }
  .empresa { order: 2; }
  .espacios { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; width: 320px; height: auto; padding: 6px; border: 1px solid var(--borde);
    border-radius: 16px; box-shadow: var(--sombra); }
  .espacios button { padding: 10px; }
}

/* Diálogos y avisos */
.dialogo { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: 18px; padding: 20px; background: var(--superficie); color: var(--texto); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.dialogo::backdrop { background: rgb(0 0 0 / .45); }
.dialogo h3 { margin-top: 0; }
.dialogo-botones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Arriba, bajo la cabecera: abajo tapaba el botón de Menú y la hoja «Trabajo e historial» */
.aviso { position: fixed; left: 50%; top: calc(var(--alto-cabecera, 56px) + 12px); transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: #222; color: #fff; font-weight: 600; transition: .2s; z-index: 20; }
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.ok { background: var(--ok); color: #fff; } .aviso.error { background: var(--peligro); color: #fff; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 420px) { .dos { grid-template-columns: 1fr; } .linea-tiempo li { grid-template-columns: 96px 1fr; } .linea-tiempo .dur { grid-column: 2; } }

/* ---------- Factura (detalle y PDF) ---------- */
.tabla tr.enlace { cursor: pointer; } .tabla tr.enlace:hover td { background: var(--fondo); }
.acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acciones select { width: auto; }
.aviso-fijo { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pausa); color: var(--texto); background: var(--superficie); font-size: .92rem; }
/* La hoja siempre es papel blanco, también en modo oscuro */
.doc-factura { --t: #1d231f; --s: #5f6b63; --b: #dcd6ca; background: #fff; color: var(--t); border-radius: 6px; box-shadow: var(--sombra);
  padding: 32px; font-size: .9rem; line-height: 1.4; display: flex; flex-direction: column; gap: 22px; overflow-x: auto; }
.df-cab { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.df-logo { display: block; max-width: 75mm; max-height: 30mm; object-fit: contain; object-position: left; margin-bottom: 8px; }
.df-logo.t-S { max-width: 55mm; max-height: 20mm; } .df-logo.t-L { max-width: 100mm; max-height: 45mm; }
.df-marca { display: block; font-size: 1.25rem; color: #1f3a2e; margin-bottom: 4px; }
.df-emisor div, .df-cliente div, .df-pago div { color: var(--s); }
.df-emisor a { color: inherit; text-decoration: none; }
.df-titulo { text-align: right; }
.df-titulo h2 { margin: 0 0 6px; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; color: #1f3a2e; }
.df-titulo dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; justify-content: end; }
.df-titulo dt { color: var(--s); } .df-titulo dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.df-etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--s); margin-bottom: 4px; }
.df-cliente { border-top: 2px solid #1f3a2e; padding-top: 12px; }
.df-lineas, .df-totales { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.df-lineas { width: 100%; }
.df-lineas th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--s); text-align: left; padding: 6px; border-bottom: 1px solid var(--t); }
.df-lineas td { padding: 8px 6px; border-bottom: 1px solid var(--b); vertical-align: top; }
.df-lineas .n { text-align: right; white-space: nowrap; }
.df-lineas .df-categoria th { padding-top: 14px; font-size: .8rem; color: inherit; border-bottom: 1px solid var(--t); }
.df-lineas .df-subtotal td { font-weight: 600; border-bottom: 0; text-align: right; }
.df-lineas .df-grupo { break-inside: avoid; }
.df-totales { margin-left: auto; min-width: 280px; }
.df-totales th { text-align: left; font-weight: 400; color: var(--s); padding: 4px 16px 4px 0; }
.df-totales td { text-align: right; padding: 4px 0; white-space: nowrap; }
.df-totales .df-total th, .df-totales .df-total td { border-top: 2px solid var(--t); padding-top: 8px; font-size: 1.1rem; font-weight: 700; color: var(--t); }
.df-nota { margin: 0; }
.df-obs { white-space: pre-line; }
.ct-lineas { display: grid; gap: .6rem; }
.ct-linea { display: grid; grid-template-columns: 1.8rem 1fr; gap: .3rem .5rem; align-items: center; }
.ct-linea > input:nth-of-type(2) { grid-column: 2; }
.ct-linea .mover, .linea-pres .mover { display: flex; flex-direction: column; align-items: center; }
.ct-linea .mover { grid-row: span 2; }
.ct-linea .mover button, .linea-pres .mover button { padding: 1px 6px; min-height: 0; line-height: 1.1; font-size: .9rem; text-decoration: none; color: var(--suave); }
.ct-linea .mover button:disabled, .linea-pres .mover button:disabled { opacity: .25; cursor: default; }
.obs-plantillas { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.obs-plantillas select { flex: 1; }
.obs-plantilla { display: grid; gap: .4rem; padding-bottom: .8rem; border-bottom: 1px solid var(--borde); }
.obs-plantilla .btn.enlace { justify-self: start; }
.df-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--b); font-size: .7rem; color: var(--s); word-break: break-all; }
@media (max-width: 560px) { .doc-factura { padding: 18px; } .df-titulo { text-align: left; } .df-titulo dl { justify-content: start; } }

@media print {
  /* Sin márgenes de página: la hoja blanca cubre todo el A4 (así no se imprime el fondo de la app
     ni la cabecera/pie del navegador). El margen lo pone el relleno de la hoja. */
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color-scheme: light; }
  .barra, .menu, .espacios, .aviso, .no-imprimir { display: none !important; }
  .vista { max-width: none; padding: 0 !important; margin: 0; }
  .vista > .pila { gap: 0; }
  .doc-factura { box-shadow: none; border-radius: 0; width: 210mm; min-height: 296mm; padding: 14mm;
    font-size: 10pt; overflow: visible; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .df-lineas tr, .df-totales, .df-pago { break-inside: avoid; }
  .doc-factura * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.logo-campo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-previa { max-width: 180px; max-height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 6px; }
.estado-ok { color: var(--ok); font-weight: 600; }
.filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filtros input { flex: 1 1 240px; }
.filtros select { width: auto; min-width: 150px; }
.filtros .filtro-check { margin: 0; white-space: nowrap; }
.tabla-productos { table-layout: fixed; }
.tabla-productos th, .tabla-productos td { overflow-wrap: anywhere; }
.tabla-productos th:nth-child(1), .tabla-productos td:nth-child(1) { width: 16%; }
.tabla-productos th:nth-child(2), .tabla-productos td:nth-child(2) { width: 18%; }
.tabla-productos th:nth-child(3), .tabla-productos td:nth-child(3) { width: 16%; }
.tabla-productos th:nth-child(4), .tabla-productos td:nth-child(4) { width: 9%; }
.tabla-productos th:nth-child(5), .tabla-productos td:nth-child(5) { width: 22%; }
.tabla-productos th:nth-child(6), .tabla-productos td:nth-child(6) { width: 10%; }
.tabla-productos th:nth-child(7), .tabla-productos td:nth-child(7) { width: 9%; }
.tabla-productos td:nth-child(6) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-productos .etiqueta { white-space: nowrap; }
.estado-producto { display: inline-flex; align-items: center; gap: 4px; }
.punto-impuesto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto-impuesto.correcto { background: var(--ok); }
.punto-impuesto.diferente { background: var(--pausa); }
.punto-impuesto.sin-valor { background: var(--peligro); }
.precio-producto { min-width: 0; }
.precio-info { display: block; margin-top: 3px; font-size: .72rem; font-weight: 600; white-space: normal; }
.precio-info.ok { color: var(--ok); }
.precio-info.alerta { color: var(--peligro); }
.precio-info.neutro { color: var(--suave); font-weight: 400; }
.precio-editor { min-height: 20px; }
.margen-familia { display: grid; grid-template-columns: minmax(140px, 1fr) 120px; gap: 12px; align-items: end; }
.campo-porcentaje { display: flex; align-items: center; gap: 8px; }
.campo-porcentaje input { min-width: 0; }
.campo-porcentaje span { color: var(--suave); font-weight: 700; }
/* ---------- Borrador de factura ---------- */
.lineas-editor { display: flex; flex-direction: column; gap: 8px; }
.linea-ed { display: grid; grid-template-columns: minmax(160px, 1fr) 70px 56px 90px 64px 64px 88px 28px; gap: 6px; align-items: center; }
.linea-ed label { display: block; margin: 0; min-width: 0; }
.linea-ed .rotulo { display: none; font-size: .72rem; font-weight: 600; color: var(--suave); margin-bottom: 2px; }
.linea-ed input, .linea-ed select { min-height: 38px; padding: 6px 8px; width: 100%; min-width: 0; }
.linea-ed.cabecera span { font-size: .75rem; font-weight: 600; color: var(--suave); }
.linea-ed .importe { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-ed .quitar { padding: 4px; min-height: 0; text-decoration: none; color: var(--suave); }
.linea-ed:not(.cabecera) { grid-template-areas: "desc cant ud pvp dto igic imp x" "cat art art art art art art mov" "grp grp grp grp grp grp grp ."; }
.linea-ed .mover { grid-area: mov; display: flex; flex-direction: column; align-items: center; }
.linea-ed .mover button { padding: 1px 6px; min-height: 0; line-height: 1.1; font-size: .9rem; text-decoration: none; color: var(--suave); }
.linea-ed .mover button:disabled { opacity: .25; cursor: default; }
.c-grupo { grid-area: grp; display: none !important; }
.lineas-editor.con-grupos .c-grupo { display: flex !important; align-items: center; gap: 8px; }
.linea-ed .c-grupo .rotulo { display: block; white-space: nowrap; margin: 0; }
.linea-ed .c-categoria select, .linea-ed .c-articulo select, .linea-ed .c-grupo input { min-height: 32px; padding: 3px 8px; font-size: .85rem; }
.c-articulo { grid-area: art; }
.c-descripcion { grid-area: desc; } .c-categoria { grid-area: cat; } .c-cantidad { grid-area: cant; } .c-unidad { grid-area: ud; } .c-pvp { grid-area: pvp; }
.c-dto { grid-area: dto; } .c-igic { grid-area: igic; } .linea-ed .importe { grid-area: imp; } .linea-ed .quitar { grid-area: x; }
.lineas-editor > .btn { align-self: flex-start; }
.acciones-lineas { display: grid; grid-template-columns: minmax(14rem, 1fr) auto; gap: 8px; align-items: center; }
.acciones-lineas select { min-width: 0; }
@media (max-width: 720px) {
  .tabla-productos { font-size: .82rem; table-layout: fixed; }
  .tabla-productos th, .tabla-productos td { padding: 7px 4px; }
  .tabla-productos th:nth-child(3), .tabla-productos td:nth-child(3),
  .tabla-productos th:nth-child(6), .tabla-productos td:nth-child(6) { display: none; }
  .tabla-productos th:nth-child(1), .tabla-productos td:nth-child(1) { width: 20%; }
  .tabla-productos th:nth-child(2), .tabla-productos td:nth-child(2) { width: 27%; }
  .tabla-productos th:nth-child(4), .tabla-productos td:nth-child(4) { width: 13%; }
  .tabla-productos th:nth-child(5), .tabla-productos td:nth-child(5) { width: 22%; }
  .tabla-productos th:nth-child(7), .tabla-productos td:nth-child(7) { width: 18%; }
  .tabla-productos .etiqueta { margin-left: 0; padding: 2px 4px; font-size: .68rem; }
  .linea-ed, .linea-ed:not(.cabecera) { grid-template-columns: 1fr 1fr 1fr 28px; grid-template-areas: "desc desc desc x" "art art art mov" "grp grp grp ." "cat cat cat ." "cant ud pvp ." "dto igic imp ."; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
  .linea-ed.cabecera { display: none; }
  .acciones-lineas { grid-template-columns: 1fr; } .acciones-lineas .btn { justify-self: start; }
  .linea-ed .rotulo { display: block; }
  .linea-ed .importe { align-self: end; padding-bottom: 8px; } .linea-ed .quitar { align-self: end; padding-bottom: 10px; }
}
.doc-factura { position: relative; }
.df-marca-agua { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: 7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(31 58 46 / .08); transform: rotate(-30deg); }
.linea-pres{display:grid;grid-template-columns:minmax(10rem,1fr) 5rem 4rem 6.5rem 7rem 2rem 2rem;gap:.5rem;align-items:end;margin-bottom:.5rem}.linea-pres.cabecera{align-items:center;font-size:.82rem;color:var(--muted)}.linea-pres .rotulo{display:none}.importe-pres-wrap{align-self:center;text-align:right}.total-presupuesto{display:flex;justify-content:flex-end;gap:1rem;border-top:1px solid var(--borde);padding-top:1rem;font-size:1.05rem}.solicitud-precio{width:min(42rem,calc(100% - 2rem));border:0;border-radius:8px;padding:1.25rem;box-shadow:0 20px 60px #0004}.solicitud-precio::backdrop{background:#0006}.solicitud-precio form{display:grid;gap:1rem}.proveedores-check{display:grid;gap:.5rem;max-height:14rem;overflow:auto}.proveedores-check .check{justify-content:flex-start}.proveedores-check small{display:block;color:var(--muted)}
.anadir-producto{display:grid;grid-template-columns:minmax(14rem,1fr) auto;gap:.5rem;align-items:center;margin-bottom:.75rem}.anadir-producto select{min-width:0}
@media(max-width:700px){.linea-pres,.linea-pres.cabecera{display:grid;grid-template-columns:1fr 1fr}.linea-pres.cabecera{display:none}.linea-pres label:first-child{grid-column:1/-1}.linea-pres .rotulo{display:block}.linea-pres .quitar{align-self:center}.linea-pres .importe-pres-wrap{text-align:left}.anadir-producto{grid-template-columns:1fr}.anadir-producto .btn{justify-self:start}}

/* Cabeceras de tabla que ordenan */
th button.orden { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
th button.orden:hover { text-decoration: underline; }

/* Superadministración */
.sa-unidad summary { cursor: pointer; }
.sa-editar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-top: .75rem; }
.sa-editar label:not(.check) { display: grid; gap: .25rem; }

.nfc-url { display: block; margin: .5rem 0; padding: .5rem; background: var(--fondo); border-radius: 6px; word-break: break-all; font-size: .85rem; }
.nota-tramo { display: block; color: var(--suave); font-style: italic; white-space: pre-line; }
.rango-tramo { margin-bottom: .5rem; }
.rango-tramo input[type=time] { width: auto; }
.materiales .material { display: grid; grid-template-columns: 1fr 5rem 4rem auto; gap: .35rem; margin-bottom: .35rem; }
/* Modo superadmin: cabecera de otro color para que se note que no es la empresa */
body.modo-sa .barra { background: #3b2a55; }
.etiqueta.sa { background: #e9ddff; color: #3b2a55; }
.sa-invitacion { margin: .5rem 0; }

/* Mi tiempo (personal) y sondeo inicial */
.estado-personal { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; }
.estado-personal p { margin: 0; }
.cronometro { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.tareas-personales { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.tareas-personales .tarea { min-height: 64px; white-space: normal; }
.tareas-personales .tarea.activa { background: var(--ok); border-color: var(--ok); color: #fff; }
.lista-simple { list-style: none; padding: 0; margin: .5rem 0 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-top: 1px solid var(--borde); }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.opciones .btn[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
:root[data-tema="oscuro"] { .opciones .btn[aria-pressed="true"] { color: #121513; } }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .25rem .75rem; }
.checks label { display: flex; align-items: center; gap: .4rem; font-weight: normal; }
.checks input { width: auto; }
.sa-baja { margin-top: .75rem; padding-top: .5rem; border-top: 1px dashed var(--borde); }
.etiqueta.baja { background: #fde2df; color: #8a1c14; }
.item.sa-unidad { display: block; }

/* Firma del registro */
.documento-firma { font-family: ui-monospace, Menlo, Consolas, monospace; max-height: 40vh; overflow: auto; margin: .5rem 0; padding: .6rem; background: var(--fondo); border-radius: 6px; font-size: .78rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
/* Las columnas del registro tienen que caber sin partirse en un móvil */
@media (max-width: 520px) { .documento-firma { font-size: .62rem; padding: .5rem; } }
.huella code { word-break: break-all; font-size: .75rem; }
.firma-zona { margin-top: .75rem; }
.botones-firma { display: grid; gap: .5rem; }
.ok-firma { color: var(--ok); font-weight: 600; }
.aviso-firma { color: var(--pausa); }
input.codigo { font-size: 1.4rem; letter-spacing: .3em; text-align: center; max-width: 12rem; }
ol.pasos { padding-left: 1.2rem; display: grid; gap: .6rem; }
ol.pasos input[type=file] { display: block; margin-top: .3rem; }
/* Códigos QR */
.item.inactivo { opacity: .55; }

/* Horario de trabajo (Ajustes) */
.horario { display: grid; gap: 8px; margin-top: 12px; }
.horario-dia { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--borde); }
.horario-dia > strong, .horario-dia > .btn { margin-top: 10px; }
.horario-tramos { display: grid; gap: 6px; }
.horario-tramos > .ayuda { margin-top: 10px; }
.horario-tramo { display: flex; align-items: center; gap: 6px; }
.horario-tramo input { width: auto; flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) { .horario-dia { grid-template-columns: 1fr auto; } .horario-tramos { grid-column: 1 / -1; grid-row: 2; } .horario-dia > .btn { margin-top: 0; } .horario-dia > strong { margin-top: 0; } }
.firma-a-mano { margin-top: .75rem; }
.firma-a-mano summary { cursor: pointer; color: var(--suave); }

/* Ajustes › Colores de los espacios */
.fila-color { display: flex; align-items: center; gap: 12px; }
.fila-color input[type=color] { width: 56px; min-height: 40px; padding: 2px; cursor: pointer; }

/* Navegación lateral: todas las secciones del espacio, sin desplazamiento horizontal. */
.panel-menu { position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 20; background: var(--superficie); border-right: 1px solid var(--borde); padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); overflow-y: auto; }
.panel-menu > .cab { margin-bottom: 24px; }
.panel-menu .menu { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; gap: 6px; overflow: visible; }
.panel-menu .menu a, body[data-color] .panel-menu .menu a { white-space: normal; min-height: 44px; padding: 12px; color: var(--texto); border-radius: 10px; text-decoration: none; }
.panel-menu .menu a.activo, body[data-color] .panel-menu .menu a.activo { color: var(--marca); background: color-mix(in srgb, var(--marca) 12%, var(--superficie)); }
.panel-menu .espacios { position: static; transform: none; width: 100%; height: auto; margin-top: 24px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--borde); border-radius: 0; box-shadow: none; flex-direction: column; }
.panel-menu .espacios button { min-height: 44px; padding: 10px; }
.con-menu-lateral { --menu-alto: 0px; }
.menu a:focus-visible, .menu-toggle:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.menu-toggle { display: none; }
.fondo-menu { position: fixed; inset: 0; z-index: 19; border: 0; background: rgb(0 0 0 / .45); }
@media (min-width: 900px) {
  .con-menu-lateral { padding-left: 256px; }
  .con-menu-lateral .vista { max-width: 1100px; }
}
@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; }
  .panel-menu { width: min(300px, 88vw); visibility: hidden; }
  .menu-abierto .panel-menu { visibility: visible; }
  .menu-abierto { overflow: hidden; }
  .panel-menu .espacios { display: flex; }
}
@media print {
  .panel-menu, .menu-toggle, .fondo-menu { display: none !important; }
  body.con-menu-lateral { padding-left: 0; }
}
.grupo-menu { display: grid; gap: 4px; }
.grupo-menu + .grupo-menu { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--borde); }
.grupo-menu h2 { margin: 0 0 6px; padding: 0 12px; color: var(--suave); font-size: .75rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .05em; }

/* Acceso con el pulgar, respetando la zona de gestos del móvil. */
@media (max-width: 899px) {
  #abrir-menu { position: fixed; z-index: 21; bottom: calc(16px + env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); min-height: 56px; min-width: 100px; border-radius: 28px; background: var(--marca); color: var(--superficie); border: 2px solid var(--superficie); box-shadow: 0 4px 18px rgb(0 0 0 / .25); }
  body[data-mano="izquierda"] #abrir-menu { right: auto; left: max(16px, env(safe-area-inset-left)); }
  .con-menu-lateral .vista { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .menu-abierto #abrir-menu { visibility: hidden; }
}

/* El panel sigue la mano elegida y acerca sus opciones a la parte inferior. */
@media (max-width: 899px) {
  .panel-menu { display: flex; flex-direction: column; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .panel-menu > .cab { flex: none; margin-top: auto; margin-bottom: 16px; }
  .panel-menu .menu { flex: none; }
  body:not([data-mano="izquierda"]) .panel-menu { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--borde); }
  body[data-mano="izquierda"] .panel-menu { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--borde); }
  .panel-menu #cerrar-menu { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); min-width: 56px; min-height: 56px; border-radius: 50%; }
  body[data-mano="izquierda"] .panel-menu #cerrar-menu { right: auto; left: max(16px, env(safe-area-inset-left)); }
  .panel-menu .menu { padding-bottom: 72px; }
}

@media (max-width: 899px) {
  .panel-menu .menu { flex-direction: column-reverse; gap: 16px; }
  .panel-menu .grupo-menu + .grupo-menu { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* Desplazamiento táctil propio del menú, sin arrastrar la página del fondo. */
@media (max-width: 899px) {
  .panel-menu { height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .panel-menu .menu { flex-shrink: 0; }
  .panel-menu > .cab { flex-shrink: 0; }
}

/* Recorrido extra: permite llevar incluso las primeras opciones hasta el pulgar. */
@media (max-width: 899px) {
  .panel-menu::before { content: ''; display: block; flex: 0 0 65dvh; }
}

/* Opciones táctiles de 56 px con icono y texto, alineadas al lado contrario del pulgar para que la mano no las tape:
   a la izquierda para diestros y a la derecha para zurdos. */
@media (max-width: 899px) {
  .panel-menu .menu a { min-height: 56px; padding: 12px; justify-content: flex-start; flex-direction: row; text-align: left; gap: 12px; }
  body[data-mano="izquierda"] .panel-menu .menu a { flex-direction: row-reverse; text-align: right; }
  .panel-menu .menu a .icono { flex: 0 0 20px; width: 20px; height: 20px; }
  .panel-menu .grupo-menu h2 { text-align: left; }
  .panel-menu > .cab { justify-content: flex-start; }
  body[data-mano="izquierda"] .panel-menu .grupo-menu h2 { text-align: right; }
  body[data-mano="izquierda"] .panel-menu > .cab { justify-content: flex-end; }
  /* El cierre va en la esquina inferior más cercana al pulgar: derecha para diestros, izquierda para zurdos. */
  .panel-menu #cerrar-menu { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; min-width: 56px; min-height: 56px; padding: 0; }
  body[data-mano="izquierda"] .panel-menu #cerrar-menu { right: auto; left: max(16px, env(safe-area-inset-left)); }
}

/* Cada familia conserva su tono incluso al cambiar de espacio. */
.grupo-menu[data-familia="personal"] { --tono-menu: #b5541c; }
.grupo-menu[data-familia="trabajo"] { --tono-menu: #27816b; }
.grupo-menu[data-familia="gestion"] { --tono-menu: #526fc1; }
.grupo-menu[data-familia="responsable"] { --tono-menu: #8a5cb8; }
.salida-menu { display: grid; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--borde); }
.panel-menu .salida-menu a { background: color-mix(in srgb, var(--texto) 6%, var(--superficie)); }
.panel-menu .salida-menu a:hover { background: color-mix(in srgb, var(--texto) 12%, var(--superficie)); }
.grupo-menu[data-familia="cuenta"] { --tono-menu: #89708f; }
.panel-menu .grupo-menu a { background: color-mix(in srgb, var(--tono-menu) 9%, var(--superficie)); }
.panel-menu .grupo-menu a:hover { background: color-mix(in srgb, var(--tono-menu) 16%, var(--superficie)); }
.panel-menu .grupo-menu a.activo,
body[data-color] .panel-menu .grupo-menu a.activo { background: color-mix(in srgb, var(--tono-menu) 23%, var(--superficie)); color: var(--texto); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tono-menu) 60%, var(--borde)); }
/* Modos del menú (Personal · Profesional · Empresa): símbolos de Material Symbols en la fila del botón de cierre.
   El activo se rellena con el tono de su familia; los demás quedan en trazo sobre la superficie. */
.icono.person { --i: url('../icons/material/person.svg'); }
.icono.person_apron { --i: url('../icons/material/person_apron.svg'); }
.icono.enterprise { --i: url('../icons/material/enterprise.svg'); }
.modos { display: flex; flex-wrap: wrap; gap: 4px; }
.modos .modo { --tono-menu: #27816b; appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--suave); cursor: pointer; }
.modos .modo[data-modo="personal"] { --tono-menu: #b5541c; }
.modos .modo[data-modo="empresa"] { --tono-menu: #8a5cb8; }
.modos .modo .icono { width: 24px; height: 24px; }
.modos .modo:hover { color: var(--texto); border-color: color-mix(in srgb, var(--tono-menu) 50%, var(--borde)); }
.modos .modo[aria-pressed="true"] { background: var(--tono-menu); border-color: var(--tono-menu); color: #fff; }
.modos .modo:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
/* Empresa cuelga de Profesional: una raya fina los separa de Personal */
.modos .modo[data-modo="pro"]:not(:first-child) { margin-left: 8px; }
:root[data-tema="oscuro"] { .modos .modo[aria-pressed="true"] { color: #0f1a14; background: color-mix(in srgb, var(--tono-menu) 55%, white); border-color: transparent; } }
@media (forced-colors: active) { .modos .modo[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } }
@media (max-width: 899px) {
  /* La fila de modos y el cierre se quedan abajo, al alcance del pulgar, mientras se desplazan las opciones */
  .panel-menu { padding-bottom: 0; }
  .panel-menu > .cab { order: 4; position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--borde); justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
  body[data-mano="izquierda"] .panel-menu > .cab { flex-direction: row-reverse; justify-content: space-between; }
  .panel-menu #cerrar-menu, body[data-mano="izquierda"] .panel-menu #cerrar-menu { position: static; }
  .panel-menu .menu { padding-bottom: 16px; }
  .modos .modo { width: 56px; height: 56px; border-radius: 12px; }
}
@media (max-width: 360px) { .modos .modo { width: 52px; height: 52px; } }

.icono.contacto { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="10" cy="9" r="2.5"/><path d="M6 17a4 4 0 0 1 8 0M16 8h2M16 12h2"/></svg>'); }
.icono.registro { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="m7 8 1 1 2-2M13 8h4m-10 6 1 1 2-2M13 14h4M7 18h10"/></svg>'); }

/* Pantallas de cronómetro: esfera central y controles al alcance del pulgar. */
.pantalla-crono { padding-bottom: 180px; }
.crono-esfera { width: min(100%, 380px); min-height: 340px; margin: 24px auto; border: 3px solid color-mix(in srgb, var(--marca) 35%, var(--borde)); border-radius: 42px; box-shadow: none; background: var(--superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.crono-esfera .reloj, .crono-esfera .cronometro { display: grid; place-items: center; border: 5px solid color-mix(in srgb, var(--marca) 55%, var(--borde)); border-radius: 50%; width: 240px; height: 240px; font-size: clamp(2rem, 7vw, 3rem); font-variant-numeric: tabular-nums; margin: 0; }
.crono-esfera .botones-fichar { display: flex; flex-wrap: wrap; justify-content: center; }
.crono-controles { position: fixed; z-index: 7; bottom: calc(70px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 16px; }
.crono-controles .btn { display: flex; flex-direction: column; gap: 2px; border-radius: 50%; padding: 8px; box-shadow: var(--sombra); background: var(--superficie); color: var(--texto); }
.crono-controles .crono-principal { width: 92px; height: 92px; min-height: 92px; background: var(--marca); border-color: var(--marca); color: var(--fondo); font-size: .72rem; }
.crono-controles .crono-pausa { width: 64px; height: 64px; font-size: .65rem; }
.crono-controles .btn::before { content: attr(data-simbolo); font-size: 1.7rem; line-height: 1.1; }
.crono-historial { position: fixed; z-index: 6; bottom: 0; left: 0; right: 0; padding: 0 16px env(safe-area-inset-bottom); background: var(--superficie); border-top: 1px solid var(--borde); border-radius: 20px 20px 0 0; box-shadow: 0 -4px 24px rgb(0 0 0 / .08); }
.crono-historial > summary { min-height: 56px; display: grid; place-items: center; cursor: pointer; font-weight: 600; list-style: none; }
.crono-historial > summary::before { content: ''; width: 36px; height: 4px; border-radius: 4px; background: var(--borde); margin-top: 8px; }
.crono-listado { display: grid; gap: 16px; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain; padding: 16px 0 24px; }
.crono-historial[open] { z-index: 9; }
@media (min-width: 900px) { .con-menu-lateral .crono-controles { left: calc(50% + 128px); } .con-menu-lateral .crono-historial { left: 256px; } }
@media (max-width: 899px) { .pantalla-crono .crono-esfera { margin-top: 0; } .con-menu-lateral:has(.pantalla-crono) #abrir-menu { bottom: calc(16px + env(safe-area-inset-bottom)); } .crono-historial > summary { margin-inline: 100px; font-size: .8rem; } }
.crono-controles .crono-pausa { position: absolute; left: calc(100% + 12px); }
@media (max-width: 380px) { .crono-controles .crono-pausa { left: calc(100% + 6px); width: 56px; height: 56px; min-height: 56px; } }

/* Las etiquetas accesibles no alteran la geometría de los controles. */
.crono-controles .btn.crono-principal, .crono-controles .btn.crono-pausa { font-size: 0; flex-shrink: 0; }
.crono-controles .btn::before { font-size: 30px; }
@media (max-width: 899px) {
  #abrir-menu { z-index: 21; }
  .crono-historial > summary { margin-inline: 112px; }
}

/* Pausa dibujada con dos barras: no depende de los glifos de la fuente. */
.crono-controles .crono-pausa[data-simbolo="Ⅱ"]::before { content: ''; display: block; width: 20px; height: 26px; background: linear-gradient(to right, currentColor 0 6px, transparent 6px 14px, currentColor 14px 20px); border-radius: 1px; }

/* Material Symbols de Google, servidos localmente para uso sin conexión. */
.crono-controles .btn[data-simbolo]::before { content: ''; display: block; width: 32px; height: 32px; background: currentColor; border-radius: 0; -webkit-mask: var(--icono-control) center / contain no-repeat; mask: var(--icono-control) center / contain no-repeat; }
.crono-controles .btn[data-simbolo="▶"] { --icono-control: url('../icons/material/play_arrow.svg?v=solido1'); }
.crono-controles .btn[data-simbolo="■"] { --icono-control: url('../icons/material/stop.svg?v=solido1'); }
.crono-controles .btn[data-simbolo="Ⅱ"] { --icono-control: url('../icons/material/pause.svg?v=solido1'); }

/* Iconos proporcionales al diámetro de cada control. */
.crono-controles .crono-principal[data-simbolo]::before { width: 48px; height: 48px; }
.crono-controles .crono-pausa[data-simbolo]::before { width: 34px; height: 34px; }
@media (max-width: 380px) {
  .crono-controles .crono-pausa[data-simbolo]::before { width: 30px; height: 30px; }
}

/* Misma proporción en botón e icono: control principal = 2 × pausa. */
.crono-controles .btn.crono-principal { width: 104px; height: 104px; min-width: 104px; min-height: 104px; }
.crono-controles .btn.crono-pausa { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
.crono-controles .crono-principal[data-simbolo]::before { width: 64px; height: 64px; }
.crono-controles .crono-pausa[data-simbolo]::before { width: 32px; height: 32px; }

/* Se conserva el tamaño de los botones; solo cambia la escala de los iconos. */
.crono-controles .btn.crono-principal { width: 92px; height: 92px; min-width: 92px; min-height: 92px; }
.crono-controles .btn.crono-pausa { width: 64px; height: 64px; min-width: 64px; min-height: 64px; }
@media (max-width: 380px) {
  .crono-controles .btn.crono-pausa { width: 56px; height: 56px; min-width: 56px; min-height: 56px; }
}

/* Iconos de los botones (los pone ui.js según el texto: lib/iconos.js) */
.icono.mas { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>'); }
.icono.guardar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.5 4.5L19 7"/></svg>'); }
.icono.borrar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>'); }
.icono.cerrar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg>'); }
.icono.salir { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4H5v16h4M14 8l4 4-4 4M18 12H9"/></svg>'); }
.icono.entrar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 4h4v16h-4M10 8l4 4-4 4M14 12H4"/></svg>'); }
.icono.importar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V4M8 8l4-4 4 4M4 15v5h16v-5"/></svg>'); }
.icono.descargar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M8 11l4 4 4-4M4 15v5h16v-5"/></svg>'); }
.icono.copiar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3"/></svg>'); }
.icono.telefono { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></svg>'); }
.icono.movil { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg>'); }
.icono.email { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>'); }
.icono.firmar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16M6 16 16 6l2 2L8 18H6z"/></svg>'); }
.icono.qr { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM18 18h3v3h-3z"/></svg>'); }
.icono.invitar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M19 8v6M16 11h6"/></svg>'); }
.icono.stop { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="1.5"/></svg>'); }
.icono.pausa { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5v14M15 5v14"/></svg>'); }
.icono.play { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4.5v15l12-7.5z"/></svg>'); }
.icono.volver { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg>'); }
.icono.siguiente { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg>'); }
.icono.flecha { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>'); }
.icono.recargar { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5"/></svg>'); }
.icono.ver { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>'); }
.icono.llave { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="m11 12 9-9M17 6l3 3"/></svg>'); }
.icono.nota { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h12v6M4 4v16h8M14 20l6-6-2-2-6 6v2z"/></svg>'); }
.icono.etiqueta { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12V3h9l9 9-9 9z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg>'); }
.icono.camion { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6h12v10H2zM14 10h4l3 3v3h-7"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>'); }
.icono.euro { --i: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6a7 7 0 1 0 0 12M4 10h9M4 14h9"/></svg>'); }
.btn > .icono { flex: none; width: 20px; height: 20px; }
.btn.mini > .icono { width: 16px; height: 16px; }
.btn.enlace > .icono { width: 18px; height: 18px; }
.btn.enlace:has(> .icono) { display: inline-flex; gap: 6px; text-decoration: none; }
.crono-controles .btn > .icono { display: none; }

/* Deslizar entre secciones (html, body llevan overscroll-behavior-x: none para que Chrome no lo tome como «atrás»): pastilla con la sección a la que se va, que sale con el dedo */
.deslizar-pista { --avance: 0; position: fixed; z-index: 22; top: 50%; display: flex; align-items: center; gap: 6px; max-width: 70vw; padding: 10px 16px;
  border-radius: 999px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); box-shadow: 0 4px 18px rgb(0 0 0 / .2);
  font-weight: 600; pointer-events: none; opacity: calc(.35 + var(--avance) * .65); transition: background .12s, color .12s; }
.deslizar-pista[hidden] { display: none; }
.deslizar-pista[data-lado="derecha"] { right: 12px; transform: translate(calc((1 - var(--avance)) * 60%), -50%); }
.deslizar-pista[data-lado="izquierda"] { left: 12px; flex-direction: row-reverse; transform: translate(calc((var(--avance) - 1) * 60%), -50%); }
.deslizar-pista.listo { background: var(--marca); color: var(--superficie); border-color: var(--marca); }
.deslizar-flecha { font-size: 1.4rem; line-height: 1; }
.deslizar-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }