/* Pantallas de ClaudeERP sobre el sistema de diseño Santifer (tokens.css + componentes.css).
   Aquí solo va la maquetación propia de la app; colores, tipografía y componentes salen de
   los tokens. Móvil primero. */

/* El logo es blanco: va siempre sobre pizarra, también en modo oscuro (donde el primario es arena). */
:root { --logo-fondo: #2e3538; color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }

.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cabecera fija con logo, búsqueda rápida y salida */
.cabecera { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--espacio-3); min-height: 64px; padding: var(--espacio-2) var(--espacio-4); background: var(--superficie); color: var(--tinta); border-bottom: 1px solid var(--linea); }
.cabecera__marca { display: flex; align-items: center; gap: var(--espacio-3); color: inherit; text-decoration: none; font-size: 18px; font-weight: 700; flex: none; }
.logo-caja { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-md); background: var(--logo-fondo); flex: none; }
.cabecera__logo { width: 32px; height: 32px; display: block; }
.cabecera__busqueda { flex: 1; min-width: 0; max-width: 420px; }
.cabecera__busqueda input { width: 100%; min-height: var(--control-md); padding: 0 var(--espacio-3); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); background: var(--superficie); color: var(--tinta); font: inherit; font-size: 16px; }
.cabecera__busqueda input::placeholder { color: var(--tinta-suave); }
.cabecera__salida { margin-left: auto; flex: none; }
.cabecera__salir { flex: none; min-height: var(--control-md); padding: 0 var(--espacio-3); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); background: var(--superficie); color: var(--tinta); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cabecera__salir:hover { background: var(--superficie-hundida); }
:where(.cabecera__busqueda input, .cabecera__salir, .volver):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Cuerpo de la página */
.contenido { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--espacio-4); display: flex; flex-direction: column; gap: var(--espacio-4); }
.contenido--estrecho { max-width: 420px; }
.pantalla-titulo { font-size: 28px; line-height: 34px; font-weight: 700; }
.pantalla-ayuda { color: var(--tinta-suave); }

/* Buscador y resultados a todo el ancho de la columna */
.sf-buscador { max-width: none; }
.sf-buscador__barra input::-webkit-search-cancel-button { cursor: pointer; }
.sf-resultado:hover { background: var(--superficie-hundida); }
.sf-resultado + .sf-resultado { border-top: 1px solid var(--linea); }
.sf-resultado__nombre { min-width: 0; }
.resultados-vacios { padding: var(--espacio-4); color: var(--tinta-suave); }
.ejemplos { display: flex; flex-wrap: wrap; gap: var(--espacio-2); padding: var(--espacio-3) var(--espacio-4); }
.ejemplo { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--tinta); font-size: 14px; text-decoration: none; }
.ejemplo:hover { background: var(--superficie-hundida); }

/* Consulta: búsqueda a la izquierda y ficha a la derecha en el ordenador; una columna en el móvil */
.contenido--ancho { max-width: 1240px; }
.consulta { display: flex; flex-wrap: wrap; gap: var(--espacio-6); align-items: flex-start; }
.consulta__busqueda { flex: 1 1 340px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-4); }
.consulta__ficha { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-4); }
.ficha-vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espacio-3); min-height: 320px; padding: var(--espacio-8); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-lg); color: var(--tinta-suave); text-align: center; }
.ficha-vacia .sf-icono { width: 40px; height: 40px; stroke-width: 1.5; }
.ficha-vacia p { max-width: 340px; }

/* Ficha del modelo */
.volver { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--espacio-1); color: var(--tinta-suave); font-size: 15px; font-weight: 600; text-decoration: none; }
.volver:hover { color: var(--tinta); }
.ficha__cabecera { display: flex; align-items: center; gap: var(--espacio-3); }
.ficha__foto { width: 56px; height: 56px; border-radius: var(--radio-lg); background: var(--superficie-hundida); color: var(--tinta-suave); display: grid; place-items: center; overflow: hidden; flex: none; }
.ficha__foto .sf-icono { width: 32px; height: 32px; stroke-width: 1.5; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__nombre { font-size: 24px; line-height: 30px; font-weight: 700; }
.ficha__cuerpo { display: flex; flex-wrap: wrap; gap: var(--espacio-4); align-items: flex-start; }
.ficha__cuerpo .sf-servicios { flex: 999 1 460px; max-width: none; }
.sf-servicios__fila { cursor: pointer; }
.sf-servicios__fila--marcada { background: var(--acento-suave); }
.sf-servicios__fila--apagada { cursor: default; }
.sf-servicios__fila--apagada .sf-servicios__nombre { color: var(--tinta-suave); }
.ficha__vacia { padding: var(--espacio-4); border-top: 1px solid var(--linea); color: var(--tinta-suave); }
/* El botón va al lado del total; si no cabe (móvil), baja a su línea y ocupa todo el ancho */
.sf-servicios__accion { flex-wrap: wrap; }
.sf-servicios__accion [data-resumen] { flex: 999 1 160px; min-width: 0; }
.sf-servicios__accion .sf-boton { flex: 1 0 auto; }
.piezas { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); }
.piezas__lista { list-style: none; margin: 0; padding: 0; }
.piezas__fila { display: flex; flex-direction: column; gap: 2px; padding: var(--espacio-2) 0; border-bottom: 1px solid var(--linea); }
.piezas__fila:last-child { border-bottom: 0; }
.piezas__nombre { font-size: 15px; line-height: 20px; }

/* Inicio de sesión */
.acceso { margin-top: var(--espacio-8); padding: var(--espacio-6); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); box-shadow: var(--sombra-tarjeta); display: flex; flex-direction: column; gap: var(--espacio-5); }
.acceso__logo { width: 64px; height: 64px; padding: var(--espacio-2); border-radius: var(--radio-md); background: var(--logo-fondo); }
.acceso__formulario { display: flex; flex-direction: column; gap: var(--espacio-4); }

/* En el móvil, si la cabecera lleva búsqueda, basta el logo: el sitio es para la búsqueda */
@media (max-width: 479px) {
  .cabecera:has(.cabecera__busqueda) .cabecera__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 999px) {
  .consulta__busqueda--escritorio, .consulta__ficha--vacia { display: none; }
  .consulta__busqueda { max-width: none; }
}
@media (min-width: 1000px) {
  .contenido { padding: var(--espacio-6); }
  .cabecera { padding: var(--espacio-2) var(--espacio-6); }
  .solo-movil, .pagina-consulta .cabecera__busqueda { display: none; }
  .ficha__foto { width: 72px; height: 72px; }
  .ficha__foto .sf-icono { width: 40px; height: 40px; }
  .ficha__nombre { font-size: 28px; line-height: 34px; }
}

/* La cifra de stock no se parte en dos líneas; si el cajón es largo, baja él a la siguiente. */
.sf-stock { flex-wrap: wrap; row-gap: 2px; }
.sf-stock__texto { white-space: nowrap; }

/* ==========================================================================================
   Resto de pantallas del mostrador: inicio, OT, alta, caja y almacén.
   Mismos tokens y componentes sf-* que la Consulta; aquí solo la maquetación de cada una.
   ========================================================================================== */

/* «hidden» manda aunque el componente tenga su propio display (botones, rejillas…) */
[hidden] { display: none !important; }
/* Al saltar a un campo (resumen de errores, enlaces internos) no queda tapado por la cabecera fija */
html { scroll-padding-top: 88px; scroll-padding-bottom: 152px; }
a { color: var(--acento); }
a:hover { color: var(--tinta); }
ul, ol { margin: 0; }
fieldset { min-width: 0; }

/* Saltar al contenido: aparece solo al llegar con el teclado */
.saltar { position: absolute; left: var(--espacio-2); top: -120px; z-index: 30; padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio-md); background: var(--primario); color: var(--sobre-primario); font-weight: 600; text-decoration: none; }
.saltar:focus { top: var(--espacio-2); outline: 2px solid var(--foco); outline-offset: 2px; }
.contenido:focus { outline: none; }

/* Menú principal: en la cabecera en el ordenador; abajo, al alcance del pulgar, en el móvil */
.menu__enlace { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--control-md); padding: 0 var(--espacio-3); border-radius: var(--radio-md); color: var(--tinta-suave); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu__enlace:hover { background: var(--superficie-hundida); color: var(--tinta); }
.menu__enlace[aria-current="page"] { background: var(--acento-suave); color: var(--tinta); }
:where(.menu__enlace, .pestanas__enlace, .boton-icono, .chip-enlace, .tablero, .resultado-boton, .tarea):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.menu--cabecera { display: none; gap: var(--espacio-1); }
.menu--inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--espacio-1); padding: var(--espacio-1) var(--espacio-2) calc(var(--espacio-1) + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--linea); }
.menu--inferior .menu__enlace { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--espacio-1) 0; font-size: 12px; line-height: 16px; }
.menu--inferior .menu__enlace .sf-icono { width: 22px; height: 22px; }
body:has(.menu--inferior) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* Franja del modo demostración y avisos de ensayo */
.franja-demo { display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); margin: 0; padding: 6px var(--espacio-4); background: var(--arena-suave); border-bottom: 1px solid var(--arena); color: var(--tinta); font-size: 13px; line-height: 18px; text-align: center; }
.franja-demo .sf-icono { width: 16px; height: 16px; }
.franja-datos { background: var(--superficie); border-bottom-color: var(--linea); color: var(--tinta-suave); }
.mensajes { display: flex; flex-direction: column; gap: var(--espacio-2); }
.aviso-ensayo { display: flex; gap: var(--espacio-2); align-items: flex-start; padding: var(--espacio-3) var(--espacio-4); border-radius: var(--radio-md); background: var(--info-suave); color: var(--tinta); font-size: 15px; line-height: 22px; }
.aviso-ensayo .sf-icono { color: var(--info); margin-top: 1px; }
.resumen-errores { padding: var(--espacio-3) var(--espacio-4); border: 1px solid var(--peligro); border-radius: var(--radio-md); background: var(--peligro-suave); color: var(--tinta); font-size: 15px; line-height: 22px; }
.resumen-errores ul { margin-top: var(--espacio-1); padding-left: var(--espacio-5); }
.resumen-errores a { color: var(--tinta); }
.resumen-errores:focus { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Piezas comunes */
.panel { display: flex; flex-direction: column; gap: var(--espacio-2); padding: var(--espacio-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); }
.panel--lista { gap: 0; padding: 0; overflow: hidden; }
.panel__titulo { padding: var(--espacio-3) var(--espacio-4) var(--espacio-2); }
.etiqueta-seccion { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta-suave); }
.titulo-seccion { margin: 0; }
.encabezado-pantalla { display: flex; flex-direction: column; gap: var(--espacio-1); }
.fila-precio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-top: 1px solid var(--linea); }
.fila-precio__importe { font-weight: 700; white-space: nowrap; }
.fila-precio > .sf-cifra { flex: none; white-space: nowrap; }
.segmentado > .sf-nota { margin-top: 6px; }
.fila-precio--total { align-items: center; }
.fila-precio--total strong + strong { font-size: 20px; line-height: 24px; text-align: right; }
.fila-precio--suave { color: var(--tinta-suave); }
.fila-botones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-1); }
.fila-botones .sf-boton { flex: 1 1 140px; }
.boton-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-md); color: var(--tinta); flex: none; }
.boton-icono:hover { background: var(--superficie-hundida); color: var(--tinta); }
.enlace { font-weight: 600; }
.chip-enlace { text-decoration: none; }
.chip-enlace:hover { color: inherit; text-decoration: underline; }
.lista-puntos { padding-left: var(--espacio-5); display: flex; flex-direction: column; gap: 6px; }
.campo-busqueda { min-height: var(--control-md); padding: 0 var(--espacio-3); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); background: var(--superficie); }
.campo-busqueda input { font-size: 16px; }
.campo-busqueda:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.campo-texto { min-height: 88px; padding: 10px var(--espacio-3); line-height: 22px; resize: vertical; }
.sf-chip--grande { align-self: flex-start; height: 34px; font-size: 16px; }
/* Estados de Airtable sin equivalente en el diseño: el color del más parecido */
.sf-chip--cita-previa, .sf-chip--cita { background: var(--estado-recibido-fondo); color: var(--estado-recibido); }
.sf-chip--placa-base { background: var(--estado-reparacion-fondo); color: var(--estado-reparacion); }
.sf-chip--reciclaje { background: var(--estado-abandonado-fondo); color: var(--estado-abandonado); }
.sf-check--peque { font-size: 14px; line-height: 20px; }
.sf-check--peque input { width: 20px; height: 20px; }
.sf-tarjeta-ot:hover { border-color: var(--linea-fuerte); }

/* Dos columnas en el ordenador (lo principal y un lateral); una en el móvil */
.dos-columnas { display: flex; flex-wrap: wrap; gap: var(--espacio-6); align-items: flex-start; }
.dos-columnas__principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-4); }
.dos-columnas__lateral { flex: 1 1 320px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--espacio-4); }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espacio-3); }
.rejilla-tarjetas .sf-tarjeta-ot { width: auto; }

/* --- Inicio: tablero de OT y bandeja «Hoy»; en el móvil, en pestañas --- */
.contenido--panel { max-width: 1680px; }
/* «¿Qué quieres hacer?»: lo primero que se ve, las tareas del día con sus palabras */
.tareas { display: flex; flex-direction: column; gap: var(--espacio-3); margin-bottom: var(--espacio-4); }
.tareas__titulo { margin: 0; font-size: 22px; line-height: 28px; }
.tareas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.tarea { display: flex; align-items: center; gap: var(--espacio-3); height: 100%; min-height: 76px; box-sizing: border-box; padding: var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); box-shadow: var(--sombra-tarjeta); color: var(--tinta); text-decoration: none; }
.tarea:hover { border-color: var(--linea-fuerte); background: var(--superficie-hundida); }
.tarea > .sf-icono { flex: none; width: 28px; height: 28px; }
.tarea__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarea__texto strong { font-size: 16px; line-height: 20px; }
.tarea__texto span { color: var(--tinta-suave); font-size: 13px; line-height: 18px; }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espacio-1); padding: var(--espacio-1); border-radius: var(--radio-md); background: var(--superficie-hundida); }
.pestanas__enlace { display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); min-height: var(--control-md); border-radius: var(--radio-sm); color: var(--tinta-suave); font-weight: 600; text-decoration: none; }
.pestanas__enlace:hover { color: var(--tinta); }
.pestanas__enlace[aria-current="page"] { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-tarjeta); }
.inicio { display: flex; flex-direction: column; gap: var(--espacio-6); }
.inicio--ver-ot .inicio__hoy, .inicio--ver-hoy .inicio__tablero { display: none; }
.inicio__tablero { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.inicio__hoy { min-width: 0; }
.barra-ot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3); }
.barra-ot__titulo { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.barra-ot__busqueda { flex: 1 1 280px; max-width: 420px; }
.barra-ot__nueva { display: none; flex: none; } /* en el móvil ya está en el menú de abajo */
.tablero-zona { display: flex; flex-direction: column; gap: var(--espacio-3); }
.tablero__filtro { color: var(--tinta-suave); }
.tablero { display: flex; flex-direction: column; gap: var(--espacio-5); }
.tablero__columna { display: flex; flex-direction: column; gap: var(--espacio-3); min-width: 0; }
.tablero__cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2); margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.tablero .sf-tarjeta-ot { width: auto; }
.tablero__vacio { display: none; color: var(--tinta-suave); font-size: 14px; }
.sf-hoy { max-width: none; }
.sf-hoy__grupo { margin: 0; }
.hoy__lista { list-style: none; padding: 0; }
.sf-hoy__tarea > form { flex: none; margin: 0; }
.sf-hoy__tarea > .sf-boton { flex: none; }
.sf-hoy__tarea > .aviso-ensayo { flex: 1; }
.sf-hoy__texto .sf-stock { margin-top: 2px; }
.hoy__vacia { padding: var(--espacio-4); color: var(--tinta-suave); }

/* --- Ficha de OT --- */
.ficha-ot { display: flex; flex-direction: column; gap: var(--espacio-4); }
.ficha-ot__cabecera { display: flex; flex-direction: column; gap: var(--espacio-3); }
.ficha-ot__titulo { display: flex; align-items: center; gap: var(--espacio-3); }
.ficha-ot__titulo .boton-icono { margin-left: calc(-1 * var(--espacio-3)); }
.numero-ot { margin: 0; font-variant-numeric: tabular-nums; }
.ficha-ot__acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); }
.ficha-ot__acciones .sf-boton { padding: 0 var(--espacio-2); }
.ficha-ot__principal { grid-column: 1 / -1; }
.ficha-ot__cuerpo, .ficha-ot__columna { display: flex; flex-direction: column; gap: var(--espacio-4); min-width: 0; }
.ficha-ot__persona { gap: 6px; }
.ficha-ot__garantia { background: var(--aviso-suave); border-color: var(--aviso); }
.ficha-ot__nombre { font-size: 17px; line-height: 24px; font-weight: 700; }
.ficha-ot__separada { margin-top: var(--espacio-3); }
.ficha-ot__desbloqueo { display: flex; flex-direction: column; gap: var(--espacio-2); align-items: flex-start; margin-top: var(--espacio-1); }
.ficha-ot__averia { display: flex; flex-direction: column; gap: var(--espacio-1); padding: var(--espacio-3) var(--espacio-4); border-top: 1px solid var(--linea); font-size: 15px; line-height: 22px; }
.ficha-ot__fotos { display: flex; flex-direction: column; gap: var(--espacio-2); }
.ficha-ot__fotos .sf-fotos__rejilla, .alta .sf-fotos__rejilla { grid-template-columns: repeat(auto-fill, 96px); }
.foto-mini { padding: 0; text-decoration: none; }
.foto-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-subir { display: contents; }
.boton-foto { cursor: pointer; text-align: center; }
.boton-foto:hover { border-color: var(--tinta-suave); color: var(--tinta); }
.boton-foto:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.foto-quitar { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--tinta); cursor: pointer; }
.foto-quitar .sf-icono { width: 16px; height: 16px; }
.foto-quitar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.estados { display: flex; flex-direction: column; gap: var(--espacio-3); margin: 0; padding: 0; border: 0; }
.estados legend { padding: 0; margin-bottom: var(--espacio-3); }
.estados__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); }
.estados__boton .sf-chip { height: 24px; padding: 0 var(--espacio-2); font-size: 13px; }
.ficha-ot__estado { gap: var(--espacio-3); }
.historial { list-style: none; padding: 0; }
.historial__evento { display: flex; gap: var(--espacio-3); padding: 10px var(--espacio-4); border-top: 1px solid var(--linea); }
.historial__momento { width: 88px; flex: none; }
.historial__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-1); min-width: 0; }
.historial__nota { padding: 0 var(--espacio-4) var(--espacio-3); }
.nota-formulario { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-2); }
.nota-formulario .sf-campo { align-self: stretch; }
.nota-formulario__texto { min-height: 64px; padding: 10px var(--espacio-3); line-height: 22px; resize: vertical; }
#nota-formulario { display: flex; flex-direction: column; gap: var(--espacio-2); }
.sf-patron--lectura .sf-patron__punto { cursor: default; }
.visor { max-width: min(92vw, 900px); max-height: 92vh; padding: var(--espacio-3); border: 0; border-radius: var(--radio-lg); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flotante); }
.visor::backdrop { background: rgba(0, 0, 0, 0.6); }
.visor__imagen { display: block; max-width: 100%; max-height: calc(92vh - 96px); margin: 0 auto var(--espacio-3); border-radius: var(--radio-md); }
.visor form { display: flex; justify-content: flex-end; }

/* --- Alta de OT: una columna, en el orden en que se pregunta, y el botón abajo --- */
.contenido--formulario { max-width: 680px; padding-bottom: 0; }
.alta { display: flex; flex-direction: column; gap: var(--espacio-5); }
.alta__cabecera { display: flex; align-items: center; gap: var(--espacio-3); }
.alta__cabecera .boton-icono { margin-left: calc(-1 * var(--espacio-3)); }
.alta__titulo { font-size: 24px; line-height: 30px; font-weight: 700; }
.alta__seccion { display: flex; flex-direction: column; gap: var(--espacio-3); }
.alta__paso { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--tinta-suave); }
.alta__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); align-items: start; }
@media (min-width: 480px) { .alta__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.alta__acepta { font-size: 15px; line-height: 22px; }
.segmentado { margin: 0; padding: 0; border: 0; }
.segmentado legend { padding: 0; margin-bottom: 6px; }
.segmentado__opciones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); overflow: hidden; }
.segmentado__opcion { position: relative; display: flex; }
.segmentado__opcion input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.segmentado__opcion span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--control-md); padding: 0 var(--espacio-2); background: var(--superficie); color: var(--tinta); font-weight: 500; text-align: center; cursor: pointer; }
.segmentado__opcion + .segmentado__opcion span { border-left: 1px solid var(--linea); }
.segmentado__opcion input:checked + span { background: var(--primario); color: var(--sobre-primario); font-weight: 600; }
.segmentado__opcion input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: -4px; }
.segmentado__opcion input:disabled + span { background: var(--superficie-hundida); color: var(--tinta-tenue); cursor: not-allowed; }
.desbloqueo { display: flex; flex-direction: column; gap: var(--espacio-3); }
.desbloqueo__parte { display: none; flex-direction: column; gap: var(--espacio-3); }
.alta:has(input[name="desbloqueo"][value="patron"]:checked) [data-si-desbloqueo="patron"],
.alta:has(input[name="desbloqueo"][value="codigo"]:checked) [data-si-desbloqueo="codigo"] { display: flex; }
.alta:has(input[name="desbloqueo"][value="ninguno"]:checked) .desbloqueo__aviso { display: none; }
@supports not selector(:has(*)) { .desbloqueo__parte { display: flex; } }
.desbloqueo__aviso { align-items: flex-start; }
.desbloqueo__aviso .sf-icono { margin-top: 1px; }
.sf-patron { touch-action: none; user-select: none; }
.modelo-elegido { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); }
.modelo-elegido strong { flex: 1; min-width: 0; }
.buscador-modelo { display: flex; flex-direction: column; gap: var(--espacio-3); }
.buscador-modelo[hidden], .modelo-elegido[hidden] { display: none; }
.buscador-modelo__barra { display: flex; gap: var(--espacio-2); }
.buscador-modelo__barra .campo-busqueda { flex: 1; min-width: 0; }
.resultados-modelo { border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--superficie); overflow: hidden; }
.resultados-modelo:not(:has(*)) { display: none; }
.resultado-boton { width: 100%; border: 0; background: var(--superficie); font: inherit; text-align: left; cursor: pointer; }
.resultado-boton + .resultado-boton { border-top: 1px solid var(--linea); }
.clientes-encontrados { display: flex; flex-direction: column; gap: var(--espacio-2); }
.clientes-encontrados:not(:has(*)) { display: none; }
.cliente-encontrado { flex-wrap: wrap; }
.cliente-encontrado__texto { flex: 1 1 200px; min-width: 0; }
.alta-servicios { max-width: none; }
.alta-servicios__fila { cursor: default; }
.alta-servicios__fila .sf-servicios__nombre { cursor: pointer; }
.alta-servicios__fila .sf-stock, .alta-servicios__fila .alta-servicios__error { grid-column: 2 / 4; }
.precio-campo { display: inline-flex; align-items: center; gap: var(--espacio-1); font-weight: 700; }
.precio-campo input { width: 112px; min-height: 40px; padding: 0 var(--espacio-2); font-size: 17px; font-weight: 700; text-align: right; }
.precio-campo input::placeholder { font-size: 13px; font-weight: 500; }
.alta-servicios__nota { padding: var(--espacio-2) var(--espacio-4); border-top: 1px solid var(--linea); }
.alta-servicios__mas > summary { display: flex; align-items: center; gap: var(--espacio-2); min-height: var(--control-md); padding: var(--espacio-2) var(--espacio-4); border-top: 1px solid var(--linea); color: var(--acento); font-weight: 600; cursor: pointer; list-style: none; }
.alta-servicios__mas > summary::-webkit-details-marker { display: none; }
.alta-servicios__mas > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: var(--radio-sm); font-size: 18px; line-height: 1; }
.alta-servicios__mas[open] > summary::before { content: "−"; }
.alta-servicios__mas > summary:hover { color: var(--tinta); }
.alta-servicios__mas > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.alta-servicios > .alta-servicios__error { padding: 0 var(--espacio-4) var(--espacio-3); }
.casillas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2) var(--espacio-3); }
.opciones { display: flex; flex-direction: column; gap: var(--espacio-3); margin: 0; padding: 0; border: 0; }
.opciones legend { padding: 0; margin-bottom: var(--espacio-1); }
.consentimiento { padding: var(--espacio-3); border-radius: var(--radio-md); background: var(--aviso-suave); }
.alta:not(:has(input[data-no-original]:checked)) .consentimiento { display: none; }
.alta__firma { max-width: none; }
.sf-firma__zona[hidden] { display: none; }
.firma__lienzo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; color: var(--tinta); touch-action: none; cursor: crosshair; }
.alta__pie { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: var(--espacio-2); margin: var(--espacio-2) calc(-1 * var(--espacio-4)) 0; padding: var(--espacio-3) var(--espacio-4) calc(var(--espacio-4) + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--linea); }
.alta__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--espacio-3); }
.alta__total strong { font-size: 20px; line-height: 24px; }
.escaner { width: min(92vw, 480px); padding: var(--espacio-4); border: 0; border-radius: var(--radio-lg); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flotante); }
.escaner::backdrop { background: rgba(0, 0, 0, 0.6); }
.escaner__video { display: block; width: 100%; margin: var(--espacio-3) 0; border-radius: var(--radio-md); background: #000; }
.escaner form { display: flex; justify-content: flex-end; }

/* --- Caja: cobrar y entregar, y la caja del día --- */
.cobro { gap: var(--espacio-4); }
.cobro__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espacio-3); }
.cobro__lineas { border-top: 1px solid var(--linea); }
.cobro__lineas .fila-precio { padding: var(--espacio-3) 0; border-top: 0; border-bottom: 1px solid var(--linea); }
.cobro__lineas .fila-precio--total { border-bottom: 0; }
.cobro__formulario { display: flex; flex-direction: column; gap: var(--espacio-4); }
.segmentado__opciones--cuatro { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-2); border: 0; border-radius: 0; overflow: visible; }
.segmentado__opciones--cuatro .segmentado__opcion span,
.segmentado__opciones--cuatro .segmentado__opcion + .segmentado__opcion span { min-height: var(--control-lg); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-md); font-size: 17px; font-weight: 600; }
.segmentado__opciones--cuatro .segmentado__opcion input:checked + span { border-color: var(--primario); }
.segmentado__opciones--cuatro .segmentado__opcion input:focus-visible + span { outline-offset: 2px; }
.cobro__efectivo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-4); }
.cobro__efectivo .sf-campo { flex: 1 1 200px; }
.cobro__cambio { flex: 1 1 200px; padding-bottom: 10px; }
.cobro__cambio strong { font-size: 20px; line-height: 24px; }
.cobro__formulario:not(:has(input[name="metodo"][value="efectivo"]:checked)) [data-solo-efectivo] { display: none; }
.cobro__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-3); }
.cobro__factura { order: -1; }
.cobro__principal { flex: 1 1 260px; max-width: 440px; }
.caja-dia { max-width: none; display: flex; flex-direction: column; }
.caja-dia__cierre { display: flex; flex-direction: column; gap: var(--espacio-3); margin-top: var(--espacio-3); }
.caja-dia__diferencia { border-bottom: 0; }
.ultimos-cobros .fila-precio { padding: var(--espacio-2) 0; }
.ultimos-cobros .titulo-seccion + .fila-precio { border-top: 0; }

/* --- Almacén: recepción de pedido a cajón --- */
.campo-busqueda--escaner { border: 2px solid var(--acento); }
.recepcion { display: flex; flex-direction: column; gap: var(--espacio-4); }
.recepcion__marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; }
.recepcion__tabla { width: 100%; border-collapse: collapse; }
.recepcion__tabla thead th { padding: 10px var(--espacio-4); background: var(--superficie-hundida); color: var(--tinta-suave); font-size: 13px; line-height: 18px; font-weight: 600; text-align: left; }
.recepcion__tabla td, .recepcion__tabla tbody th { padding: var(--espacio-3) var(--espacio-4); border-top: 1px solid var(--linea); text-align: left; vertical-align: middle; font-weight: 400; }
.recepcion__pieza > * { display: block; }
.recepcion__tabla thead th:first-child { width: 34%; }
.recepcion__fila--destacada { background: var(--acento-suave); }
.recepcion__fila--completa { background: var(--exito-suave); }
.recepcion__destino .sf-check { margin-top: 6px; }
.contador-piezas { display: flex; align-items: center; gap: 6px; }
.contador-piezas .sf-boton { padding: 0; width: var(--control-sm); }
.contador-piezas .sf-boton .sf-icono { width: 18px; height: 18px; }
.contador-piezas__numero { width: 64px; padding: 0 var(--espacio-1); font-size: 18px; font-weight: 700; text-align: center; }
.contador-piezas__total { white-space: nowrap; }
.campo-cajon { width: 96px; font-size: 18px; }
.recepcion__acciones { display: flex; justify-content: flex-end; gap: var(--espacio-3); }
.etiqueta-vista { align-items: flex-start; gap: var(--espacio-3); }

@media (max-width: 759px) {
  .recepcion__tabla thead { display: none; }
  .recepcion__tabla, .recepcion__tabla tbody, .recepcion__tabla tr, .recepcion__tabla td, .recepcion__tabla tbody th { display: block; }
  .recepcion__tabla tr { padding: var(--espacio-3) var(--espacio-4); border-top: 1px solid var(--linea); }
  .recepcion__tabla tr:first-child { border-top: 0; }
  .recepcion__tabla td, .recepcion__tabla tbody th { padding: var(--espacio-1) 0; border: 0; }
  .recepcion__tabla td[data-titulo]::before { content: attr(data-titulo); display: block; margin-bottom: 2px; color: var(--tinta-suave); font-size: 13px; font-weight: 600; }
  .recepcion__tabla td.recepcion__etiqueta::before { content: none; }
  .recepcion__acciones .sf-boton { width: 100%; }
}

@media (max-width: 999px) {
  .dos-columnas__lateral { max-width: none; }
}
@media (max-width: 399px) {
  .ficha-ot__acciones .sf-boton:not(.ficha-ot__principal) .sf-icono { display: none; }
}

@media (min-width: 1000px) {
  .menu--cabecera { display: flex; }
  .menu--inferior { display: none; }
  body:has(.menu--inferior) { padding-bottom: 0; }
  .pestanas { display: none; }
  .tareas__lista { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espacio-3); }
  .tarea { padding: var(--espacio-4); }
  .inicio { flex-direction: row; align-items: flex-start; }
  .inicio--ver-ot .inicio__hoy, .inicio--ver-hoy .inicio__tablero { display: flex; }
  .inicio__tablero { flex: 1 1 0; }
  .inicio__hoy { flex: 0 0 400px; display: flex; flex-direction: column; }
  .barra-ot__nueva { display: inline-flex; }
  .tablero { flex-direction: row; align-items: flex-start; gap: var(--espacio-4); overflow-x: auto; padding-bottom: var(--espacio-3); scroll-snap-type: x proximity; }
  .tablero__columna { flex: 0 0 272px; scroll-snap-align: start; }
  .tablero__columna--vacia { flex-basis: 196px; }
  .tablero__vacio { display: block; padding: var(--espacio-4); border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-lg); text-align: center; }
  .ficha-ot__cabecera { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--espacio-4); }
  .ficha-ot__acciones { display: flex; flex-wrap: wrap; margin-left: auto; }
  .ficha-ot__acciones .sf-boton { padding: 0 var(--espacio-4); }
  .ficha-ot__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--espacio-6); }
  .cobro { padding: var(--espacio-6); }
  .segmentado__opciones--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}