/* AXUS Nómina: «estudio claro». Mesa de trabajo luminosa con rejilla fina, paneles blancos con barra de título, ámbar para
   la acción y azul para lo nocturno, cifras en monoespaciada y maquetas 3D. Sin recursos externos ni JavaScript. */
:root {
  color-scheme: light;
  --fondo: #eef0f3; --rejilla: rgba(30, 40, 60, .045); --panel: #ffffff; --panel-cab: #f5f6f8; --hundido: #f7f8fa;
  --borde: #dcdfe5; --borde-fuerte: #c6cad2; --tinta: #1d2128; --suave: #5c6370; --tenue: #9aa1ac;
  --ambar: #e8901f; --ambar-texto: #a85a06; --ambar-suave: #fff3e2; --sobre-ambar: #2a1700; --azul: #4d68d6; --azul-suave: #eef1fd;
  --ok: #1d8049; --ok-suave: #e9f6ee; --mal: #c0392b; --mal-suave: #fdecea; --alerta: #8a5a00; --alerta-suave: #fff6dc;
  --radio: 8px; --sombra: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 14px rgba(20, 30, 50, .05);
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--tinta); font: 15px/1.55 var(--ui); background-color: var(--fondo);
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 28px 28px; }
a { color: var(--ambar-texto); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; font-weight: 650; margin: .2rem 0 .3rem; text-wrap: balance; }
h2 { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin: 0; }
code { font: 13px/1.4 var(--mono); color: #6b3f05; } code.json { white-space: pre-wrap; word-break: break-all; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* barra superior */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .45rem 1rem; background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--borde); box-shadow: 0 1px 8px rgba(20, 30, 50, .06); position: sticky; top: 0; z-index: 5; }
.marca { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; font-size: .84rem; }
.marca:hover { text-decoration: none; } .marca svg { width: 24px; height: 24px; }
.menu { display: flex; flex-wrap: wrap; gap: 2px; }
.menu a { color: var(--suave); padding: .35rem .65rem; border-radius: 6px; font-size: .9rem; }
.menu a:hover { color: var(--tinta); background: var(--hundido); text-decoration: none; }
.menu a.activo { color: var(--tinta); background: var(--ambar-suave); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ambar); }
.cuenta { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; }
.cuenta a { color: var(--suave); }

main { max-width: 1240px; margin: 0 auto; padding: 1.2rem 1rem 5rem; display: flex; flex-direction: column; gap: 1rem; }
main > * { margin: 0; }
footer { text-align: center; color: var(--tenue); font: 11px var(--mono); letter-spacing: .05em; padding: 0 1rem 1.6rem; }
.sub { color: var(--suave); max-width: 80ch; } .nota { color: var(--suave); font-size: .86rem; overflow-wrap: anywhere; }
.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }

/* paneles con barra de título */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0 1.1rem 1.1rem; min-width: 0; }
.tarjeta > h2:first-child, .tarjeta > h1:first-child, details.tarjeta > summary { margin: 0 -1.1rem 1rem; padding: .6rem 1.1rem; background: var(--panel-cab);
  border-bottom: 1px solid var(--borde); border-radius: var(--radio) var(--radio) 0 0; color: #3a404b; }
.tarjeta > h2:first-child::before, details.tarjeta > summary::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--ambar); margin-right: .55rem; vertical-align: 1px; }
.tarjeta > h1:first-child { font-size: 1rem; }
.tarjeta:not(:has(> h2:first-child, > h1:first-child)) { padding-top: 1.1rem; }
details.tarjeta > summary { list-style: none; cursor: pointer; font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
details.tarjeta:not([open]) > summary { margin-bottom: -1.1rem; border-bottom: 0; border-radius: var(--radio); }
.tarjeta.angosta { max-width: 460px; width: 100%; margin: 2rem auto 0; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 1rem; align-items: start; }
.pila { display: flex; flex-direction: column; gap: .8rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .8rem 1rem; }
.rejilla > h2, .rejilla > .acciones, .rejilla > .nota, .rejilla > .codigo2p, .rejilla > .dias-horario { grid-column: 1 / -1; }
.rejilla.compacta { margin-top: .9rem; }
.tarjeta.rejilla > h2:first-child { margin-bottom: 0; }

/* controles */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--suave); font-weight: 600; }
input, select { font: 15px var(--ui); color: var(--tinta); background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: .5rem .65rem;
  min-height: 40px; width: 100%; font-weight: 400; }
input:focus, select:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(232, 144, 31, .2); }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--ambar); }
input[type="file"] { padding: .4rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 600 14px var(--ui); padding: .5rem 1rem; min-height: 38px;
  border-radius: 6px; border: 1px solid var(--borde-fuerte); color: var(--tinta); cursor: pointer; background: linear-gradient(#fff, #f3f4f7); box-shadow: 0 1px 1px rgba(20, 30, 50, .06); }
.btn:hover { border-color: var(--tenue); text-decoration: none; }
.btn:active { background: var(--hundido); box-shadow: inset 0 1px 2px rgba(20, 30, 50, .12); }
.btn.primario { color: var(--sobre-ambar); background: linear-gradient(#f8b55d, #ea9327); border-color: #c97614; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(150, 80, 0, .25); }
.btn.primario:hover { background: linear-gradient(#fbc277, #ef9d36); }
.btn.peligro { color: var(--mal); background: #fff; border-color: #e8b4ae; }
.btn.chico { padding: .22rem .65rem; min-height: 30px; font-size: 13px; }
form.en-linea { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
form.en-linea input, form.en-linea select { width: auto; min-height: 32px; padding: .25rem .5rem; }
form.en-linea .codigo2p { flex-direction: row; align-items: center; }
form.en-linea .codigo2p input { width: 7.5rem; }
.tarjeta.en-linea { display: flex; padding-top: 1.1rem; }
.acciones-planilla { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.acciones-planilla details { flex-basis: 100%; }
details summary { cursor: pointer; color: var(--suave); }
.acciones-planilla details summary, td details summary { margin-top: .6rem; }
.chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--hundido); border: 1px solid var(--borde); font: 12px var(--mono); color: var(--suave); }

/* avisos */
.aviso { padding: .7rem 1rem; border-radius: 6px; background: var(--alerta-suave); color: var(--alerta); border: 1px solid #f0dc9e; border-left: 4px solid #e2b23a; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); border-color: #bfe3cc; border-left-color: var(--ok); }
.aviso.mal { background: var(--mal-suave); color: var(--mal); border-color: #f2c4bf; border-left-color: var(--mal); }

/* indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: .7rem; }
.indicador { display: flex; flex-direction: column; gap: .15rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem .95rem;
  color: var(--tinta); box-shadow: var(--sombra); }
a.indicador:hover { text-decoration: none; border-color: var(--ambar); }
.indicador span { color: var(--suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.indicador b { font: 650 1.15rem var(--mono); white-space: nowrap; }
.indicadores .indicador:first-child b { color: var(--ambar-texto); }

/* tablas */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #eceef2; vertical-align: top; }
thead th { color: var(--suave); font-weight: 650; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; background: var(--panel-cab); border-bottom: 1px solid var(--borde); }
tbody tr:hover td { background: #fffaf2; }
thead th.n { font-family: var(--ui); font-size: .7rem; }
td.n, th.n { text-align: right; font-family: var(--mono); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.fuente { font-size: .8rem; color: var(--suave); word-break: break-word; max-width: 380px; white-space: normal; min-width: 200px; }
.tabla-ancha { overflow-x: auto; }
.estado { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border-radius: 999px; font: 650 11.5px var(--ui); letter-spacing: .02em;
  background: var(--hundido); border: 1px solid var(--borde); white-space: nowrap; color: var(--suave); }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado.calculada { color: #8a5a00; background: var(--alerta-suave); border-color: #f0dc9e; }
.estado.aprobada { color: var(--ambar-texto); background: var(--ambar-suave); border-color: #f5d3a3; }
.estado.pagada, .estado.activo { color: var(--ok); background: var(--ok-suave); border-color: #bfe3cc; }
.estado.anulada, .estado.baja { color: var(--mal); background: var(--mal-suave); border-color: #f2c4bf; }

.qr { display: flex; justify-content: center; margin: .5rem 0; } .qr svg { width: 220px; height: 220px; max-width: 100%; background: #fff; padding: 8px; border-radius: 6px; border: 1px solid var(--borde); }
.codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; padding: 0; list-style: none; }
.codigos li { background: var(--hundido); border: 1px solid var(--borde); border-radius: 6px; padding: .35rem; text-align: center; }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; } dl.datos dt { color: var(--suave); } dl.datos dd { margin: 0; word-break: break-word; }

/* pasos de la planilla */
.pasos-planilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.pasos-planilla li { display: flex; gap: .6rem; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .75rem; box-shadow: var(--sombra); }
.pasos-planilla .num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--mono); background: var(--hundido); color: var(--tenue); border: 1px solid var(--borde); }
.pasos-planilla li span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pasos-planilla small { color: var(--suave); font-size: .78rem; }
.pasos-planilla li.hecho .num { background: var(--ok); color: #fff; border-color: var(--ok); }
.pasos-planilla li.actual { border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(232, 144, 31, .18), var(--sombra); }
.pasos-planilla li.actual .num { background: var(--ambar); color: var(--sobre-ambar); border-color: var(--ambar); }
.pasos-planilla li.futuro { opacity: .7; }
.guia-paso { background: var(--ambar-suave); border: 1px solid #f5d3a3; border-radius: var(--radio); padding: .8rem 1rem; color: #4a3210; }
ul.revision { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
ul.revision li { display: flex; gap: .6rem; align-items: flex-start; }
.marca-rev { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--ui); }
ul.revision li.ok .marca-rev { background: var(--ok-suave); color: var(--ok); }
ul.revision li.mira .marca-rev { background: var(--alerta-suave); color: var(--alerta); border: 1px solid #f0dc9e; }

/* asistente */
.boton-asistente { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem .55rem .65rem; border-radius: 999px; background: #fff; color: var(--tinta);
  border: 1px solid var(--borde); box-shadow: 0 6px 22px rgba(20, 30, 50, .16); font-weight: 650; }
.boton-asistente:hover { text-decoration: none; border-color: var(--ambar); }
.boton-asistente svg { width: 26px; height: 26px; }
.chat { max-width: 820px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.chat-cab { display: flex; gap: .8rem; align-items: center; }
.chat-cab > div:nth-child(2) { flex: 1; min-width: 0; }
.avatar { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.avatar svg { width: 30px; height: 30px; }
.mensajes { display: flex; flex-direction: column; gap: .7rem; }
.msg { display: flex; flex-direction: column; gap: .4rem; }
.msg.persona { align-items: flex-end; }
.burbuja { max-width: min(640px, 92%); padding: .7rem .95rem; border-radius: 14px; box-shadow: var(--sombra); }
.burbuja p { margin: 0 0 .45rem; } .burbuja p:last-child { margin-bottom: 0; }
.msg.asistente .burbuja { background: var(--panel); border: 1px solid var(--borde); border-top-left-radius: 4px; }
.msg.persona .burbuja { background: var(--ambar-suave); border: 1px solid #f5d3a3; border-top-right-radius: 4px; }
ul.enlaces { margin: .3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
ul.enlaces a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
ul.enlaces a::before { content: "→"; color: var(--ambar); }
.sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; }
.sugerencias form { margin: 0; }
.sugerencia { font: 500 13.5px var(--ui); color: var(--tinta); background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; }
.sugerencia:hover { border-color: var(--ambar); background: var(--ambar-suave); }
.chat-entrada { display: flex; gap: .5rem; position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--panel); padding: .6rem;
  border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 6px 22px rgba(20, 30, 50, .12); }
.chat-entrada input { flex: 1; border: 0; box-shadow: none; } .chat-entrada input:focus { box-shadow: none; }
.borrar-chat { align-self: center; }
.pendientes-inicio ul.enlaces { gap: .45rem; }

/* jornadas: maquetas 3D */
.r3 { display: block; max-width: 100%; height: auto; min-width: 0; flex: 0 1 auto; }
.ley-item > *, .horario > * { min-width: 0; }
.r3-eje { fill: #6b7280; font: 9px var(--mono); letter-spacing: .04em; }
.r3-marco { background: radial-gradient(ellipse at 50% 35%, #ffffff, #e9ecf1 80%); border: 1px solid var(--borde); border-radius: 6px; padding: .5rem; display: flex; justify-content: center; }
.ley, .horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .8rem; }
.ley-item, .horario { display: flex; flex-direction: column; gap: .55rem; background: var(--hundido); border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem; min-width: 0; }
.ley-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem .6rem; }
dl.cifras { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; margin: 0; font-size: .85rem; }
dl.cifras dt { color: var(--suave); } dl.cifras dd { margin: 0; font-family: var(--mono); text-align: right; }
.ley-item .btn { align-self: flex-start; }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: .8rem 0; font-size: .82rem; color: var(--suave); }
.muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -.6rem; vertical-align: -1px; }
.muestra.diurno { background: #f6b45a; } .muestra.nocturno { background: #8aa5ff; } .muestra.noche { background: #dbe3fb; border: 1px solid #b9c6f3; }
table.reglas { margin-top: .4rem; }
.r3-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
.r3-inicio .r3 { max-height: 300px; width: auto; }

/* filtros, horarios por día, observaciones */
.filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; padding-top: 1.1rem; }
.filtros label { min-width: 150px; flex: 1 1 150px; } .filtros .btn { flex: 0 0 auto; }
.dias-horario { display: flex; flex-direction: column; gap: .35rem; background: var(--hundido); border: 1px solid var(--borde); border-radius: 6px; padding: .6rem; }
.fila-dia { display: grid; grid-template-columns: 7.5rem repeat(3, minmax(0, 1fr)); gap: .5rem; align-items: center; }
.fila-dia > span:first-child { font-size: .9rem; }
.fila-dia.cabeza span { font-size: .7rem; color: var(--suave); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
td.obs { font-size: .84rem; color: var(--alerta); min-width: 220px; white-space: normal; }
td .chip, .horario .chip { margin: 0 .2rem .25rem 0; white-space: nowrap; }

@media (max-width: 860px) { .pasos-planilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cuenta { margin-left: 0; width: 100%; }
  .barra { position: static; }
  .r3-inicio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tarjeta > table, .columnas table { display: block; overflow-x: auto; }
  td { white-space: nowrap; }
  .indicadores { grid-template-columns: 1fr 1fr; } .indicador b { font-size: .95rem; }
  dl.datos { grid-template-columns: 1fr; } dl.datos dd { margin-bottom: .4rem; }
  .fila-dia { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fila-dia > span:first-child { grid-column: 1 / -1; font-weight: 600; } .fila-dia.cabeza > span:first-child { display: none; }
  .pasos-planilla small { display: none; }
  .boton-asistente span { display: none; } .boton-asistente { padding: .55rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .barra, footer, form, details, .boton-asistente { display: none !important; } body { background: #fff; } .tarjeta { border: 0; box-shadow: none; } }
td.dif { color: var(--suave); } td.dif.grande, td.n.dif.grande { color: var(--mal); font-weight: 650; background: var(--mal-suave); }
fieldset.opcion-renta { grid-column: 1 / -1; border: 1px solid var(--borde); border-radius: 6px; padding: .7rem .9rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
fieldset.opcion-renta legend { font-size: .78rem; font-weight: 650; color: var(--suave); padding: 0 .3rem; }
label.radio { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; color: var(--tinta); font-size: .92rem; }
label.radio input { width: 18px; height: 18px; min-height: 0; margin-top: .15rem; accent-color: var(--ambar); flex: 0 0 auto; }

/* Logo de la empresa (ajustes) */
.logo-vista { grid-column: 1 / -1; padding: 14px 18px; border: 1px solid var(--borde, #E5E7EB); border-radius: 10px; background: #fff; max-width: 420px; }
.logo-vista.sobre-franja { background: #1F3A5F; border-color: #1F3A5F; }
.logo-vista img { display: block; max-width: 100%; max-height: 90px; }

/* Captura de novedades en bloque */
form.lote h3 { margin: .8rem 0 .2rem; font-size: 1rem; }
.tabla-lote td, .tabla-lote th { padding: .35rem .4rem; vertical-align: top; }
.tabla-lote input { width: 5.2rem; min-width: 5.2rem; }
.tabla-lote td:last-child input { width: 9rem; min-width: 9rem; }
.tabla-lote select { width: 8.6rem; min-width: 8.6rem; }
.tabla-lote td:first-child { min-width: 10rem; }
details.otra-novedad { margin-top: 1rem; }

.rejilla .ancho-completo { grid-column: 1 / -1; }