/* Executive Transfer · Gestión. Sin compilación: se sirve tal cual desde Hostinger. */
/* Tipografía servida desde el propio servidor (sin Google Fonts, por RGPD). */
@font-face { font-family: 'Archivo'; font-weight: 400; font-display: swap; src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap; src: url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap; src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); }
:root {
  --obsidiana: #101215;
  --granate: #7a1e2b;
  --granate-claro: #f5e8ea;
  --niebla: #eceef0;
  --cromo: #a3aab2;
  --blanco: #fff;
  --texto: #1d2024;
  --suave: #5d646c;
  --ok: #1f7a45;
  --ok-fondo: #e6f4ec;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4dc;
  --error: #a3192b;
  --error-fondo: #fde8eb;
  --radio: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Archivo', system-ui, sans-serif; color: var(--texto); background: var(--niebla); font-size: 16px; line-height: 1.45; }
a { color: var(--granate); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }

.barra { background: var(--obsidiana); color: var(--blanco); }
.barra-dentro { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .7rem 16px; flex-wrap: wrap; }
.marca { color: var(--blanco); text-decoration: none; font-weight: 700; letter-spacing: .02em; margin-right: auto; }
.marca span { color: var(--cromo); font-weight: 400; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; }
.menu a, .menu button { color: var(--niebla); text-decoration: none; padding: .4rem .65rem; border-radius: 6px; font: inherit; font-size: .95rem; background: none; border: 0; cursor: pointer; }
.menu a:hover, .menu a.activo, .menu button:hover { background: var(--granate); color: var(--blanco); }

main { max-width: 1200px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cabecera h1 { margin: 0; }

.tarjeta { background: var(--blanco); border-radius: var(--radio); padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.btn { display: inline-block; background: var(--granate); color: var(--blanco); border: 0; border-radius: 8px; padding: .55rem .95rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.btn-sec { background: var(--blanco); color: var(--obsidiana); border: 1px solid var(--cromo); }
.btn-peligro { background: var(--blanco); color: var(--error); border: 1px solid var(--error); }
.btn-grande { width: 100%; padding: .85rem; font-size: 1.05rem; text-align: center; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.en-linea { display: inline; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--niebla); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.tabla-scroll { overflow-x: auto; }

.etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--niebla); color: var(--suave); white-space: nowrap; }
.etiqueta.ok, .etiqueta.realizado, .etiqueta.cobrado { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.pronto, .etiqueta.pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.caducado, .etiqueta.cancelado { background: var(--error-fondo); color: var(--error); }
.etiqueta.confirmado { background: var(--granate-claro); color: var(--granate); }

.mensaje { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.mensaje.error { background: var(--error-fondo); color: var(--error); }
.mensaje ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.campos { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.campo input, .campo select, .campo textarea { width: 100%; padding: .55rem .6rem; border: 1px solid var(--cromo); border-radius: 8px; font: inherit; background: var(--blanco); }
.campo textarea { min-height: 80px; }
.campo.ancho { grid-column: 1 / -1; }
.campo .ayuda { font-size: .82rem; color: var(--suave); margin-top: .2rem; }
.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.casilla input { width: 1.15rem; height: 1.15rem; }
.error-campo { color: var(--error); font-size: .85rem; margin-top: .2rem; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }
.suave { color: var(--suave); }
.vacio { color: var(--suave); font-style: italic; }

/* Agenda */
.dia { margin-bottom: 1.25rem; }
.dia h2 { margin-top: 0; }
.servicio { display: grid; grid-template-columns: 70px 1fr auto; gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--niebla); text-decoration: none; color: inherit; }
.servicio:last-child { border-bottom: 0; }
.servicio .hora { font-weight: 700; font-size: 1.1rem; }
.servicio .ruta { font-weight: 600; }
.servicio .sin-asignar { color: var(--aviso); font-weight: 600; }
.servicio.cancelado { opacity: .5; }

/* App del conductor */
.movil { max-width: 560px; margin: 0 auto; }
.movil .tarjeta h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.botonera { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }

.entrar { max-width: 380px; margin: 10vh auto; }
.entrar .logo { text-align: center; margin-bottom: 1.5rem; font-weight: 700; font-size: 1.3rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  .servicio { grid-template-columns: 56px 1fr; }
  .servicio > :last-child { grid-column: 2; }
  .ocultar-movil { display: none; }
}

/* Agenda en calendario */
.pestanas { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid var(--cromo); margin-bottom: 1rem; }
.pestanas a { padding: .5rem .85rem; text-decoration: none; color: var(--suave); font-weight: 600; border-radius: 8px 8px 0 0; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.pestanas a:hover { color: var(--obsidiana); }
.pestanas a.activo { color: var(--granate); border-bottom-color: var(--granate); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; background: var(--blanco); border: 1px solid var(--cromo); color: var(--texto); text-decoration: none; font-size: .92rem; }
.chip.activo { border-color: var(--obsidiana); background: var(--obsidiana); color: var(--blanco); }
.punto { width: .7rem; height: .7rem; border-radius: 50%; flex: none; background: var(--cromo); }
.resumen { display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .95rem; }
.resumen strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.resumen .alerta { color: var(--error); }

.cal-scroll { overflow-x: auto; background: var(--blanco); border-radius: var(--radio); box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.cal { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(150px, 1fr)); min-width: calc(56px + var(--cols) * 150px); }
.cal-esquina, .cal-col-cab { position: sticky; top: 0; z-index: 3; background: var(--blanco); border-bottom: 1px solid var(--cromo); }
.cal-esquina { left: 0; z-index: 4; }
.cal-col-cab { padding: .55rem .6rem; border-left: 1px solid var(--niebla); min-width: 0; }
.cal-col-cab .titulo { font-weight: 700; display: flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.cal-col-cab a.titulo:hover { color: var(--granate); }
.cal-col-cab .sub { font-size: .8rem; color: var(--suave); }
.cal-col-cab .ocupacion { height: 4px; background: var(--niebla); border-radius: 2px; margin-top: .35rem; overflow: hidden; }
.cal-col-cab .ocupacion span { display: block; height: 100%; background: var(--granate); }
.cal-col-cab.hoy { background: var(--granate-claro); }
.cal-horas { position: sticky; left: 0; z-index: 2; background: var(--blanco); height: var(--alto); }
.cal-horas span { position: absolute; right: .45rem; transform: translateY(-50%); font-size: .75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.cal-horas span:first-child { transform: none; }
.cal-col { position: relative; height: var(--alto); border-left: 1px solid var(--niebla);
  background-image: repeating-linear-gradient(to bottom, var(--niebla) 0 1px, transparent 1px var(--alto-hora)); }
.cal-col.hoy { background-color: color-mix(in srgb, var(--granate-claro) 45%, transparent); }
.hueco { position: absolute; left: 0; right: 0; height: var(--alto-hora); z-index: 0; }
.hueco:hover { background: var(--granate-claro); }
.hueco:hover::after { content: '+ Nuevo'; position: absolute; left: .5rem; top: .35rem; font-size: .8rem; font-weight: 600; color: var(--granate); }
.bloque { position: absolute; z-index: 1; padding: 0 3px 2px; }
.bloque a { display: block; height: 100%; overflow: hidden; border-radius: 7px; padding: .3rem .45rem; color: var(--blanco); background: var(--color, var(--suave)); text-decoration: none; font-size: .8rem; line-height: 1.25; box-shadow: 0 1px 2px rgba(16,18,21,.15); }
.bloque a:hover { filter: brightness(1.12); z-index: 5; }
.bloque .h { font-weight: 700; font-variant-numeric: tabular-nums; }
.bloque .r { font-weight: 600; }
.bloque .d { opacity: .9; }
.bloque.pendiente a { background: repeating-linear-gradient(135deg, var(--color, var(--suave)) 0 8px, color-mix(in srgb, var(--color, var(--suave)) 82%, white) 8px 16px); }
.bloque.realizado a, .bloque.cobrado a { opacity: .55; }
.bloque.sin-coche a { background: var(--blanco); color: var(--texto); border: 2px dashed var(--aviso); }
.bloque.choque a { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--error); }
.bloque .marca-choque { display: inline-block; background: var(--blanco); color: var(--error); border-radius: 4px; padding: 0 .3rem; font-size: .7rem; font-weight: 700; margin-bottom: .1rem; }
.ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--error); z-index: 2; pointer-events: none; }
.ahora::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--error); }
.leyenda { display: flex; gap: .4rem 1.1rem; flex-wrap: wrap; font-size: .85rem; color: var(--suave); margin-top: .75rem; align-items: center; }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.muestra { width: 1.4rem; height: .8rem; border-radius: 3px; background: var(--suave); }
.muestra.pend { background: repeating-linear-gradient(135deg, var(--suave) 0 4px, var(--cromo) 4px 8px); }
.muestra.hecho { opacity: .5; }
.muestra.choq { background: var(--blanco); outline: 2px solid var(--error); }
.muestra.sinc { background: var(--blanco); border: 2px dashed var(--aviso); }

/* Contabilidad */
.cifras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1rem; }
.cifra { background: var(--blanco); border-radius: var(--radio); padding: .9rem 1.1rem; box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.cifra .etq { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.cifra .valor { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.cifra .det { font-size: .85rem; color: var(--suave); }
.positivo { color: var(--ok); }
.negativo { color: var(--error); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-h { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 6.5rem; gap: .6rem; align-items: center; padding: .3rem 0; }
.barra-h .pista { height: 10px; background: var(--niebla); border-radius: 5px; overflow: hidden; }
.barra-h .pista span { display: block; height: 100%; background: var(--granate); border-radius: 5px; }
.evolucion { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; align-items: end; height: 180px; padding-top: .5rem; }
.evolucion .mes { display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; justify-content: flex-end; min-width: 0; }
.evolucion .par { display: flex; gap: 3px; align-items: flex-end; height: 140px; }
.evolucion .par span { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; }
.evolucion .ing { background: var(--ok); }
.evolucion .gas { background: var(--granate); }
.evolucion .nombre { font-size: .78rem; color: var(--suave); }
.evolucion .mes.actual .nombre { color: var(--texto); font-weight: 700; }
.pie { font-size: .85rem; color: var(--suave); margin-top: 1rem; }
.fila-gasto { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--niebla); flex-wrap: wrap; }
.fila-gasto:last-child { border-bottom: 0; }
.selector-mes { padding: .45rem; border: 1px solid var(--cromo); border-radius: 8px; font: inherit; }
.opciones-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.opciones-grandes label { display: flex; align-items: center; gap: .5rem; padding: .7rem; border: 1px solid var(--cromo); border-radius: 10px; background: var(--blanco); font-weight: 600; cursor: pointer; }
.opciones-grandes input { width: 1.1rem; height: 1.1rem; accent-color: var(--granate); }
.opciones-grandes label:has(input:checked) { border-color: var(--granate); background: var(--granate-claro); }
.importe-grande { font-size: 1.6rem !important; font-weight: 700; text-align: right; }
.bloque .marca-conductor { display: inline-block; background: var(--obsidiana, #101215); color: var(--blanco); border-radius: 4px; padding: 0 .3rem; font-size: .7rem; font-weight: 700; margin: 0 .2rem .1rem 0; }
.etiqueta.conductor { background: var(--obsidiana, #101215); color: var(--blanco); }
.caja-resumen { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--texto); }
.caja-resumen strong { font-size: 1.3rem; }
.fila-entrega { display: flex; gap: .4rem; align-items: center; }
.fila-entrega input { width: 7rem; padding: .5rem .6rem; border: 1px solid var(--cromo); border-radius: 8px; font: inherit; background: var(--blanco); }
.fila-rvtc { padding: .6rem 0; border-bottom: 1px solid var(--niebla); }
.fila-rvtc:last-child { border-bottom: 0; }
.datos-rvtc { margin-top: .4rem; font-size: .92rem; }
.hoja { background: var(--blanco); max-width: 640px; margin: 0 auto; padding: 1.5rem; border-radius: var(--radio); box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.hoja h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin: 1.2rem 0 .4rem; }
.hoja-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--obsidiana, #101215); padding-bottom: .75rem; }
.hoja-empresa { font-size: 1.3rem; font-weight: 700; }
.hoja-licencia { font-weight: 700; border: 2px solid var(--obsidiana, #101215); border-radius: 6px; padding: .2rem .6rem; white-space: nowrap; }
.hoja-estado { margin-top: 1rem; padding: .7rem .9rem; border-radius: 8px; background: var(--niebla); }
.hoja-estado.ok { background: var(--ok-fondo); color: var(--ok); }
.hoja-estado.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.hoja-pie { margin-top: 1.2rem; font-size: .8rem; }
@media print {
    .barra, .no-imprimir, .mensaje { display: none !important; }
    body { background: #fff; }
    .hoja { box-shadow: none; max-width: none; padding: 0; }
}
.instalar summary { cursor: pointer; font-weight: 600; }
.instalar p { margin: .6rem 0 0; }
details.fichaje summary { cursor: pointer; }

/* Facturas */
.factura { background: var(--blanco); max-width: 820px; margin: 0 auto; padding: 1.5rem; border-radius: var(--radio); box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.factura table { border-collapse: collapse; }
.factura td, .factura th { border-bottom: 0; padding: 0; }
.fac-cab td { width: 50%; }
.fac-empresa { font-size: 1.3rem; font-weight: 700; margin-bottom: .2rem; }
.fac-titulo { text-align: right; }
.fac-tipo { text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-size: .8rem; }
.fac-codigo { font-size: 1.3rem; font-weight: 700; color: var(--granate); }
.fac-receptor { margin-top: 1rem; padding: .6rem .8rem; border: 1px solid var(--cromo); border-radius: 8px; }
.fac-etq { text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-size: .75rem; }
.factura .fac-lineas { margin-top: 1rem; }
.factura .fac-lineas th { border-bottom: 2px solid var(--obsidiana); padding: .4rem .3rem; }
.factura .fac-lineas td { border-bottom: 1px solid var(--niebla); padding: .5rem .3rem; }
.fac-pie { margin-top: 1rem; }
.fac-qr { width: 45%; }
.fac-vf { font-weight: 700; }
.fac-vf-txt { font-size: .78rem; }
.factura .fac-totales td { padding: .2rem .3rem; }
.factura .fac-total td { font-weight: 700; font-size: 1.15rem; border-top: 2px solid var(--obsidiana); padding-top: .4rem; }
.fac-nota { margin-top: .5rem; font-size: .88rem; }
.fac-legal { margin-top: 1rem; font-size: .78rem; color: var(--suave); }
@media (max-width: 600px) { .fac-cab td, .fac-pie > tbody > tr > td { display: block; width: 100%; text-align: left; } .fac-titulo { margin-top: .8rem; } .fac-det { display: none; } }
.lineas-factura .linea { display: grid; grid-template-columns: minmax(0, 1fr) 5rem 7.5rem 5.5rem 2.2rem; gap: .5rem; align-items: end; padding: .4rem 0; border-bottom: 1px solid var(--niebla); }
.lineas-factura .linea input, .lineas-factura .linea select { width: 100%; }
@media (max-width: 640px) { .lineas-factura .linea { grid-template-columns: 1fr 1fr; } .lineas-factura .linea .desc { grid-column: 1 / -1; } }
.etiqueta.vencida, .etiqueta.incorrecto, .etiqueta.error, .etiqueta.anulada { background: var(--error-fondo); color: var(--error); }
.etiqueta.simulado { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.correcto, .etiqueta.aceptado_con_errores { background: var(--ok-fondo); color: var(--ok); }
.huella { font-family: ui-monospace, monospace; font-size: .78rem; word-break: break-all; color: var(--suave); }
@media print { .factura { box-shadow: none; max-width: none; padding: 0; } }
table.suma tr.titular td { background: var(--niebla); border-top: 2px solid var(--blanco); }
table.suma tr.sub td:first-child { padding-left: 1.4rem; }
table.suma tr.total td { border-top: 2px solid var(--obsidiana); }

/* Documentos de impuestos */
.pasos { display: grid; gap: .75rem; }
.paso { display: flex; gap: .9rem; background: var(--blanco); border-radius: var(--radio); padding: .9rem 1.1rem; box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.paso-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--granate); color: var(--blanco); display: grid; place-items: center; font-weight: 700; }
.paso-cuerpo { min-width: 0; flex: 1; }
.paso .etq { font-weight: 700; margin-bottom: .45rem; }
.paso .chips { margin-bottom: .4rem; }
.chip.activo { background: var(--granate); border-color: var(--granate); color: var(--blanco); }
.chip.activo .suave { color: rgba(255,255,255,.8); }
.docs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-top: .75rem; }
.doc { display: flex; gap: .9rem; align-items: flex-start; background: var(--blanco); border-radius: var(--radio); padding: 1rem; box-shadow: 0 1px 2px rgba(16,18,21,.06); }
.doc-icono { flex: none; width: 3rem; height: 3rem; border-radius: 10px; background: var(--granate-claro); color: var(--granate); display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; }
.doc-cuerpo { flex: 1; min-width: 0; }
.doc-cuerpo .suave { font-size: .9rem; margin: .15rem 0 .4rem; }
.doc-acciones { display: flex; flex-direction: column; gap: .4rem; }
.doc-acciones .btn { padding: .4rem .8rem; text-align: center; }
@media (max-width: 420px) { .docs { grid-template-columns: 1fr; } }

/* Navegación: menú lateral del administrador y pestañas del conductor */
.icono { flex: none; }
.menu-abrir { position: absolute; opacity: 0; pointer-events: none; }
.lateral { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--obsidiana); color: var(--niebla); display: flex; flex-direction: column; z-index: 30; overflow-y: auto; }
.lateral .marca { display: block; padding: 1.1rem 1.2rem .9rem; color: var(--blanco); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.lateral .marca span { display: block; color: var(--cromo); font-weight: 400; font-size: .85rem; }
.lateral nav { flex: 1; padding: 0 .6rem 1rem; }
.lateral .grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #8b9199; margin: 1rem .6rem .35rem; }
.lateral nav a { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 8px; color: #d9dce0; text-decoration: none; font-size: .95rem; }
.lateral nav a:hover { background: rgba(255,255,255,.07); color: var(--blanco); }
.lateral nav a.activo { background: var(--granate); color: var(--blanco); }
.pie-lateral { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .88rem; color: var(--cromo); }
.pie-lateral button { display: flex; align-items: center; gap: .35rem; background: none; border: 0; color: var(--niebla); font: inherit; cursor: pointer; padding: .3rem .5rem; border-radius: 6px; }
.pie-lateral button:hover { background: rgba(255,255,255,.08); }
.barra-movil, .velo { display: none; }
body.con-lateral main { margin-left: 248px; max-width: none; padding: 1.5rem 2rem 3rem; }
body.con-lateral main > * { max-width: 1200px; }
@media (max-width: 1000px) {
    .barra-movil { display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 20; background: var(--obsidiana); padding: .45rem .5rem; }
    .barra-movil .marca { flex: 1; color: var(--blanco); text-decoration: none; font-weight: 700; text-align: center; }
    .boton-menu { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; color: var(--blanco); cursor: pointer; }
    .boton-menu:hover { background: rgba(255,255,255,.1); }
    .lateral { transform: translateX(-100%); transition: transform .2s ease, visibility .2s; visibility: hidden; }
    .menu-abrir:checked ~ .lateral { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.35); }
    .menu-abrir:checked ~ .velo { display: block; position: fixed; inset: 0; background: rgba(16,18,21,.45); z-index: 25; }
    body.con-lateral main { margin-left: 0; padding: 1rem 16px 3rem; }
}
.barra .salir button { background: none; border: 1px solid rgba(255,255,255,.25); color: var(--niebla); border-radius: 6px; padding: .3rem .7rem; font: inherit; font-size: .9rem; cursor: pointer; }
.pestanas-app { display: flex; justify-content: center; gap: .25rem; background: var(--blanco); border-bottom: 1px solid var(--cromo); padding: .25rem; }
.pestanas-app a { display: flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 8px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: .95rem; }
.pestanas-app a.activo { color: var(--granate); background: var(--granate-claro); }
@media (max-width: 700px) {
    .pestanas-app.conductor { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; border-top: 1px solid #d5d8dc; border-bottom: 0; padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); justify-content: space-around; box-shadow: 0 -2px 10px rgba(16,18,21,.06); }
    .pestanas-app.conductor a { flex-direction: column; gap: .15rem; font-size: .72rem; padding: .35rem .4rem; flex: 1; text-align: center; }
    .pestanas-app.conductor a .icono { width: 22px; height: 22px; }
    body.con-pestanas main { padding-bottom: 6rem; }
}

/* Inicio: accesos rápidos */
.rapidos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.rapido { display: flex; align-items: center; gap: .75rem; background: var(--blanco); border-radius: var(--radio); padding: .85rem 1rem; text-decoration: none; color: var(--texto); font-weight: 600; box-shadow: 0 1px 2px rgba(16,18,21,.06); border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.rapido:hover { border-color: var(--granate); transform: translateY(-1px); }
.rapido .icono { width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 8px; background: var(--granate-claro); color: var(--granate); }
.rapido.principal { background: var(--granate); color: var(--blanco); }
.rapido.principal .icono { background: rgba(255,255,255,.15); color: var(--blanco); }

/* Detalles que hacen la app más agradable */
.tarjeta, .cifra, .doc, .paso { border: 1px solid #e3e5e8; box-shadow: 0 1px 3px rgba(16,18,21,.04); }
.btn { transition: filter .15s, background .15s; }
.btn:hover { filter: brightness(1.08); }
.btn-sec:hover { background: var(--niebla); filter: none; }
.mensaje.ok { border-left: 4px solid var(--ok); }
.mensaje.aviso { border-left: 4px solid #d5a253; }
.mensaje.error { border-left: 4px solid var(--error); }
select.grande { font-size: 1.05rem; padding: .7rem; }
.imputacion { border-left: 4px solid var(--granate); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .selector-mes:focus { outline: 2px solid var(--granate); outline-offset: 1px; border-color: var(--granate); }

/* Recibo de nómina en pantalla */
.rec-cab, .rec, .rec-firma { width: 100%; border-collapse: collapse; margin-bottom: .8rem; font-size: .9rem; }
.rec-cab td { border: 1px solid var(--niebla); padding: .5rem .6rem; vertical-align: top; width: 50%; }
.rec th { text-align: left; background: var(--niebla); padding: .4rem .6rem; font-size: .8rem; }
.rec td { padding: .35rem .6rem; border-bottom: 1px solid var(--niebla); }
.rec-sub { font-weight: 600; color: var(--suave); font-size: .82rem; }
.rec-total td { font-weight: 700; border-top: 1px solid var(--cromo); }
.rec-liquido td { font-size: 1.1rem; font-weight: 700; background: var(--niebla); }
.rec-etq { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.rec-firma td { border: 1px solid var(--niebla); height: 3.5rem; width: 50%; padding: .4rem .6rem; color: var(--suave); font-size: .8rem; }
@media (max-width: 600px) { .rec-cab td { display: block; width: auto; } .rec, .rec-cab, .rec-firma { font-size: .78rem; } .rec th, .rec td { padding: .3rem .25rem; } .rec th { font-size: .66rem; } }