/* ==========================================================================
   TallerMotos — estilos de la interfaz (modelo base del prototipo).
   CSS plano, sin compilación, para hosting compartido.
   ========================================================================== */

:root {
    --fondo: #F4F3F0;
    --superficie: #FFFFFF;
    --superficie-suave: #FAF9F7;
    --tinta: #1C1B19;
    --texto-2: #5F5B54;
    --texto-3: #A8A49C;
    --borde: #E3E0DA;
    --borde-fuerte: #D6D2CB;
    --linea: #EFEDE9;
    --menu: #1F1E1C;
    --menu-texto: #D9D6D0;
    --menu-activo: #3A3835;
    --acento: #C2410C;
    --acento-hover: #9A3412;
    --acento-suave: #FBE9DD;
    --peligro: #B91C1C;
    --peligro-suave: #FDE8E8;
    --exito: #166534;
    --exito-suave: #DCF2E3;
    --aviso: #92400E;
    --aviso-suave: #FDF0D5;
    --info: #1E40AF;
    --info-suave: #E0E8FB;
    --radio: 12px;
    --radio-sm: 8px;
    --fuente: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fuente-titulos: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --fuente-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--acento); }
a:hover { color: var(--acento-hover); }

img { max-width: 100%; }

.mono { font-family: var(--fuente-mono); font-weight: 500; font-size: .92em; }
.texto-2 { color: var(--texto-2); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid rgba(194, 65, 12, .45); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Armazón: menú lateral + contenido
   -------------------------------------------------------------------------- */

.app { display: flex; flex-wrap: wrap; min-height: 100vh; }

.sidebar {
    flex: 1 1 232px;
    background: var(--menu);
    color: var(--menu-texto);
    display: flex;
}

.sidebar-interior {
    width: 100%;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contenido { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }

.main {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1280px;
    width: 100%;
}

/* Marca */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px; color: var(--menu-texto); }
.marca:hover { color: #FFFFFF; }
.marca-icono {
    width: 36px; height: 36px; border-radius: var(--radio-sm);
    background: var(--acento); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
}
.marca-icono img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca-nombre {
    font-family: var(--fuente-titulos); font-weight: 700; font-size: 22px;
    letter-spacing: .02em; color: #FFFFFF; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marca-sub { font-size: 12px; color: var(--texto-3); }

.sidebar-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.menu-boton {
    display: none;
    width: 44px; height: 44px; border-radius: var(--radio-sm);
    border: 1px solid var(--menu-activo); background: transparent; color: #FFFFFF;
    align-items: center; justify-content: center; cursor: pointer;
}

/* Menú */
.menu { display: flex; flex-direction: column; gap: 18px; }
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu-titulo {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-3); padding: 0 12px 6px;
}
.menu a {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: var(--radio-sm);
    text-decoration: none; font-size: 15px; font-weight: 500; color: var(--menu-texto);
}
.menu a:hover { background: #2A2926; color: #FFFFFF; }
.menu a[aria-current="page"] { background: var(--menu-activo); color: #FFFFFF; }
.menu svg { flex: none; }

/* Usuario al pie del menú */
.sidebar-usuario {
    margin-top: auto; border-top: 1px solid var(--menu-activo);
    padding: 16px 8px 0; display: flex; align-items: center; gap: 10px;
}
.avatar {
    width: 36px; height: 36px; border-radius: 999px; flex: none;
    background: var(--menu-activo); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.sidebar-usuario-datos { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; min-width: 0; flex: 1; }
.sidebar-usuario-datos a { color: #FFFFFF; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-usuario-datos a:hover { text-decoration: underline; color: #FFFFFF; }
.sidebar-usuario-datos span { color: var(--texto-3); font-size: 12px; }
.boton-salir {
    width: 40px; height: 40px; border-radius: var(--radio-sm); border: 0;
    background: transparent; color: var(--menu-texto); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.boton-salir:hover { background: var(--menu-activo); color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

.topbar {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    padding: 14px 24px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.topbar-titulos { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.topbar h1 {
    margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 28px;
    letter-spacing: .02em; text-transform: uppercase; line-height: 1.1;
}
.topbar-sub { font-size: 14px; color: var(--texto-2); }
.topbar-acciones { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.topbar-acciones .buscador { flex: 1 1 240px; max-width: 380px; }

.buscador {
    flex: 1 1 280px; max-width: 420px;
    display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 12px;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: var(--superficie-suave);
}
/* Lupa que busca (dentro del campo): ocupa poco y deja el campo grande. */
.buscador-boton { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -6px; padding: 0;
    border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--acento); cursor: pointer; }
.buscador-boton:hover { background: var(--acento-suave); color: var(--acento-hover); }
.buscador-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--tinta); outline: none; }

/* Selector de idioma ES | EN */
.idioma { display: flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); overflow: hidden; height: 44px; }
.idioma form { display: contents; }
.idioma button {
    border: 0; padding: 0 14px; font: inherit; font-weight: 600; font-size: 14px;
    background: var(--superficie); color: var(--texto-2); cursor: pointer;
}
.idioma button[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; font-weight: 700; }
.idioma button:hover:not([aria-pressed="true"]) { background: var(--superficie-suave); color: var(--tinta); }
.idioma-oscuro { border-color: #3A3835; }
.idioma-oscuro button { background: transparent; color: var(--menu-texto); }
.idioma-oscuro button[aria-pressed="true"] { background: #FFFFFF; color: var(--tinta); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 18px; border-radius: var(--radio-sm);
    font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
    border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); cursor: pointer;
}
.btn:hover { background: var(--superficie-suave); color: var(--tinta); }
.btn-primario { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }
.btn-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: #FFFFFF; }
.btn-peligro { color: var(--peligro); border-color: #F1C4C4; }
.btn-peligro:hover { background: var(--peligro-suave); color: var(--peligro); }
.btn-sm { height: 36px; padding: 0 12px; font-size: 14px; }
.btn-icono { width: 44px; padding: 0; }
.btn-bloque { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.acciones-fin { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Tarjetas y secciones
   -------------------------------------------------------------------------- */

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
}
.tarjeta-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.tarjeta-titulo {
    margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 18px;
    letter-spacing: .04em; text-transform: uppercase;
}
.tarjeta-sub { font-size: 13px; color: var(--texto-2); margin: 0; }

.fila { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.col-principal { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.col-lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kpi {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 20px; display: flex; flex-direction: column; gap: 6px;
}
.kpi-etiqueta { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.kpi-valor { font-family: var(--fuente-titulos); font-weight: 700; font-size: 44px; line-height: 1; }
.kpi-pista { font-size: 13px; color: var(--texto-2); }

/* Flujo por estados */
.flujo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.flujo-estado { border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.flujo-numero { font-family: var(--fuente-titulos); font-weight: 700; font-size: 32px; line-height: 1; }
.flujo-etiqueta { font-size: 13px; font-weight: 600; line-height: 1.2; }

/* Colores de estado de orden (texto / fondo) */
.estado-recibida   { color: #44403C; background: #ECE9E4; }
.estado-diagnostico{ color: #115E59; background: #DDF3F0; }
.estado-aprobacion { color: #92400E; background: #FDF0D5; }
.estado-repuestos  { color: #6B21A8; background: #F1E6FB; }
.estado-reparacion { color: #1E40AF; background: #E0E8FB; }
.estado-calidad    { color: #3F6212; background: #ECF5D9; }
.estado-lista      { color: #166534; background: #DCF2E3; }
.estado-entregada  { color: #5F5B54; background: #F0EEEA; }

/* Pastillas */
.pastilla {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
    color: #44403C; background: #ECE9E4;
}
.pastilla-exito { color: var(--exito); background: var(--exito-suave); }
.pastilla-peligro { color: var(--peligro); background: var(--peligro-suave); }
.pastilla-aviso { color: var(--aviso); background: var(--aviso-suave); }
.pastilla-info { color: var(--info); background: var(--info-suave); }
.pastilla-acento { color: var(--acento-hover); background: var(--acento-suave); }

/* Estado vacío */
.vacio {
    border: 1px dashed var(--borde-fuerte); border-radius: 10px;
    padding: 24px; text-align: center; color: var(--texto-2); font-size: 14px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.vacio svg { color: var(--texto-3); }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
    text-align: left; color: var(--texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 10px; border-bottom: 1px solid var(--borde); font-weight: 600; white-space: nowrap;
}
.tabla td { padding: 12px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; }
.celda-principal { font-weight: 600; }
.celda-sub { font-size: 12px; color: var(--texto-2); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 24px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }
.campo label, .campo .etiqueta { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"],
.campo input[type="tel"], .campo input[type="url"], .campo input[type="number"], .campo input[type="search"],
.campo input[type="file"], .campo input[type="date"], .campo input[type="datetime-local"], .campo input[type="time"],
.tabla input[type="time"], .tabla input[type="number"], .campo select, .campo textarea {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--tinta); font: inherit;
}
.campo input[type="file"] { padding: 9px 12px; }
.campo textarea { padding: 10px 12px; min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }
.campo input[readonly], .campo input:disabled, .campo select:disabled, .campo textarea:disabled { background: var(--superficie-suave); color: var(--texto-2); }
.campo-error input, .campo-error select, .campo-error textarea { border-color: var(--peligro); }
.error { color: var(--peligro); font-size: 13px; font-weight: 500; }
.ayuda { color: var(--texto-2); font-size: 13px; }

/* Ayuda bajo un ícono «?» (<x-ayuda>): globo flotante que JS acomoda dentro de la pantalla. */
.ayuda-icono { position: relative; display: inline-flex; vertical-align: middle; }
.ayuda-boton { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: -4px 0;
    border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: var(--texto-2);
    font-family: var(--fuente); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; cursor: pointer; }
.ayuda-boton::before { content: ''; position: absolute; inset: -11px; }  /* área táctil de 44 px */
.ayuda-boton:hover, .ayuda-icono.abierto .ayuda-boton { color: var(--acento); }
.ayuda-boton.ayuda-con-texto { width: auto; height: auto; min-height: 28px; margin: 0; gap: 6px; border: 0; border-radius: 6px; padding: 2px 4px 2px 0;
    font-weight: 500; font-size: 13px; color: var(--texto-2); }
.ayuda-circulo { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; font-size: 12px; }
.ayuda-boton.ayuda-con-texto::before { inset: -8px 0; }
.ayuda-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda-globo { display: none; position: fixed; z-index: 60; width: max-content; max-width: min(320px, calc(100vw - 32px));
    padding: 10px 12px; border-radius: 10px; background: var(--menu); color: #fff;
    font-family: var(--fuente); font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
    text-transform: none; letter-spacing: normal; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.ayuda-globo a { color: inherit; text-decoration: underline; }
.ayuda-icono.abierto .ayuda-globo { display: block; }

.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--acento); flex: none; }

/* --------------------------------------------------------------------------
   Avisos (flash)
   -------------------------------------------------------------------------- */

.aviso {
    border-radius: 10px; padding: 12px 16px; font-weight: 500;
    display: flex; gap: 10px; align-items: flex-start;
}
.aviso svg { flex: none; margin-top: 2px; }
.aviso-cerrar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -4px -8px -4px 0; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
.aviso-cerrar:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.aviso-cerrar svg { margin: 0; }
.aviso.saliendo { opacity: 0; transition: opacity .4s; }
.aviso-exito { background: var(--exito-suave); color: var(--exito); }
.aviso-error { background: var(--peligro-suave); color: var(--peligro); }
.aviso-info { background: var(--info-suave); color: var(--info); }
.aviso ul { margin: 4px 0 0; padding-left: 18px; }
.aviso-mantenimiento { background: var(--aviso-suave); color: var(--aviso); }

/* Pantalla del modo mantenimiento: oscura como el menú, con cinta de taller. */
body.mant { min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--menu); color: var(--menu-texto); font-family: var(--fuente); }
.mant-cinta { height: 16px; flex: none; background: repeating-linear-gradient(-45deg, #F2B705 0 20px, var(--menu) 20px 40px); }
.mant-arriba, .mant-centro, .mant-pie { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 24px; }
.mant-arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; }
.mant-marca { display: flex; align-items: center; gap: 10px; min-width: 0; color: #FFFFFF; font-family: var(--fuente-titulos); font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mant-marca img { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 8px; background: #FFFFFF; }
.mant-marca svg { flex: none; }
.mant-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-block: 48px; }
.mant-herramienta { color: #F97316; }
.mant h1 { margin: 0; color: #FFFFFF; font-family: var(--fuente-titulos); font-size: clamp(56px, 11vw, 112px); font-weight: 700; line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.mant-texto { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.45; }
.mant-datos { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 10px; }
.mant-datos small { display: block; font-family: var(--fuente-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.mant-datos strong { color: #FFFFFF; font-family: var(--fuente-titulos); font-size: 25px; letter-spacing: .02em; }
.mant-datos a { color: inherit; }
.mant-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 22px; font-size: 14px; }
.mant-pie a, .mant-pie button { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--menu-texto); font: inherit; text-decoration: underline; cursor: pointer; }

/* --------------------------------------------------------------------------
   Pestañas
   -------------------------------------------------------------------------- */

.pestanas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borde); }
.pestanas a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    text-decoration: none; font-weight: 600; color: var(--texto-2);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--acento); }

/* --------------------------------------------------------------------------
   Matriz de permisos
   -------------------------------------------------------------------------- */

.matriz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.matriz-caja { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow: auto; border: 1px solid var(--linea); border-radius: var(--radio-sm); }
.matriz thead th { position: sticky; top: 0; z-index: 3; background: var(--superficie); }
.matriz tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
.matriz thead th:first-child { left: 0; z-index: 4; }
.matriz .fila-modulo th { position: sticky; left: 0; top: 33px; z-index: 2; }  /* bajo los encabezados: se ve el módulo en curso */
.matriz th, .matriz td { padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.matriz thead th {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2);
    font-weight: 600; text-align: center; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.matriz thead th:first-child { text-align: left; }
.matriz td.celda-check { text-align: center; width: 92px; }
.matriz td.celda-check input { width: 20px; height: 20px; accent-color: var(--acento); cursor: pointer; }
.matriz .fila-modulo th {
    text-align: left; background: var(--superficie-suave);
    font-family: var(--fuente-titulos); font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
}
.matriz .fila-modulo th .casilla { min-height: 0; font-family: var(--fuente); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto-2); }
.matriz .nombre-seccion { padding-left: 28px; }
.matriz .nombre-acceso { font-weight: 600; }
.matriz .sin-accion { color: var(--borde-fuerte); }

/* --------------------------------------------------------------------------
   Maestro-detalle (Clientes)
   -------------------------------------------------------------------------- */

.maestro { flex: 1 1 300px; max-width: 380px; min-width: 0; padding: 16px; gap: 12px; }
.detalle { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.maestro .buscador { max-width: none; flex: none; }
.lista-items { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.lista-items a {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px;
    border-radius: 10px; text-decoration: none; color: var(--tinta);
}
.lista-items a:hover { background: var(--superficie-suave); color: var(--tinta); }
.lista-items a[aria-current="page"] { background: var(--acento-suave); }
.lista-items .avatar { background: var(--linea); color: var(--tinta); }
.lista-items a[aria-current="page"] .avatar { background: var(--acento); color: #FFFFFF; }
.lista-items-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.lista-items-texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-items-texto span { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contador {
    font-size: 12px; font-weight: 700; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
    background: var(--linea); color: var(--texto-2); display: inline-flex; align-items: center; justify-content: center;
}

.ficha-cabecera { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ficha-cabecera .avatar-grande {
    width: 56px; height: 56px; border-radius: 999px; background: var(--acento); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; flex: none;
}
.ficha-titulo { flex: 1 1 220px; min-width: 0; }
.ficha-titulo h2 { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.ficha-titulo span { font-size: 14px; color: var(--texto-2); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 12px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.datos dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }

.motos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.moto {
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
    display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.moto.coincide { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave); }
.moto-cabecera { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.moto h3 { margin: 0; font-size: 17px; font-weight: 700; }
.moto-sub { font-size: 13px; color: var(--texto-2); }
.placa {
    font-family: var(--fuente-mono); font-weight: 500; font-size: 14px; letter-spacing: .04em; white-space: nowrap;
    border: 2px solid var(--tinta); border-radius: 6px; padding: 2px 8px; background: #FFFFFF;
}
.moto .datos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 14px; }
.moto .datos dd { font-size: 14px; }
.moto-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* --------------------------------------------------------------------------
   Inventario
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta);
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.chip:hover { background: var(--superficie-suave); color: var(--tinta); }
.chip[aria-current="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }

.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros .campo { flex: 1 1 160px; }
.filtros .buscador { flex: 2 1 280px; max-width: none; }

.cant-pos { color: var(--exito); font-weight: 700; white-space: nowrap; }
.cant-neg { color: var(--peligro); font-weight: 700; white-space: nowrap; }
.stock-bajo { color: var(--peligro); font-weight: 700; }

.tipo-entrada { color: var(--exito); background: var(--exito-suave); }
.tipo-venta, .tipo-salida { color: var(--info); background: var(--info-suave); }
.tipo-ajuste { color: var(--aviso); background: var(--aviso-suave); }
.tipo-cancelacion, .tipo-devolucion { color: #6B21A8; background: #F1E6FB; }

.cifra-grande { font-family: var(--fuente-titulos); font-weight: 700; font-size: 40px; line-height: 1; }

/* Editor de líneas (entradas y ventas) */
.lineas { width: 100%; border-collapse: collapse; }
.lineas th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); padding: 6px 6px; font-weight: 600; }
.lineas td { padding: 6px; vertical-align: top; }
.lineas input { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); font: inherit; background: var(--superficie); }
.lineas input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(194, 65, 12, .18); }
.lineas .col-num { width: 130px; }
.lineas .col-importe { width: 130px; text-align: right; padding-top: 16px; font-weight: 600; white-space: nowrap; }
.lineas .col-quitar { width: 52px; }
.linea-pista { display: block; font-size: 12px; color: var(--texto-2); margin-top: 4px; min-height: 16px; }
.linea-error input { border-color: var(--peligro); }

.totales { margin-left: auto; min-width: 260px; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; font-size: 15px; }
.totales dt { color: var(--texto-2); }
.totales dd { margin: 0; text-align: right; font-weight: 600; }
.totales .total { font-family: var(--fuente-titulos); font-size: 28px; color: var(--tinta); }

.opciones-pago { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones-pago label {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); cursor: pointer; font-weight: 600;
}
.opciones-pago input { accent-color: var(--acento); width: 18px; height: 18px; }
.opciones-pago label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

/* Nota de venta imprimible */
.nota { max-width: 760px; }
.nota-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.nota-folio { font-family: var(--fuente-mono); font-size: 20px; font-weight: 500; }
.sello-cancelada {
    display: inline-block; border: 3px solid var(--peligro); color: var(--peligro); border-radius: 8px;
    padding: 4px 12px; font-family: var(--fuente-titulos); font-size: 22px; font-weight: 700; text-transform: uppercase;
    transform: rotate(-4deg);
}

/* --------------------------------------------------------------------------
   Órdenes de trabajo
   -------------------------------------------------------------------------- */

/* Pasos de la recepción */
.pasos-recepcion { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pasos-recepcion li {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--borde); font-weight: 600; font-size: 14px; color: var(--texto-2);
}
.pasos-recepcion .num { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--linea); font-size: 13px; }
.pasos-recepcion li.hecho .num { background: var(--exito); color: #FFFFFF; }
.pasos-recepcion li[aria-current="step"] { border-color: var(--acento); color: var(--tinta); }
.pasos-recepcion li[aria-current="step"] .num { background: var(--acento); color: #FFFFFF; }

/* Control segmentado (combustible) */
.segmentado { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); overflow: hidden; }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado span {
    display: flex; align-items: center; justify-content: center; min-width: 64px; height: 44px; padding: 0 12px;
    font-weight: 600; font-size: 14px; cursor: pointer; border-right: 1px solid var(--borde-fuerte); background: var(--superficie);
}
.segmentado label:last-child span { border-right: 0; }
.segmentado input:checked + span { background: var(--tinta); color: #FFFFFF; }
.segmentado input:focus-visible + span { outline: 3px solid rgba(194, 65, 12, .45); outline-offset: -3px; }

.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; }

/* Chips seleccionables (checkbox) */
.chips-check { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-check label { position: relative; }
.chips-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips-check span {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--borde-fuerte); background: var(--superficie); font-weight: 600; font-size: 14px; cursor: pointer;
}
.chips-check input:checked + span { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-hover); }
.chips-check input:focus-visible + span { outline: 3px solid rgba(194, 65, 12, .45); }

/* Espacios para fotos */
.fotos-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.foto-slot {
    position: relative; border: 2px dashed var(--borde-fuerte); border-radius: 10px; background: #E7E4DE;
    aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: var(--texto-2); font-size: 13px; font-weight: 600; text-align: center; overflow: hidden; cursor: pointer;
}
.foto-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.foto-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-slot.con-foto { border-style: solid; border-color: var(--exito); }
.foto-slot .foto-etiqueta { position: relative; z-index: 1; background: rgba(255, 255, 255, .9); padding: 2px 8px; border-radius: 6px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.galeria figure { margin: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.galeria img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #E7E4DE; }
.galeria figcaption { padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 6px; }
.miniaturas img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); }

/* Firma */
.firma { border: 2px dashed var(--borde-fuerte); border-radius: 10px; background: #FFFFFF; position: relative; touch-action: none; }
.firma canvas { display: block; width: 100%; height: 180px; cursor: crosshair; }
.firma-guia { position: absolute; left: 24px; right: 24px; bottom: 36px; border-bottom: 1px solid var(--borde-fuerte); pointer-events: none; }
.firma-texto { position: absolute; left: 24px; bottom: 12px; font-size: 12px; color: var(--texto-3); pointer-events: none; }
.firma-imagen { max-width: 320px; border: 1px solid var(--borde); border-radius: 8px; background: #FFFFFF; }

/* Barra de etapas de la orden */
.etapas { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.etapas li { flex: 1 1 110px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.etapas li::before { content: ""; height: 6px; border-radius: 999px; background: var(--linea); }
.etapas li.hecho { color: var(--texto-2); }
.etapas li.hecho::before { background: var(--exito); }
.etapas li[aria-current="step"] { color: var(--tinta); }
.etapas li[aria-current="step"]::before { background: var(--acento); }

/* Tablero */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.columna { background: #EDEBE7; border-radius: var(--radio); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.columna-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarjeta-orden {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 12px;
    display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tinta);
}
.tarjeta-orden:hover { border-color: var(--acento); color: var(--tinta); }
.tarjeta-orden-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.mini-avatar {
    width: 28px; height: 28px; border-radius: 999px; background: var(--tinta); color: #FFFFFF; font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.mini-avatar.vacio-av { background: transparent; color: var(--texto-3); border: 1px dashed var(--borde-fuerte); }
.atrasada { color: var(--peligro); font-weight: 700; }

/* Inspección */
.inspeccion-fila { display: grid; grid-template-columns: minmax(160px, 1.2fr) auto minmax(180px, 2fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.resultados { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.resultados label { position: relative; }
.resultados input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.resultados span { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borde-fuerte); font-size: 13px; font-weight: 600; cursor: pointer; background: var(--superficie); }
.resultados input:focus-visible + span { outline: 3px solid rgba(194, 65, 12, .45); }
.resultados input[value="ok"]:checked + span { background: var(--exito-suave); border-color: var(--exito); color: var(--exito); }
.resultados input[value="atencion"]:checked + span { background: var(--aviso-suave); border-color: var(--aviso); color: var(--aviso); }
.resultados input[value="urgente"]:checked + span { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro); }
.resultados input[value="na"]:checked + span { background: var(--linea); border-color: var(--texto-3); }
.res-ok { color: var(--exito); background: var(--exito-suave); }
.res-atencion { color: var(--aviso); background: var(--aviso-suave); }
.res-urgente { color: var(--peligro); background: var(--peligro-suave); }
.res-na { color: var(--texto-2); background: var(--linea); }

.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historial li { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }

@media (max-width: 860px) {
    .inspeccion-fila { grid-template-columns: 1fr; gap: 6px; }
    .historial li { grid-template-columns: 1fr; gap: 2px; }
}

/* Documento imprimible (orden) */
.documento { background: #FFFFFF; max-width: 860px; margin: 24px auto; padding: 32px; border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; gap: 18px; }
.documento h1 { font-family: var(--fuente-titulos); text-transform: uppercase; margin: 0; font-size: 26px; }
.documento .datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.documento-acciones { max-width: 860px; margin: 16px auto 0; display: flex; gap: 8px; justify-content: flex-end; padding: 0 16px; }
@media print {
    .documento { border: 0; margin: 0; padding: 0; max-width: none; }
    .documento-acciones { display: none; }
}

/* --------------------------------------------------------------------------
   Portal del cliente (móvil primero)
   -------------------------------------------------------------------------- */

.portal { background: var(--fondo); }
.portal-contenedor { max-width: 560px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.portal-cabecera { background: var(--menu); padding: 14px 0; }
.portal-cuerpo { padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 16px; }
.portal-pie { padding-top: 8px; padding-bottom: 32px; font-size: 13px; color: var(--texto-2); text-align: center; }
.portal-titulo { margin: 4px 0 8px; font-family: var(--fuente-titulos); font-weight: 700; font-size: 30px; text-transform: uppercase; line-height: 1.05; }
.portal .etapas li { flex: 1 1 0; }
.portal-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.portal-linea { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.portal-linea.rechazada { opacity: .55; }
.portal-importe { font-weight: 700; white-space: nowrap; padding-top: 2px; }
.idioma-enlace { display: flex; align-items: center; padding: 0 12px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--menu-texto); }
.idioma-enlace[aria-current="true"] { background: #FFFFFF; color: var(--tinta); }

/* --------------------------------------------------------------------------
   Paginación
   -------------------------------------------------------------------------- */

.paginacion { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.paginacion-enlaces { display: flex; gap: 6px; }

/* --------------------------------------------------------------------------
   Pantallas de invitado (login e instalador)
   -------------------------------------------------------------------------- */

.invitado { display: flex; flex-wrap: wrap; min-height: 100vh; }
.invitado-marca {
    flex: 1 1 380px; background: var(--menu); color: var(--menu-texto);
    padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.invitado-titular {
    font-family: var(--fuente-titulos); font-weight: 700; text-transform: uppercase;
    font-size: clamp(36px, 5vw, 56px); line-height: 1; color: #FFFFFF; margin: 0;
}
.invitado-titular span { color: #F0A27A; }
.invitado-texto { max-width: 420px; color: var(--menu-texto); font-size: 16px; }
.invitado-form {
    flex: 1 1 420px; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.invitado-caja { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
.invitado-caja-ancha { max-width: 640px; }
.invitado-caja h2 { margin: 0; font-family: var(--fuente-titulos); font-size: 32px; text-transform: uppercase; letter-spacing: .02em; }

/* Pasos del instalador */
.pasos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pasos li {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--texto-2);
    padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde);
}
.pasos .num {
    width: 24px; height: 24px; border-radius: 999px; background: var(--linea); color: var(--texto-2);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.pasos li[aria-current="step"] { border-color: var(--acento); color: var(--tinta); }
.pasos li[aria-current="step"] .num { background: var(--acento); color: #FFFFFF; }
.pasos li.hecho .num { background: var(--exito); color: #FFFFFF; }

.lista-requisitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-requisitos li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }

/* Página de error */
.pagina-error { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pagina-error .tarjeta { max-width: 520px; text-align: center; align-items: center; }
.codigo-error { font-family: var(--fuente-titulos); font-weight: 700; font-size: 72px; line-height: 1; color: var(--acento); }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .sidebar-interior { gap: 0; padding: 12px 14px; }
    .menu-boton { display: inline-flex; }
    .sidebar .menu, .sidebar .sidebar-usuario { display: none; }
    .sidebar.abierto .sidebar-interior { gap: 18px; }
    .sidebar.abierto .menu, .sidebar.abierto .sidebar-usuario { display: flex; }
    .topbar { padding: 14px 16px; }
    .main { padding: 16px; }
    .invitado-marca { padding: 28px 24px; flex-basis: 100%; }
    .con-seleccion .detalle { order: -1; } /* en el teléfono, la ficha abierta va primero */
    .maestro { max-width: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .btn, .menu a, .idioma button { transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
}

@media print {
    .sidebar, .topbar, .no-imprimir, .aviso { display: none !important; }
    body { background: #FFFFFF; font-size: 12pt; }
    .main { padding: 0; max-width: none; }
    .tarjeta { border: 0; padding: 0; }
    a { color: inherit; text-decoration: none; }
}

/* Enlaces dentro de tablas: sin subrayado hasta pasar el cursor */
.tabla a.celda-principal { text-decoration: none; }
.tabla a.celda-principal:hover { text-decoration: underline; }

/* Folios, placas y claves en tablas: siempre en una línea */
.tabla .mono { white-space: nowrap; }
.segmentado { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Agenda de citas (calendario por semana o por día)
   -------------------------------------------------------------------------- */
.agenda-caja { overflow-x: auto; }
.agenda { --hora: 64px; display: grid; grid-template-columns: 56px repeat(var(--dias, 7), minmax(132px, 1fr)); min-width: calc(56px + var(--dias, 7) * 132px); }
.agenda-cabeza { position: sticky; top: 0; z-index: 2; background: var(--superficie); border-bottom: 1px solid var(--borde); border-left: 1px solid var(--borde); padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; min-height: 52px; justify-content: center; text-decoration: none; color: var(--tinta); }
.agenda-cabeza:hover { background: var(--superficie-suave); color: var(--tinta); }
.agenda-cabeza[aria-current] { box-shadow: inset 0 -3px 0 var(--acento); }
.agenda-dia-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 1; }
.agenda-cupos { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.agenda-cupos.lleno { color: var(--peligro); }
.agenda-horas { position: relative; }
.agenda-hora { height: var(--hora); box-sizing: border-box; font-size: 12px; font-weight: 600; color: var(--texto-2); text-align: right; padding: 2px 8px 0 0; border-top: 1px solid var(--borde); }
.agenda-columna { position: relative; border-left: 1px solid var(--borde); background: repeating-linear-gradient(to bottom, var(--borde) 0, var(--borde) 1px, transparent 1px, transparent var(--hora)); }
.agenda-cerrado { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--superficie-suave) 0 6px, #EAE7E1 6px 12px); opacity: .9; }
.agenda-nueva { position: absolute; inset: 0; }
.agenda-cita { position: absolute; z-index: 1; box-sizing: border-box; padding: 4px 6px; border-radius: 8px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; border: 1px solid; min-height: 22px; }
.agenda-cita:hover { filter: brightness(.97); text-decoration: none; }
.agenda-cita span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta); }
.agenda-cita .agenda-cita-hora { font-weight: 700; color: inherit; }
.cita-solicitada  { color: #92400E; background: #FDF0D5; border-color: #F2D9A6; border-style: dashed; }
.cita-confirmada  { color: #1E40AF; background: #E0E8FB; border-color: #B9C9F2; }
.cita-atendida    { color: #166534; background: #DCF2E3; border-color: #B7E0C3; }
.cita-no_asistio  { color: #5F5B54; background: #F0EEEA; border-color: #DDD9D2; text-decoration: line-through; }
.cita-cancelada   { color: #B91C1C; background: #FDE8E8; border-color: #F1C4C4; }
.agenda-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-2); }
.agenda-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.agenda-leyenda i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid; display: inline-block; }
.cita-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.cita-fila:first-of-type { border-top: 0; }
.cita-hora { font-family: var(--fuente-titulos); font-weight: 700; font-size: 20px; min-width: 52px; }
.horas-web { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.horas-web label { position: relative; }
.horas-web input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.horas-web span { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); font-weight: 600; cursor: pointer; background: var(--superficie); }
.horas-web input:checked + span { background: var(--tinta); color: #FFFFFF; border-color: var(--tinta); }
.horas-web input:focus-visible + span { outline: 3px solid rgba(194, 65, 12, .45); outline-offset: 2px; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; min-width: 0; }
/* Teléfonos del taller (Configuración › Datos del taller) */
.telefonos { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 12px 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.telefonos legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.telefono-fila { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr); gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--linea); }
.telefono-opciones { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; grid-column: 1 / -1; }
.telefono-usos { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.telefono-usos legend { font-size: 13px; font-weight: 600; color: var(--texto-2); padding: 0; margin-bottom: 4px; }
@media (max-width: 760px) { .telefono-fila { grid-template-columns: 1fr; } }
.fila-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 0; border-top: 1px solid var(--linea); }
.fila-lista .fila-lista-texto { grid-column: span 2; }
@media (max-width: 760px) { .fila-lista { grid-template-columns: 1fr; } .fila-lista .fila-lista-texto { grid-column: auto; } }

/* Tabla que en celular se apila: cada fila es una tarjeta y cada celda muestra su etiqueta (data-etiqueta). */
.tabla-apilable { min-width: 640px; }
@media (max-width: 760px) {
    .tabla-apilable { min-width: 0; }
    .tabla-apilable thead { display: none; }
    .tabla-apilable tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linea); }
    .tabla-apilable td { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 4px 0; border: 0; text-align: right; }
    .tabla-apilable td::before { content: attr(data-etiqueta); color: var(--texto-2); font-size: 12px; text-align: left; flex-shrink: 0; }
    .tabla-apilable td:first-child { display: block; text-align: left; }
    .tabla-apilable td:first-child::before, .tabla-apilable td.celda-acciones::before { content: none; }
    .tabla-apilable td.celda-acciones { display: block; padding-top: 8px; }
    .tabla-apilable td.celda-acciones .acciones { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Reportes: gráficas de barras en CSS (sin librerías)
   -------------------------------------------------------------------------- */
.grafica-caja { overflow-x: auto; }
.grafica { display: flex; align-items: flex-end; gap: 3px; height: 220px; padding: 8px 0 0; border-bottom: 1px solid var(--borde); }
.grafica-barra { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 4px; }
.grafica-barra span { display: block; background: var(--acento); border-radius: 4px 4px 0 0; min-height: 1px; }
.grafica-barra span.secundaria { background: var(--borde-fuerte); }
.grafica-barra span.negativa { background: var(--peligro); }
.grafica-pareja { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.grafica-pareja span { flex: 1; }
.grafica-etiquetas { display: flex; gap: 3px; font-size: 11px; color: var(--texto-2); }
.grafica-etiquetas span { flex: 1 1 0; min-width: 4px; text-align: center; white-space: nowrap; overflow: visible; }
.barra-h { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 6px 0; font-size: 14px; }
.barra-h-pista { height: 12px; background: var(--linea); border-radius: 6px; overflow: hidden; }
.barra-h-pista span { display: block; height: 100%; background: var(--acento); border-radius: 6px; }
.leyenda-mini { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texto-2); }
.leyenda-mini i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media print { .filtros-reporte, .pestanas { display: none !important; } .kpis { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Punto de venta (variante A "carrito" y variante B "cobro rápido")
   -------------------------------------------------------------------------- */

.pos { display: grid; gap: 16px; align-items: start; }
.pos-carrito { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.pos-rapido { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px); }

.pos-izquierda, .pos-columna, .pos-ticket {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.pos-ticket { position: sticky; top: 16px; }
.pos-ticket-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pos-ticket-cabecera h2 { margin: 0; font-family: var(--fuente-titulos); font-size: 22px; line-height: 1.1; }
.pos-columna h2.tarjeta-titulo { margin: 0; }
.pos-columna > .buscador { flex: none; max-width: none; }

.pos-buscador {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border: 2px solid var(--acento); border-radius: var(--radio); background: var(--superficie);
}
.pos-buscador svg { color: var(--acento); flex: none; }
.pos-buscador input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 18px; color: var(--tinta); }
.pos-buscador kbd {
    font-family: var(--fuente-mono); font-size: 12px; padding: 2px 6px; border-radius: 6px;
    border: 1px solid var(--borde-fuerte); color: var(--texto-2); background: var(--superficie-suave);
}

.pos-pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--borde); }
.pos-pestanas button {
    border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--texto-2);
    padding: 8px 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.pos-pestanas button span { font-size: 12px; background: var(--linea); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.pos-pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }

.pos-panel { display: flex; flex-direction: column; gap: 12px; }
.pos-categorias { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-categorias button {
    font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-2);
}
.pos-categorias button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }

.pos-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pos-producto {
    display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--tinta);
    padding: 12px; min-height: 104px; border: 1px solid var(--borde); border-radius: var(--radio-sm);
    background: var(--superficie-suave); cursor: pointer;
}
.pos-producto:hover:not(:disabled) { border-color: var(--acento); background: var(--acento-suave); }
.pos-producto:disabled { opacity: .5; cursor: not-allowed; }
.pos-producto .mono { color: var(--texto-2); font-size: 12px; }
.pos-producto strong { font-weight: 600; line-height: 1.25; }
.pos-producto-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pos-producto-pie b { font-size: 16px; }
.pos-producto-pie small { font-size: 12px; }
.pos-stock-ok { color: var(--exito); }
.pos-stock-poco { color: var(--aviso); }
.pos-stock-agotado { color: var(--peligro); }

.pos-ordenes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.pos-ordenes button {
    width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "folio estado" "cliente cliente" "saldo saldo";
    gap: 4px 8px; text-align: left; font: inherit; color: var(--tinta); cursor: pointer;
    padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie);
}
.pos-ordenes button:hover { border-color: var(--borde-fuerte); background: var(--superficie-suave); }
.pos-ordenes button[aria-current="true"] { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.pos-ordenes .mono { grid-area: folio; }
.pos-ordenes .pastilla { grid-area: estado; justify-self: end; }
.pos-orden-cliente { grid-area: cliente; display: flex; flex-direction: column; }
.pos-orden-cliente small, .pos-orden-saldo small { color: var(--texto-2); font-size: 12px; }
.pos-orden-saldo { grid-area: saldo; display: flex; justify-content: space-between; align-items: baseline; }
.pos-orden-saldo strong { font-size: 16px; }
.pos-nueva-venta { justify-content: center; border-style: dashed; }

.pos-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 38vh; overflow: auto; }
.pos-linea { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.pos-linea-cant { font-family: var(--fuente-mono); color: var(--texto-2); }
.pos-linea-desc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pos-linea-desc small { color: var(--texto-2); font-size: 12px; }
.pos-linea > strong { white-space: nowrap; }
.pos-cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); overflow: hidden; }
.pos-cantidad button { width: 32px; height: 32px; border: 0; background: var(--superficie-suave); font: inherit; font-size: 18px; cursor: pointer; color: var(--tinta); }
.pos-cantidad button:hover { background: var(--acento-suave); }
.pos-cantidad span { min-width: 30px; text-align: center; font-weight: 600; }
.pos-vacio { color: var(--texto-2); text-align: center; padding: 24px 8px; list-style: none; margin: 0; }

.pos-totales { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--borde); }
.pos-totales dt { color: var(--texto-2); }
.pos-totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pos-totales .pos-total { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.pos-totales [data-pos-falta-fila] { color: var(--peligro); font-weight: 600; }
.pos-totales .pos-falta-cero { color: var(--texto-3); font-weight: 400; }
.pos-totales .pos-cambio { color: var(--exito); font-weight: 700; font-size: 20px; }

.pos-cobro { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }
.pos-metodo { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(90px, 130px) auto; gap: 6px; align-items: center; }
.pos-metodo label { font-weight: 600; font-size: 14px; }
.pos-metodo label small { font-weight: 400; color: var(--texto-2); }
.pos-metodo input[type="text"] { grid-column: 1 / -1; }
.pos-metodo input, .pos-ticket .campo input, .pos-ticket .form input, .pos-teclado .pos-ref {
    font: inherit; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--tinta); min-width: 0; width: 100%;
}
.pos-metodo input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
/* Campo de producto de «Venta de mostrador»: buscador de una línea (no crece en la columna) y su input sin el borde del formulario. */
.pos-ticket .form .buscador { flex: none; max-width: none; }
.pos-ticket .form .buscador input { border: 0; padding: 0; background: transparent; }

.pos-boton-cobrar { justify-content: center; font-size: 18px; padding: 14px; }
.pos-boton-cobrar:disabled { opacity: .45; cursor: not-allowed; }
.pos-boton-entregar { justify-content: center; }

.pos-pagos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pos-pagos:empty { display: none; }
.pos-pagos li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--superficie-suave); border-radius: var(--radio-sm); }
.pos-pagos li span { flex: 1; }
.pos-pagos li button { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--texto-2); }

/* Teclado de la variante B */
.pos-teclado {
    background: var(--menu); color: #FFFFFF; border-radius: var(--radio); padding: 16px;
    display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px;
}
.pos-teclado h2 { margin: 0; font-family: var(--fuente-titulos); font-size: 22px; }
.pos-teclado .ayuda { color: var(--menu-texto); }
.pos-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.pos-metodos button, .pos-billetes button, .pos-teclas button, .pos-agregar {
    font: inherit; color: #FFFFFF; background: var(--menu-activo); border: 1px solid transparent;
    border-radius: var(--radio-sm); cursor: pointer; padding: 10px 6px;
}
.pos-metodos button[aria-pressed="true"] { background: var(--acento); }
.pos-pantalla { display: flex; flex-direction: column; align-items: flex-end; padding: 10px 14px; border-radius: var(--radio-sm); background: #000000; }
.pos-pantalla small { color: var(--menu-texto); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pos-pantalla strong { font-family: var(--fuente-mono); font-size: 32px; line-height: 1.2; min-height: 1.2em; }
.pos-billetes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pos-billetes button { font-size: 14px; background: transparent; border-color: var(--menu-activo); }
.pos-teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-teclas button { font-size: 24px; font-weight: 600; padding: 12px 0; }
.pos-metodos button:hover, .pos-billetes button:hover, .pos-teclas button:hover, .pos-agregar:hover { border-color: var(--menu-texto); }
.pos-agregar { font-weight: 600; background: transparent; border-color: var(--menu-texto); }
.pos-teclado .pos-ref { background: var(--menu-activo); color: #FFFFFF; border-color: transparent; }
.pos-teclado .pos-ref::placeholder { color: var(--menu-texto); }

/* Paneles de cobro siempre a la vista: caben en la pantalla y, si no, se desplazan
   por dentro con el botón Cobrar fijo abajo. */
.pos-ticket, .pos-teclado { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.pos-ticket .pos-boton-cobrar, .pos-teclado .pos-boton-cobrar { position: sticky; bottom: 0; z-index: 1; flex: none; }
.pos-ticket .pos-boton-cobrar { box-shadow: 0 -12px 12px -4px var(--superficie); }
.pos-teclado .pos-boton-cobrar { box-shadow: 0 -12px 12px -4px var(--menu); }
.pos-teclado > * { flex: none; }
@media (max-height: 860px) {
    .pos-teclado { gap: 8px; padding: 12px; }
    .pos-teclado h2 { font-size: 18px; }
    .pos-pantalla { padding: 6px 12px; }
    .pos-pantalla strong { font-size: 26px; }
    .pos-teclas button { padding: 8px 0; font-size: 20px; }
    .pos-metodos button, .pos-billetes button, .pos-agregar { padding: 8px 6px; }
    .pos-boton-cobrar { padding: 10px; font-size: 16px; }
    .pos-lineas { max-height: 28vh; }
}

@media (max-width: 1180px) {
    .pos-rapido { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
    .pos-rapido > .pos-columna:first-child { grid-column: 1 / -1; }
    .pos-rapido .pos-ordenes { flex-direction: row; overflow-x: auto; max-height: none; }
    .pos-rapido .pos-ordenes li { flex: 0 0 240px; }
}
@media (max-width: 860px) {
    .pos-carrito, .pos-rapido { grid-template-columns: 1fr; }
    .pos-ticket, .pos-teclado { position: static; max-height: none; overflow: visible; }
    .pos-productos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Barra de avance (restauración de respaldos) */
.barra-progreso { height: 12px; border-radius: 999px; background: var(--linea); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; background: var(--acento); border-radius: inherit; transition: width .3s ease; }

/* Flujo de la orden: acciones con formulario desplegable, pestañas de etapas futuras y diálogos */
.menu-accion { position: relative; }
.menu-accion > summary { list-style: none; cursor: pointer; }
.menu-accion > summary::-webkit-details-marker { display: none; }
.menu-accion-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(340px, 90vw); padding: 14px; gap: 10px;
    background: var(--superficie, #fff); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.pestanas .pestana-bloqueada { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--texto-2); opacity: .45; cursor: not-allowed; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.dialogo { border: 0; border-radius: 16px; padding: 22px; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.dialogo:not([open]) { display: none; }
.dialogo::backdrop { background: rgba(20, 20, 20, .45); }
.dialogo [tabindex="-1"]:focus { outline: none; }   /* el título recibe el foco al abrir (sin teclado en el celular) */
@media (max-width: 760px) { .menu-accion-panel { position: static; width: auto; margin-top: 8px; } }

/* Buscador (reemplaza la lista del navegador; ver app.js) */
.buscador-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; max-height: 260px; overflow-y: auto;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.buscador-opcion { padding: 10px 12px; cursor: pointer; font-size: 14px; line-height: 1.3; }
.buscador-opcion:hover, .buscador-opcion.activo { background: var(--acento-suave); }
.buscador-detalle { display: block; font-size: 12px; color: var(--texto-2); }
.buscador-vacio { padding: 10px 12px; font-size: 13px; color: var(--texto-2); }

/* Reparación: trabajos aprobados para marcar como hechos */
.lista-trabajos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-trabajos li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.lista-trabajos li:first-child { border-top: 0; }
.lista-trabajos-marca { flex: 0 0 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.lista-trabajos li.hecho .lista-trabajos-marca { background: var(--exito); border-color: var(--exito); }
.lista-trabajos li.hecho .celda-principal { text-decoration: line-through; color: var(--texto-2); }
.lista-trabajos-texto { flex: 1; min-width: 0; }

.foto-obligatoria { position: absolute; top: 4px; right: 10px; z-index: 1; color: var(--peligro, #B42318); font-size: 22px; font-weight: 700; line-height: 1; }
.foto-slot.campo-error { border-color: var(--peligro, #B42318); background: var(--peligro-suave, #FEF3F2); }

/* Pendientes: campana de la barra superior y «Te toca a ti» del panel */
.pendiente { text-decoration: none; }
.pendiente-aviso { background: var(--aviso-suave); color: var(--aviso); }
.pendiente-exito { background: var(--exito-suave); color: var(--exito); }
.pendiente-peligro { background: var(--peligro-suave); color: var(--peligro); }
.pendiente-info { background: var(--superficie-suave); color: var(--tinta); }
.pendiente-info svg { color: var(--texto-2); }
.pendiente-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pendiente-detalle { color: var(--texto-2); font-weight: 400; font-size: 13px; overflow-wrap: anywhere; }
.tarjeta-te-toca { border: 2px solid var(--aviso); }
.tarjeta-te-toca .tarjeta-titulo { display: flex; align-items: center; gap: 8px; color: var(--aviso); }
.pendientes-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.pendientes-rejilla .aviso { margin: 0; }
.campana { position: relative; }
.campana-boton {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: 10px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); cursor: pointer;
}
.campana-boton[aria-expanded="true"] { background: var(--tinta); color: #FFFFFF; }
.campana-numero {
    position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--peligro, #B42318); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
    box-shadow: 0 0 0 2px var(--superficie);
}
.campana-numero[hidden] { display: none; }
.campana-lista {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px);
    overflow-y: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--superficie);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 8px;
}
.campana-lista[hidden] { display: none; }
.campana-lista .aviso { margin: 0; }
.campana-grupo { margin: 4px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.campana-ver-todo { align-self: flex-end; font-size: 14px; font-weight: 600; padding: 4px 2px; }
@media (max-width: 760px) {
    .campana { position: static; }
    .campana-lista { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; }
}

/* Cobros solicitados a caja */
.cobros-solicitados { display: flex; flex-direction: column; gap: 8px; }
.solicitud-cobro { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.solicitud-pendiente { border-color: var(--aviso); background: var(--aviso-suave); }
.solicitud-cancelado { opacity: .75; }
.solicitud-cabecera { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.solicitud-cabecera strong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.solicitud-cobrar { gap: 10px; }
.btn-enlace { background: none; border: 0; padding: 4px 0; color: var(--texto-2); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.btn-enlace:hover { color: var(--peligro); }

/* Punto de venta: cantidad escrita a mano (admite decimales, p. ej. litros) */
.pos-cantidad input { width: 56px; height: 32px; text-align: center; border: 1px solid var(--borde-fuerte); border-radius: 6px; font: inherit; font-weight: 600; padding: 0 4px; -moz-appearance: textfield; }
.pos-cantidad input::-webkit-outer-spin-button, .pos-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Recepción: servicios del catálogo para el servicio directo */
.servicios-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }

/* Orden: servicios anteriores de la moto */
.servicios-anteriores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.servicios-anteriores > li { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--linea); }
.servicios-anteriores > li:first-child { border-top: 0; padding-top: 0; }
.servicio-anterior-cabecera { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Inspección: foto desde cada punto (desactivada sin resultado o con N/A) */
.foto-punto { margin-top: 6px; gap: 6px; cursor: pointer; }
.foto-punto.deshabilitado { opacity: .45; cursor: not-allowed; pointer-events: none; }