/* ERP SERSA AUTOCENTRO — estilo claro a la manera de Apple: tipografía del sistema, tarjetas,
   bordes suaves y el rojo del logo como acento. */
:root {
  --fondo: #f5f5f7;
  --superficie: #ffffff;
  --superficie-2: #fafafc;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-3: #8e8e93;
  --borde: #e3e3e8;
  --borde-fuerte: #d2d2d7;
  --acento: #d92b2f;
  --acento-hover: #bf2226;
  --acento-suave: #fdecec;
  --azul: #0a6cdf;
  --azul-suave: #e8f1fd;
  --verde: #1f8f4e;
  --verde-suave: #e6f5ec;
  --naranja: #c46a00;
  --naranja-suave: #fdf1e1;
  --rojo: #c9302c;
  --rojo-suave: #fdecea;
  --amarillo-suave: #fff7d6;
  --violeta: #7b3fc4;
  --violeta-suave: #f1e9fb;
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --lateral: 232px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 22px; font-weight: 650; }
h3 { font-size: 17px; font-weight: 600; }
.icono { width: 20px; height: 20px; flex: none; }
.solo-movil { display: none !important; }

/* ---------- Estructura ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); display: flex; flex-direction: column;
  background: rgba(250,250,252,.92); backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--borde); padding: 18px 12px; z-index: 30; overflow-y: auto;
}
.marca { display: block; padding: 4px 10px 14px; }
.marca img { width: 100%; max-width: 168px; height: auto; display: block; }
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radio-chico);
  color: var(--texto); font-weight: 500; min-height: 44px;
}
.menu a:hover { background: rgba(0,0,0,.045); text-decoration: none; }
.menu a.activo { background: var(--acento-suave); color: var(--acento); }
.menu a .icono { color: var(--texto-2); }
.menu a.activo .icono { color: var(--acento); }
.salir { padding-top: 10px; border-top: 1px solid var(--borde); margin-top: 10px; }
.contenido { margin-left: var(--lateral); min-height: 100vh; }
.barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px 28px; background: rgba(245,245,247,.85); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
}
.barra h1 { font-size: 24px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { padding: 8px 28px 48px; max-width: 1240px; }
.velo { display: none; }

.busqueda-global { position: relative; width: min(320px, 40vw); }
.busqueda-global .icono { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--texto-3); width: 17px; height: 17px; }
.busqueda-global input { padding-left: 34px; border-radius: 999px; background: var(--superficie); }

/* ---------- Tarjetas y bloques ---------- */
.tarjeta {
  background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px 22px; margin-bottom: 18px; border: 1px solid rgba(0,0,0,.03);
}
.tarjeta > h2, .tarjeta > h3 { margin-bottom: 12px; }
.vacio { text-align: center; color: var(--texto-2); padding: 36px 22px; }
.saludo { margin: 6px 0 20px; }
.fecha-hoy { color: var(--texto-2); margin: 0 0 2px; }
.fecha-hoy::first-letter { text-transform: uppercase; }
.grilla-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.bloque {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radio);
  background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); min-height: 108px;
  border: 1px solid rgba(0,0,0,.03); transition: transform .12s ease, box-shadow .12s ease;
}
.bloque:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07); }
.bloque-titulo { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.bloque-valor { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.bloque-detalle { color: var(--texto-2); font-size: 13px; }
.tono-aviso .bloque-valor { color: var(--naranja); }
.tono-peligro .bloque-valor { color: var(--rojo); }
.tono-bien .bloque-valor { color: var(--verde); }

/* ---------- Formularios ---------- */
.formulario { max-width: 860px; }
.formulario.angosto { max-width: 460px; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.campo { margin-bottom: 14px; min-width: 0; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: 5px; }
.req { color: var(--acento); }
input, select, textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); padding: 10px 12px; min-height: 44px;
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; min-height: 80px; }
input[type="file"] { padding: 8px; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--acento); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(10,108,223,.18); background: #fff; }
input[readonly] { background: var(--fondo); color: var(--texto-2); }
.con-error input, .con-error select, .con-error textarea { border-color: var(--rojo); }
.error { color: var(--rojo); font-size: 13px; margin: 5px 0 0; }
.ayuda { color: var(--texto-3); font-size: 13px; margin: 5px 0 0; }
.error-general { background: var(--rojo-suave); color: var(--rojo); padding: 10px 12px; border-radius: var(--radio-chico); }
.casilla { display: flex; align-items: center; gap: 9px; min-height: 36px; font-weight: 500; cursor: pointer; }
.consulta-padron select { width: auto; }
.en-erp { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Copia de consulta en internet: sin formularios ni botones de cambio (el servidor igual los rechaza) */
body.solo-consulta form[method="post"]:not(.salir),
body.solo-consulta a[href*="/nuevo"], body.solo-consulta a[href*="/nueva"],
body.solo-consulta a[href*="/editar"], body.solo-consulta a[href$="/salida"], body.solo-consulta a[href="/caja/gasto"], body.solo-consulta a[href="/caja/ingreso"], body.solo-consulta a[href="/caja/pase"], body.solo-consulta a[href="/caja/cierre"],
body.solo-consulta a[href^="/ajustes"], body.solo-consulta a[href^="/kiosco"], body.solo-consulta a[href^="/rrhh/asistencia/semana"], body.solo-consulta a[href^="/importar"],
body.solo-consulta details.anular, body.solo-consulta details.cancelar-orden { display: none !important; }
.aviso-copia { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: var(--azul-suave); color: var(--azul); }
.aviso-copia.nivel-aviso { background: var(--amarillo-suave); color: #8a6100; }
.aviso-copia.nivel-viejo { background: var(--rojo-suave); color: var(--rojo); }
.fila-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fila-inline input { width: auto; max-width: 180px; }
.quien { font-size: 13px; color: var(--texto-2); margin: 8px 12px; }
.lista-casillas { display: grid; gap: 2px; margin-bottom: 14px; }
.lista-casillas .casilla { min-height: 44px; }
.grupo-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.acciones.derecha { justify-content: flex-end; }

/* ---------- Botones ---------- */
.boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600;
  background: var(--acento); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; min-height: 44px;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s;
}
.boton:hover { background: var(--acento-hover); text-decoration: none; }
.boton.secundario { background: rgba(0,0,0,.06); color: var(--texto); }
.boton.secundario:hover { background: rgba(0,0,0,.1); }
.boton.azul { background: var(--azul); }
.boton.verde { background: var(--verde); }
.boton.peligro { background: transparent; color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.boton.peligro:hover { background: var(--rojo-suave); }
.boton.whatsapp { background: #1fa855; }
.boton.chico { min-height: 34px; padding: 6px 14px; font-size: 14px; }
.boton.ancho { width: 100%; }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.boton-texto { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; font: inherit; color: var(--texto-2); padding: 9px 12px; cursor: pointer; border-radius: var(--radio-chico); width: 100%; min-height: 44px; }
.boton-texto:hover { background: rgba(0,0,0,.045); }
.boton-icono { background: none; border: 0; padding: 8px; border-radius: 10px; cursor: pointer; color: var(--texto); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Avisos ---------- */
.aviso-ok, .aviso-info, .aviso-alerta {
  padding: 11px 14px; border-radius: var(--radio-chico); margin: 0 0 16px; font-weight: 500;
}
.aviso-ok { background: var(--verde-suave); color: var(--verde); }
.aviso-info { background: var(--azul-suave); color: var(--azul); }
.aviso-alerta { background: var(--amarillo-suave); color: #8a6100; }
.sello-demo { background: var(--naranja-suave); color: var(--naranja); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; margin: 0 6px 12px; text-align: center; }

/* ---------- Tablas y listas ---------- */
.tabla-envoltura { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--superficie-2); }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla a.fila-enlace { color: var(--texto); font-weight: 600; }
.lista-enlaces { padding: 6px 0; }
.lista-enlaces a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 22px; color: var(--texto); border-bottom: 1px solid var(--borde); }
.lista-enlaces a:last-child { border-bottom: 0; }
.lista-enlaces a:hover { background: var(--superficie-2); text-decoration: none; }
.lista-enlaces small { display: block; color: var(--texto-2); font-size: 13px; }
.flecha { color: var(--texto-3); font-size: 22px; }

.cabecera-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.cabecera-lista form { flex: 1; min-width: 220px; display: flex; gap: 8px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pestanas a { padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--texto); font-weight: 500; font-size: 14px; }
.pestanas a.activo { background: var(--texto); color: #fff; }
.pestanas a:hover { text-decoration: none; }
.pestanas .cuenta { opacity: .65; margin-left: 4px; }

/* Ficha en modo consulta */
.ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 22px; margin: 0; }
.ficha div { min-width: 0; }
.ficha dt { font-size: 12px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .03em; }
.ficha dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.cabecera-ficha { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cabecera-ficha h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Etiquetas de estado */
.etiqueta { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: rgba(0,0,0,.06); color: var(--texto-2); }
.etiqueta.azul { background: var(--azul-suave); color: var(--azul); }
.etiqueta.naranja { background: var(--naranja-suave); color: var(--naranja); }
.etiqueta.verde { background: var(--verde-suave); color: var(--verde); }
.etiqueta.verde-oscuro { background: #dcefe3; color: #14603a; }
.etiqueta.rojo { background: var(--rojo-suave); color: var(--rojo); }
.etiqueta.amarillo { background: var(--amarillo-suave); color: #8a6100; }
/* Órdenes anteriores al sistema (registros en papel): violeta, con una franja a la izquierda */
.etiqueta.violeta { background: var(--violeta-suave); color: var(--violeta); }
.tabla tr.fila-registro td:first-child { box-shadow: inset 4px 0 0 var(--violeta); padding-left: 14px; }
.tarjeta.registro { border-left: 5px solid var(--violeta); }

/* Ajustes: logo */
.logo-actual { background: var(--superficie-2); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); padding: 12px; margin-bottom: 8px; max-width: 280px; }
.logo-actual img { max-width: 100%; height: auto; display: block; }

/* ---------- Login ---------- */
.pantalla-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caja-login { width: 100%; max-width: 380px; }
.logo-login { display: block; width: 220px; max-width: 70%; margin: 0 auto 26px; }
.caja-login h1 { font-size: 22px; margin-bottom: 16px; }
.caja-login .boton { margin-top: 6px; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .solo-movil { display: inline-flex !important; }
  .lateral { transform: translateX(-100%); transition: transform .22s ease; box-shadow: none; background: #fafafc; }
  body.menu-abierto .lateral { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.18); }
  body.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 25; }
  .contenido { margin-left: 0; }
  .barra { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  .barra h1 { font-size: 20px; }
  .busqueda-global { width: 100%; order: 3; }
  main { padding: 6px 16px 40px; }
  .tarjeta { padding: 16px; }
  .tabla-envoltura { margin: 0 -16px; padding: 0 16px; }
  .lista-enlaces a { padding: 13px 16px; }
  .grilla-bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bloque { min-height: 96px; padding: 14px; }
  .bloque-valor { font-size: 26px; }
  /* Tablas como tarjetas en el celular */
  table.tabla.apilable thead { display: none; }
  table.tabla.apilable tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  table.tabla.apilable td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  table.tabla.apilable td::before { content: attr(data-t); color: var(--texto-2); font-size: 13px; text-align: left; }
  table.tabla.apilable td.num { text-align: right; }
  table.tabla.apilable td:first-child { display: block; text-align: left; font-size: 16px; padding-bottom: 4px; }
  table.tabla.apilable td:first-child::before { content: none; }
  table.tabla.apilable tfoot td:empty { display: none; }
}

/* ---------- Impresión de pantalla ---------- */
@media print {
  .lateral, .barra, .acciones, .velo { display: none !important; }
  .contenido { margin: 0; }
  .tarjeta { box-shadow: none; border: 0; }
}

/* Selector segmentado (Persona / Empresa) */
.etiqueta-grupo { display: block; font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: 5px; }
.segmentado { display: inline-flex; background: rgba(0,0,0,.06); border-radius: 11px; padding: 3px; gap: 2px; }
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 9px; font-weight: 600; color: var(--texto-2); }
.segmentado input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segmentado input:focus-visible + span { box-shadow: 0 0 0 3px rgba(10,108,223,.25); }
.campo-dv { max-width: 120px; }
[hidden] { display: none !important; }

/* Chapa con bandera y logo MERCOSUR */
.chapa { display: inline-flex; align-items: center; gap: 7px; font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: .04em; background: #fff; border: 1.5px solid var(--texto); border-radius: 6px; padding: 2px 8px; color: var(--texto); white-space: nowrap; font-size: .95em; }
.chapa .fi { width: 1.2em; line-height: 1em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.logo-mercosur { height: 1.05em; width: auto; }
a.fila-enlace:hover .chapa { border-color: var(--azul); color: var(--azul); }

/* Autocompletar */
.autocompletar { position: relative; }
.ac-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); box-shadow: 0 8px 28px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto; }
.ac-lista li { padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; min-height: 44px; justify-content: center; }
.ac-lista li small { color: var(--texto-2); font-size: 13px; }
.ac-lista li:hover, .ac-lista li.activo { background: var(--azul-suave); }
.ac-lista li.ac-vacio { color: var(--texto-2); cursor: default; }
.ac-lista li.ac-vacio:hover { background: none; }
.formulario > .casilla { margin-bottom: 12px; }
.texto-peligro { color: var(--rojo); }

/* Orden de trabajo */
.formulario-entrega { display: grid; gap: 14px; }
.mant-entrega { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin: 0; min-width: 0; }
.mant-entrega legend { font-weight: 600; padding: 0 6px; }
.mant-entrega .si-no { display: flex; gap: 22px; }
.mant-detalle { display: grid; gap: 8px; margin-top: 8px; }
.fila-mant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fila-mant .casilla { min-width: 130px; min-height: 44px; }
.fila-mant input[name$="_meses_otro"] { max-width: 110px; }
.fila-mant select, .fila-mant input { width: auto; max-width: 190px; }
.barra-estado { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.barra-estado .campo { margin: 0; min-width: 220px; flex: 1; }
.boton.naranja { background: var(--naranja); }
.totales { margin: 14px 0 0 auto; max-width: 340px; }
.totales div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.totales dd { margin: 0; }
.totales .total { color: var(--texto); font-size: 19px; font-weight: 700; border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 10px; }
.agregar-linea { border-top: 1px solid var(--borde); margin-top: 18px; padding-top: 16px; }
.agregar-linea h3 { margin-bottom: 10px; }
.boton-icono.quitar { color: var(--texto-3); min-width: 36px; min-height: 36px; }
.boton-icono.quitar:hover { color: var(--rojo); background: var(--rojo-suave); }
.linea-tiempo { margin: 0; padding-left: 18px; color: var(--texto-2); }
.linea-tiempo li { padding: 3px 0; }
.cancelar-orden summary { list-style: none; }
.cancelar-orden summary::-webkit-details-marker { display: none; }
.cancelar-orden[open] summary { margin-bottom: 10px; }
.cancelar-orden form { max-width: 460px; }

/* Factura y cobros */
.resumen-cobro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.resumen-cobro div { background: var(--superficie-2); border-radius: var(--radio-chico); padding: 10px 14px; display: flex; flex-direction: column; }
.resumen-cobro span { font-size: 12px; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.resumen-cobro strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.resumen-cobro .pendiente strong { color: var(--naranja); }
.resumen-cobro .pagado strong { color: var(--verde); }
.tarjeta h4 { font-size: 15px; margin: 18px 0 10px; }
.para-copiar { background: var(--amarillo-suave); border-radius: var(--radio-chico); padding: 10px 16px; margin: 12px 0; max-width: 380px; }
.para-copiar .totales { margin: 0; max-width: none; }
.entrega { background: var(--verde-suave); border-radius: var(--radio-chico); padding: 14px 16px; margin-bottom: 16px; justify-content: space-between; align-items: center; }
.entrega .ayuda { margin: 2px 0 0; }
details.anular summary { list-style: none; display: inline-flex; width: auto; color: var(--rojo); font-size: 14px; min-height: 36px; padding: 4px 8px; }
details.anular summary::-webkit-details-marker { display: none; }
details.anular form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; }
details.anular form input { min-width: 160px; flex: 1; }
tr.anulado td { color: var(--texto-3); text-decoration: line-through; }
tr.anulado td:last-child { text-decoration: none; }
.bloque.elegido { box-shadow: 0 0 0 2px var(--acento), var(--sombra); }
.filtro-fechas { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-fechas input { width: auto; }
.texto-bien { color: var(--verde); }
@media (max-width: 900px) { .resumen-cobro { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .resumen-cobro div { padding: 8px; } .resumen-cobro strong { font-size: 14px; } }

/* Menú de impresos */
.menu-imprimir { position: relative; }
.menu-imprimir summary { list-style: none; }
.menu-imprimir summary::-webkit-details-marker { display: none; }
.menu-opciones { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico); box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 4px; min-width: 240px; display: flex; flex-direction: column; }
.menu-opciones a { padding: 11px 12px; border-radius: 8px; color: var(--texto); min-height: 44px; }
.menu-opciones a:hover { background: var(--azul-suave); text-decoration: none; }
.enlace-recibo { width: auto; display: inline-flex; color: var(--azul); font-size: 14px; min-height: 36px; padding: 4px 8px; }
@media (max-width: 900px) { .menu-opciones { right: auto; left: 0; } }
.pasos { margin: 0; padding-left: 20px; }
.pasos li { padding: 3px 0; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--fondo); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }

/* Agenda */
.agenda-barra { gap: 12px; }
.navegar-fechas { display: flex; gap: 6px; }
.nombre-dia::first-letter { text-transform: uppercase; }
.dia.hoy { box-shadow: 0 0 0 2px var(--azul), var(--sombra); }
.cita { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--borde); }
.cita:first-of-type { border-top: 0; }
.cita-hora { display: flex; flex-direction: column; min-width: 52px; font-variant-numeric: tabular-nums; }
.cita-hora small { color: var(--texto-3); }
.cita-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cita-acciones { margin-top: 4px; gap: 6px; }
.cita.estado-cancelada, .cita.estado-no_vino { opacity: .6; }
.semana { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.semana .tarjeta { margin: 0; }

/* Deudas y reportes */
tr.fila-vencida td { background: var(--rojo-suave); }
tr.fila-vencida td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.tabla tfoot td { border-top: 2px solid var(--borde-fuerte); border-bottom: 0; font-weight: 600; }
.filtro-periodo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtro-periodo .campo { margin: 0; min-width: 160px; }
.grilla-reportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 0 18px; }
tr.fila-total td { font-weight: 700; background: var(--superficie-2); }
.lista-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.aviso-padron { font-size: 13px; margin: 5px 0 0; color: var(--verde); }
.aviso-padron[data-tipo="alerta"] { color: #8a6100; }

/* RRHH */
form.marca { display: inline-flex; align-items: center; gap: 2px; margin: 2px 6px 2px 0; }
.pantalla-kiosco { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.kiosco { width: 100%; max-width: 420px; text-align: center; }
.kiosco .reloj { font-size: 20px; color: var(--texto-2); margin: 0 0 16px; }
.kiosco .reloj::first-letter { text-transform: uppercase; }
.teclado input { font-size: 34px; text-align: center; letter-spacing: .4em; min-height: 70px; margin-bottom: 14px; }
.teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.teclas button { font: inherit; font-size: 30px; font-weight: 600; min-height: 76px; border: 0; border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); cursor: pointer; }
.teclas button:active { transform: scale(.97); }
.teclas button[type=submit] { background: var(--verde); color: #fff; }
.kiosco-ok, .kiosco-error { border-radius: 18px; padding: 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.kiosco-ok { background: var(--verde-suave); color: var(--verde); }
.kiosco-ok.salida { background: var(--azul-suave); color: var(--azul); }
.kiosco-ok strong { font-size: 24px; }
.kiosco-error { background: var(--rojo-suave); color: var(--rojo); }

/* ---------- RRHH › Carga semanal de horarios ---------- */
.semana-nav { align-items: center; }
.semana-titulo { flex: 1; margin: 0; font-size: 17px; text-align: center; }
.semana-empleado h3 { margin-bottom: 6px; }
.semana-dia { display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr 1fr auto; gap: 8px 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--borde); }
.semana-dia.libre .semana-fecha { color: var(--texto-3); }
.semana-dia .error { grid-column: 1 / -1; margin: 0; }
.semana-dia.con-error input { border-color: var(--rojo); }
.semana-fecha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 600; }
.semana-hora { display: flex; align-items: center; gap: 8px; margin: 0; }
.semana-hora span { font-size: 13px; color: var(--texto-2); }
.semana-hora input { flex: 1; min-width: 0; }
.semana-dia .boton.chico { min-height: 44px; }
@media (max-width: 640px) {
  .semana-dia { grid-template-columns: 1fr 1fr; }
  /* Fecha y «Horario normal» en la misma fila; las dos horas debajo */
  .semana-fecha { grid-column: 1; grid-row: 1; }
  .semana-dia .boton.chico { grid-column: 2; grid-row: 1; justify-self: end; }
  .semana-sin-boton { display: none; }
  .semana-dia > .ayuda { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; }
  .semana-hora { flex-direction: column; align-items: stretch; gap: 2px; }
  .semana-titulo { font-size: 15px; }
}

/* ---------- Manual del operador ---------- */
.manual-version { margin: 0; }
.manual-grilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.manual-indice { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 14px 16px; }
.manual-indice summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.manual-indice ol { list-style: none; margin: 6px 0 0; padding: 0; }
.manual-indice li { margin: 2px 0; }
.manual-indice li a { display: block; padding: 4px 6px; border-radius: 6px; color: var(--texto); font-size: 14px; }
.manual-indice li a:hover { background: rgba(0,0,0,.05); text-decoration: none; }
.manual-indice li.nivel-3 a { padding-left: 18px; font-size: 13px; color: var(--texto-2); }
.manual { line-height: 1.6; font-size: 15.5px; overflow-wrap: anywhere; }
.manual h1 { font-size: 26px; margin-top: 0; }
.manual h2 { font-size: 21px; margin-top: 34px; padding-top: 10px; border-top: 1px solid var(--borde); scroll-margin-top: 80px; }
.manual h3 { font-size: 17px; margin-top: 22px; scroll-margin-top: 80px; }
.manual figure { margin: 14px 0; }
.manual figure img { max-width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.manual figcaption { font-size: 13px; color: var(--texto-3); margin-top: 4px; }
.manual table { border-collapse: collapse; width: 100%; font-size: 14px; display: block; overflow-x: auto; }
.manual th, .manual td { border: 1px solid var(--borde); padding: 6px 10px; text-align: left; vertical-align: top; }
.manual th { background: rgba(0,0,0,.04); }
.manual code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; font-size: 14px; }
.manual blockquote { margin: 14px 0; padding: 10px 14px; background: var(--amarillo-suave); border-left: 4px solid #e0a800; border-radius: 8px; }
.manual blockquote p { margin: 0; }
.manual li { margin: 3px 0; }
@media (max-width: 900px) {
  .manual-grilla { grid-template-columns: 1fr; }
  .manual-indice { position: static; max-height: none; }
  .manual h2, .manual h3 { scroll-margin-top: 140px; }
}

/* Ajustes › Celulares: el código QR siempre sobre blanco (también en modo oscuro) para que la cámara lo lea */
.tarjeta.angosto { max-width: 520px; }
.codigo-qr { background: #fff; border-radius: 16px; padding: 10px; width: min(280px, 100%); margin: 18px auto 6px; }
.codigo-qr.chico { width: min(200px, 100%); }
.codigo-qr svg { display: block; width: 100%; height: auto; }
.centrado { text-align: center; overflow-wrap: anywhere; }
.otros-codigos { margin: 14px 0; }
.otros-codigos summary { cursor: pointer; color: var(--azul); min-height: 44px; display: flex; align-items: center; }