:root {
  --papel: #f3f5f7;
  --superficie: #ffffff;
  --tinta: #16202c;
  --tinta-suave: #4f5b69;
  --linea: #d5dbe2;
  --sello: #2b4c9b;
  --sello-suave: #e7edf9;
  --ok: #1f7a4d;
  --ok-suave: #e5f4ec;
  --aviso: #a86200;
  --aviso-suave: #fdf1df;
  --error: #b42318;
  --error-suave: #fdecea;
  --radio: 6px;
  color-scheme: light;
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #11161d; --superficie: #1a212b; --tinta: #e6eaf0; --tinta-suave: #a3adba; --linea: #2e3845;
    --sello: #8fa9ec; --sello-suave: #22304d; --ok: #5cc493; --ok-suave: #173326; --aviso: #f0b45c;
    --aviso-suave: #3a2a12; --error: #f08a80; --error-suave: #3d1d1a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .75rem; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 600; }
a { color: var(--sello); }
.numero, td.importe, .totales dd { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Barra superior */
.barra {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding: .6rem 1.5rem; background: var(--superficie); border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 5;
}
.marca { font-weight: 800; letter-spacing: -.01em; }
.barra nav { display: flex; gap: .25rem; }
.barra nav a { padding: .35rem .7rem; border-radius: var(--radio); text-decoration: none; color: var(--tinta-suave); font-weight: 500; }
.barra nav a[aria-current="page"] { color: var(--tinta); background: var(--papel); }
.selector-emisor { margin-left: auto; }
.entorno { font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 99px; }
.entorno.homologacion, .entorno.demo { background: var(--aviso-suave); color: var(--aviso); }
.entorno.produccion { background: var(--error); color: #fff; }

.alerta { background: var(--aviso-suave); color: var(--aviso); padding: .6rem 1.5rem; font-weight: 500; }
.alerta a { color: inherit; font-weight: 700; }
.encabezado-vista { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encabezado-vista h1 { margin: 0; }
.exportar { display: flex; gap: .5rem; align-items: end; }
.exportar .campo { margin: 0; }
.exportar input[type="month"] { min-width: 10.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .25rem .2rem .6rem; border: 1px solid var(--linea); border-radius: 99px; font-size: .9rem; }
main { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
main:focus { outline: none; }

/* Formularios */
label { display: block; font-weight: 500; font-size: .9rem; margin-bottom: .25rem; }
input, select, textarea {
  font: inherit; color: inherit; width: 100%; padding: .45rem .6rem;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--sello); }
.campo { margin-bottom: 1rem; }
.fila { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opciones { display: flex; gap: .5rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 1rem; }
.opciones legend { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; padding: 0; }
.opciones label { display: flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0;
  padding: .4rem .75rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); cursor: pointer; }
.opciones label:has(input:checked) { border-color: var(--sello); background: var(--sello-suave); }
.ayuda { color: var(--tinta-suave); font-size: .85rem; margin: .25rem 0 0; }

.boton, .boton-secundario, .boton-texto {
  font: inherit; font-weight: 600; border-radius: var(--radio); cursor: pointer; padding: .55rem 1rem;
  text-decoration: none; white-space: nowrap; display: inline-block; text-align: center;
}
.boton { background: var(--sello); color: #fff; border: 1px solid var(--sello); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }
.boton-texto { background: none; border: 0; color: var(--sello); padding: .25rem .4rem; text-decoration: none; }
.acciones { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

.panel { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; }
.mensaje { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; }
.mensaje.error { background: var(--error-suave); color: var(--error); }
.mensaje.ok { background: var(--ok-suave); color: var(--ok); }
.mensaje.aviso { background: var(--aviso-suave); color: var(--aviso); }
.mensaje ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* Facturar: formulario + comprobante en vivo */
.facturar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 1.5rem; align-items: start; }
.items { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.items th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--tinta-suave); padding: 0 .3rem .3rem; }
.items td { padding: .2rem .3rem; vertical-align: top; }
.items td:first-child { width: 34%; }
.items select { min-width: 6.5rem; }
.items input[type="number"] { min-width: 5rem; }
.items input[type="number"][data-k="precioUnitario"] { min-width: 8rem; }
.items .quitar { color: var(--tinta-suave); }

.comprobante {
  position: sticky; top: 4.5rem; background: var(--superficie); border: 1px solid var(--tinta);
  font-size: .85rem; box-shadow: 0 1px 0 var(--linea), 0 12px 30px -18px rgba(22, 32, 44, .35);
}
.comprobante .cabecera { display: grid; grid-template-columns: 1fr auto 1fr; border-bottom: 1px solid var(--tinta); }
.comprobante .cabecera > div { padding: .75rem; }
.letra {
  display: grid; place-items: center; width: 4.75rem; border: 1px solid var(--tinta); border-top: 0;
  background: var(--superficie); align-self: start; padding: .2rem 0 .3rem;
}
.letra strong { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.letra small { font-size: .65rem; font-weight: 600; white-space: nowrap; }
.letra.cambio strong { animation: sello .35s ease-out; }
@keyframes sello { from { transform: scale(1.35); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .letra.cambio strong { animation: none; } }
.comprobante .tipo { font-weight: 800; font-size: 1.05rem; }
.comprobante .bloque { padding: .65rem .75rem; border-bottom: 1px solid var(--linea); }
.comprobante .renglon { display: flex; justify-content: space-between; gap: 1rem; }
.comprobante .renglon span:first-child { overflow-wrap: anywhere; }
.totales { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; margin: 0; padding: .75rem; }
.totales dt { text-align: right; color: var(--tinta-suave); }
.totales dd { margin: 0; text-align: right; }
.totales .total { font-weight: 800; font-size: 1.1rem; color: var(--tinta); }
.leyenda { font-size: .72rem; padding: 0 .75rem .75rem; color: var(--tinta-suave); }
.comprobante .problema { padding: .75rem; color: var(--error); background: var(--error-suave); }
.comprobante .pie { padding: .75rem; }
.comprobante .pie .boton { width: 100%; }

/* Tablas */
.tabla-scroll { overflow-x: auto; }
table.listado { width: 100%; border-collapse: collapse; background: var(--superficie); }
.listado th, .listado td { padding: .6rem .75rem; border-bottom: 1px solid var(--linea); text-align: left; white-space: nowrap; }
.listado th { font-size: .8rem; color: var(--tinta-suave); font-weight: 600; }
.listado td.importe { text-align: right; }
.estado { font-size: .8rem; font-weight: 600; padding: .15rem .5rem; border-radius: 99px; }
.estado.autorizado { background: var(--ok-suave); color: var(--ok); }
.estado.pendiente { background: var(--aviso-suave); color: var(--aviso); }
.estado.rechazado, .estado.error { background: var(--error-suave); color: var(--error); }
.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--tinta-suave); }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.pasos { padding-left: 1.2rem; margin: 0; }
.pasos li { margin-bottom: .4rem; }

.login { max-width: 360px; margin: 12vh auto 0; }

dialog { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; max-width: 440px;
  background: var(--superficie); color: var(--tinta); }
dialog::backdrop { background: rgba(10, 15, 22, .45); }

@media (max-width: 900px) {
  .facturar, .dos-columnas { grid-template-columns: 1fr; }
  .comprobante { position: static; }
  .selector-emisor { margin-left: 0; }
}
@media (max-width: 640px) {
  .barra { position: static; gap: .5rem .75rem; padding: .6rem 1rem; }
  .barra nav { order: 5; width: 100%; overflow-x: auto; }
  .selector-emisor { flex: 1; }
  main { padding: 1.25rem 1rem 3rem; }
  .items thead { display: none; }
  .items, .items tbody { display: block; }
  .items tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
  .items td { padding: 0; }
  .items td:first-child { grid-column: 1 / -1; width: auto; }
  .items td:last-child { grid-column: 1 / -1; text-align: right; }
}