:root {
  --fondo: #f4f6f8;
  --superficie: #ffffff;
  --texto: #1d2733;
  --tenue: #66727f;
  --borde: #dde3ea;
  --primario: #1f5f8b;
  --primario-txt: #ffffff;
  --ok: #1e7a46;
  --ok-fondo: #e3f4ea;
  --alerta: #8a5a00;
  --alerta-fondo: #fff4d6;
  --error: #a32020;
  --error-fondo: #fde8e8;
  --inactiva: #9aa4ae;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #12171d; --superficie: #1b222a; --texto: #e6ebf0; --tenue: #9aa6b2; --borde: #2c3640;
    --primario: #4b9bd1; --primario-txt: #0d1a24;
    --ok: #6fd39b; --ok-fondo: #173226; --alerta: #f0c060; --alerta-fondo: #3a2f12;
    --error: #ff8a8a; --error-fondo: #3d1a1a; --inactiva: #66707a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 "Segoe UI", system-ui, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--primario); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

.barra { display: flex; align-items: center; gap: 2rem; padding: .6rem 1.25rem; background: var(--superficie);
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
.marca { font-weight: 700; }
.marca span { color: var(--tenue); font-weight: 400; }
.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.barra nav a { padding: .4rem .8rem; border-radius: 6px; text-decoration: none; color: var(--texto); }
.barra nav a.activo, .barra nav a:hover { background: var(--fondo); color: var(--primario); }

main { max-width: 1150px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.encabezado { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.encabezado h1, .encabezado h2 { margin: 0; margin-right: auto; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; overflow-x: auto; }
.tenue { color: var(--tenue); }
.nowrap { white-space: nowrap; }
.der { text-align: right; }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th { text-align: left; font-weight: 600; color: var(--tenue); font-size: .85rem; border-bottom: 2px solid var(--borde); padding: .5rem; }
.tabla td { border-bottom: 1px solid var(--borde); padding: .5rem; vertical-align: top; }
.tabla.compacta td { padding: .35rem .5rem; }
.tabla tr.inactiva td { color: var(--inactiva); }
main > .tabla { border: 1px solid var(--borde); border-radius: 10px; display: block; overflow-x: auto; }

.filtros { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros input[type=search] { flex: 1 1 260px; }

input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 6px; padding: .45rem .6rem; width: 100%; }
.filtros select { width: auto; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; }

.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem 1.25rem; }
.formulario label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; }
.formulario small { font-weight: 400; color: var(--tenue); }
.formulario .ancho, .formulario fieldset { grid-column: 1 / -1; }
.formulario.interno { padding: 0; }
fieldset { border: 1px solid var(--borde); border-radius: 8px; padding: .75rem 1rem 1rem; }
legend { color: var(--tenue); font-size: .85rem; padding: 0 .4rem; }
.req { color: var(--error); }
.acciones { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

.boton { display: inline-block; font: inherit; padding: .5rem 1rem; border-radius: 6px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; white-space: nowrap; }
.boton:hover { border-color: var(--primario); color: var(--primario); }
.boton.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-txt); }
.boton.primario:hover { filter: brightness(1.1); color: var(--primario-txt); }
.boton.chico { padding: .25rem .65rem; font-size: .85rem; }
.zona-peligro { margin: -.25rem 0 1rem; text-align: right; }

.aviso { padding: .65rem 1rem; border-radius: 8px; margin-bottom: .6rem; border: 1px solid transparent; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso.alerta { background: var(--alerta-fondo); color: var(--alerta); }
.aviso.error { background: var(--error-fondo); color: var(--error); }

.etiqueta { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--fondo);
  color: var(--tenue); border: 1px solid var(--borde); margin: 0 .2rem .2rem 0; white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.etiqueta.alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; white-space: normal; }
.contador { font-size: .85rem; color: var(--tenue); font-weight: 400; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.indicador { display: flex; flex-direction: column; gap: .2rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: var(--texto); }
.indicador .num { font-size: 1.6rem; font-weight: 700; }
.progreso { height: 6px; background: var(--fondo); border-radius: 3px; overflow: hidden; margin-top: .4rem; }
.progreso i { display: block; height: 100%; background: var(--ok); }

.cuenta { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.cuenta a { text-decoration: none; color: var(--texto); font-size: .9rem; }
.en-linea { display: inline; }
.acceso { display: flex; min-height: 100vh; align-items: flex-start; justify-content: center; }
.caja-acceso { width: 100%; max-width: 420px; padding: 12vh 16px 2rem; }
.marca.grande { font-size: 1.4rem; margin-bottom: 1rem; text-align: center; }
.formulario.una-col { grid-template-columns: 1fr; }
.codigo { font-size: 1.6rem; letter-spacing: .3em; text-align: center; max-width: 12rem; }
.pasos ol { padding-left: 1.2rem; margin: 0; }
.pasos li { margin-bottom: 1rem; }
.qr { margin: .75rem 0; }
.qr img { background: #fff; padding: 6px; border-radius: 8px; }
code.clave { font-size: 1.05rem; letter-spacing: .08em; background: var(--fondo); padding: .1rem .4rem; border-radius: 4px; word-break: break-all; }
.fila-codigo { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
[hidden] { display: none !important; }
.globo { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: var(--primario);
  color: var(--primario-txt); font-size: .75rem; text-align: center; line-height: 1.3em; margin-left: .2rem; }
.globo.alerta { background: #c77700; color: #fff; }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a { padding: .5rem 1rem; text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; }
.pestanas a.activa { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.tipo { font-size: .78rem; font-weight: 600; padding: .1rem .45rem; border-radius: 4px; white-space: nowrap; }
.tipo-arr { background: #e3eefb; color: #1f5f8b; }
.tipo-imp { background: #efe7fb; color: #6a3fa0; }
.tipo-ext { background: #fdeee0; color: #9a5200; }
@media (prefers-color-scheme: dark) {
  .tipo-arr { background: #17324a; color: #8cc4ef; } .tipo-imp { background: #2c2140; color: #c7a8f0; }
  .tipo-ext { background: #3a2a17; color: #f0b878; }
}
.etiqueta.info { background: #e3eefb; color: #1f5f8b; border-color: transparent; }
.etiqueta.error { background: var(--error-fondo); color: var(--error); border-color: transparent; }
.datos { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.datos dt { color: var(--tenue); font-weight: 600; font-size: .9rem; }
.datos dd { margin: 0; }
.grande { font-size: 1.3rem; }
.concepto { font-size: .85rem; color: var(--tenue); margin: .2rem 0; max-width: 60ch; }
tr.con-alerta td { background: var(--alerta-fondo); }
.barra-autorizar { display: flex; gap: 1rem; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid var(--borde); padding-top: 1rem; margin-top: .5rem; }
.barra-autorizar label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; }
.boton.peligro { background: var(--error); border-color: var(--error); color: #fff; }
.opcion { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .35rem; margin-right: 1.25rem; font-weight: 400 !important; }
.opcion input { width: auto; }
.marcar-todo { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.marcar-todo input, td input[type=checkbox], th input[type=checkbox] { width: auto; }
select[size] { padding: .25rem; }
.tipos { border: none; padding: 0; }
.tabla tfoot td { border-top: 2px solid var(--borde); }
.aviso.ok b, .aviso.error b { color: inherit; }
/* Pantalla de elaborar: formulario + lista al lado */
main:has(.area-trabajo) { max-width: 1400px; }
.area-trabajo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 1rem; align-items: start; }
.col-lista { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.col-lista > .tarjeta { margin-bottom: .75rem; }
@media (max-width: 980px) { .area-trabajo { grid-template-columns: 1fr; } .col-lista { position: static; max-height: none; } }
.lista-borr { list-style: none; margin: 0 0 .75rem; padding: 0; }
.lista-borr li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "sel info monto" "sel info acc";
  gap: .1rem .6rem; padding: .55rem .25rem; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.lista-borr li.recien { animation: resaltar 2.5s ease-out; }
.lista-borr li.devuelta { background: var(--alerta-fondo); }
@keyframes resaltar { from { background: var(--ok-fondo); } to { background: transparent; } }
.lista-borr .sel-linea { grid-area: sel; padding-top: .15rem; }
.lista-borr .sel-linea input { width: auto; }
.lista-borr .info { grid-area: info; min-width: 0; }
.lista-borr .monto { grid-area: monto; text-align: right; font-weight: 600; white-space: nowrap; }
.lista-borr .acc { grid-area: acc; text-align: right; white-space: nowrap; }
.lista-borr .acc a, .lista-borr .acc button { text-decoration: none; background: none; border: none; cursor: pointer;
  font-size: 1rem; padding: 0 .2rem; opacity: .75; }
.lista-borr .acc a:hover, .lista-borr .acc button:hover { opacity: 1; }
.total-borr { display: flex; justify-content: space-between; padding: .25rem .25rem .75rem; font-size: 1.05rem; }
.ancho-total { width: 100%; }
.espacio { margin-top: .75rem; }
.previa { border-left: 4px solid var(--primario); }
.previa-encab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.pv-concepto { margin: .5rem 0; text-align: justify; line-height: 1.45; }
.pv-monto { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.pv-monto b { font-size: 1.3rem; }
.muestra-img { max-width: 260px; max-height: 110px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; padding: 4px; display: block; margin: .3rem 0 .6rem; }
.pasos-lista { padding-left: 1.2rem; }
.pasos-lista li { margin-bottom: .9rem; }
.pasos-lista .boton { margin-top: .4rem; }
.resumen-pago { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem .8rem;
  background: var(--fondo); border-radius: 8px; }
.caja-saldo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
input.error { border-color: var(--error); background: var(--error-fondo); }
tr.cubierta td { background: var(--ok-fondo); }
.en-fila { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.en-fila input { width: auto; }
.indicadores.cuatro { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.indicadores.cuatro .num { font-size: 1.35rem; }
.ok-txt { color: var(--ok); }
.alerta-txt { color: var(--alerta); }
.aviso.bloque { display: block; text-decoration: none; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
a.etiqueta { text-decoration: none; font-size: .9rem; padding: .3rem .7rem; }
.tabla-lote td { vertical-align: middle; }
.tabla-lote .ubic { font-size: .85rem; }
.tabla-lote .celda-monto { width: 9.5rem; }
.tabla-lote .monto-lote { text-align: right; }
.tabla-lote .m2 { font-size: .75rem; }
#modos { margin-bottom: .75rem; }
#modos a { cursor: pointer; }
.aviso-flotante { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 10;
  background: var(--ok); color: #fff; padding: .7rem 1.2rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  max-width: calc(100vw - 32px); }
@media (prefers-color-scheme: dark) { .aviso-flotante { color: #0d1a14; } }
.solo-lectura { color: var(--tenue); font-size: .9rem; text-align: right; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: var(--fondo); }