:root {
  --fondo: #f6f5f8; --card: #ffffff; --texto: #1d1b22; --suave: #6b6776; --borde: #e3e0e8;
  --acento: #6d3fc0; --acento-suave: #efe8fb; --rojo: #c62f3a; --rojo-suave: #fdecee; --verde: #1f8a4c; --verde-suave: #e6f4ec;
  --ambar: #a86400; --ambar-suave: #fdf3e2; --radio: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--fondo); color: var(--texto); font-size: 15px; }
[hidden] { display: none !important; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 18px; margin: 0 0 16px; }
.marca { font-weight: 700; letter-spacing: .2px; font-size: 18px; }
.marca b { color: var(--acento); }

.btn { font: inherit; border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; font-weight: 600; }
.btn.primario { background: var(--acento); color: #fff; width: 100%; }
.btn.primario:disabled { opacity: .5; cursor: wait; }
.btn.texto { background: none; color: var(--suave); padding: 8px 10px; }
.btn.blanco { background: #fff; color: var(--rojo); padding: 8px 14px; }
.btn.chico { padding: 7px 12px; font-size: 14px; background: var(--acento-suave); color: var(--acento); width: auto; }

.card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 16px; }
label { display: block; font-weight: 500; margin-bottom: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; font: inherit; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
input[type=file] { padding: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); border-color: transparent; }
.opc { color: var(--suave); font-weight: 400; font-size: 13px; }
.nota { color: var(--suave); font-size: 13px; margin: 0 0 12px; }
.error { color: var(--rojo); margin: 12px 0 0; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; }
legend { font-weight: 500; margin-bottom: 6px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { margin: 0; font-weight: 500; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.opciones label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opciones input { width: auto; margin: 0; }
.opciones small { color: var(--suave); font-weight: 400; }
.total { margin: 6px 0 14px; font-size: 16px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; }

.barra { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--borde); }
.barra-der { display: flex; gap: 8px; align-items: center; color: var(--suave); font-size: 14px; }
.aviso { background: var(--rojo); color: #fff; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.tabs { display: flex; gap: 4px; padding: 12px 20px 0; max-width: 820px; margin: 0 auto; overflow-x: auto; }
.tabs button { font: inherit; border: 0; background: none; padding: 10px 14px; border-radius: 10px 10px 0 0; color: var(--suave); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tabs button.activo { color: var(--acento); box-shadow: inset 0 -2px 0 var(--acento); }
.contenido { max-width: 820px; margin: 0 auto; padding: 16px 20px 40px; }

.progreso { height: 8px; background: var(--acento-suave); border-radius: 8px; margin-bottom: 14px; position: relative; }
.progreso div { height: 100%; width: 0; background: var(--acento); border-radius: 8px; transition: width .2s; }
.progreso span { position: absolute; top: 12px; font-size: 13px; color: var(--suave); }
.ok { border-color: var(--verde); background: var(--verde-suave); }

.resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resumen b { display: block; font-size: 24px; margin-top: 4px; }
.etq { color: var(--suave); font-size: 13px; }
.cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.cab h2 { margin: 0; }
.cab select { width: auto; margin: 0; }
.lista .item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--borde); }
.item .principal { font-weight: 600; }
.item .sec { color: var(--suave); font-size: 13px; }
.estado { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 20px; justify-self: end; align-self: start; }
.estado.Recibido { background: var(--ambar-suave); color: var(--ambar); }
.estado.En.proceso, .estado.proceso { background: var(--acento-suave); color: var(--acento); }
.estado.Listo { background: var(--verde-suave); color: var(--verde); }
.estado.Cancelado { background: #eee; color: var(--suave); }
.item a { color: var(--acento); font-weight: 600; font-size: 14px; }
.vacio { color: var(--suave); padding: 16px 0; }

.liq .cab { margin-bottom: 4px; }
.tabla { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.tabla td { padding: 8px 0; border-top: 1px solid var(--borde); }
.tabla td:last-child { text-align: right; white-space: nowrap; }
.tabla tr.total td { font-weight: 700; font-size: 16px; }
.medios { display: grid; gap: 10px; margin-top: 12px; }
.medio { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.medio .cab { margin: 0 0 6px; }
.medio pre { white-space: pre-wrap; font: 13px/1.5 Inter, sans-serif; margin: 0; color: var(--suave); }
.estado-liq { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--acento-suave); color: var(--acento); }
.estado-liq.vencida { background: var(--rojo-suave); color: var(--rojo); }
.estado-liq.cobrada { background: var(--verde-suave); color: var(--verde); }

dialog { border: 0; padding: 0; background: none; width: min(460px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(20, 16, 30, .45); }
.acciones { display: flex; gap: 8px; justify-content: flex-end; }
.acciones .btn.primario { width: auto; }

@media (max-width: 600px) {
  .fila, .resumen { grid-template-columns: 1fr; }
  .contenido, .tabs { padding-left: 16px; padding-right: 16px; }
  .aviso { flex-direction: column; align-items: flex-start; }
}
.medio .btn.chico { display: inline-block; margin-top: 10px; text-decoration: none; }