:root {
    --verde: #669966;
    --verde-oscuro: #0b614b;
    --naranja: #f7be81;
    --texto: #1f2a24;
    --fondo: #f4f6f4;
    --error: #a3271f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: var(--fondo);
}

.cabecera {
    background: var(--verde);
    color: #fff;
    padding: 1rem 1.5rem;
}
.cabecera h1 { margin: 0; font-size: 1.4rem; }
.cabecera p { margin: .25rem 0 0; opacity: .9; }

.contenedor { max-width: 32rem; margin: 2rem auto; padding: 0 1rem; }

.tarjeta {
    background: #fff;
    border: 1px solid #d5ddd6;
    border-radius: 8px;
    padding: 1.5rem;
}
.tarjeta h2 { margin-top: 0; }

.formulario { display: grid; gap: 1rem; margin-bottom: 1rem; }
.formulario label { display: grid; gap: .35rem; font-weight: 600; }
.formulario input { font-size: 1rem; padding: .55rem .65rem; border: 1px solid #b7c2b9; border-radius: 6px; }
.formulario small { font-weight: 400; color: #556; }

.boton, .boton-secundario {
    font-size: 1rem;
    padding: .6rem 1.2rem;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.boton { background: var(--verde-oscuro); color: #fff; border: 0; }
.boton:hover { background: #084a39; }
.boton-secundario { background: #fff; color: var(--verde-oscuro); border: 1px solid var(--verde-oscuro); }

.acciones { display: flex; gap: .75rem; flex-wrap: wrap; }

.alerta { padding: .75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.alerta-error { background: #fbe9e7; color: var(--error); }
.alerta-ok { background: #e8f3ea; color: var(--verde-oscuro); }
.alerta-aviso { background: #fff3e0; color: #7a4a00; }
ul.alerta { padding-left: 2rem; }

.clave-temporal { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; letter-spacing: .15em; }
.ayuda { font-size: .9rem; color: #556; }
.oculto { display: none; }

.tarjeta-ancha { max-width: 60rem; margin: 0 auto; }
.contenedor:has(.tarjeta-ancha) { max-width: 62rem; }
.encabezado-periodo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.encabezado-periodo h2 { margin-bottom: .25rem; }
.encabezado-periodo p { margin: 0; }
.periodo { font-size: 1.1rem; }

.tabla-desplazable { overflow-x: auto; margin-bottom: 1rem; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid #e1e7e2; text-align: left; vertical-align: top; }
.tabla th { background: #eef3ef; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla tfoot td { background: #f8faf8; }
.tabla tr.total td { background: var(--naranja); font-weight: 700; font-size: 1.05rem; }
.boton:disabled { opacity: .55; cursor: not-allowed; }

/* Formulario de declaración */
.rubros { display: grid; gap: .75rem; margin: 1rem 0; }
.rubro {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(12rem, 2fr) minmax(7rem, 1fr);
    gap: .75rem 1rem;
    align-items: start;
    padding: .75rem;
    border: 1px solid #dde3de;
    border-radius: .5rem;
}
.rubro-titulo { display: grid; gap: .15rem; }
.rubro-titulo small, .rubro-importe small, .resumen-liquidacion small { color: #5b6b62; }
.rubro-campos { display: grid; gap: .5rem; }
.campo { display: grid; gap: .2rem; font-size: .9rem; }
.campo input {
    font: inherit;
    padding: .45rem .55rem;
    border: 1px solid #b9c4bc;
    border-radius: .35rem;
    text-align: right;
    width: 100%;
}
.campo input:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.campo input[aria-invalid="true"] { border-color: var(--error); background: #fdf3f2; }
.error-campo { color: var(--error); min-height: 0; }
.error-campo:empty { display: none; }
.formulario .campo input, .formulario .campo textarea { text-align: left; font-variant-numeric: normal; }
.formulario .campo textarea { font: inherit; padding: .45rem .55rem; border: 1px solid #b9c4bc; border-radius: .35rem; resize: vertical; width: 100%; }
.leyenda-dfe { font-size: .85rem; }
.rubro-importe { display: grid; justify-items: end; gap: .2rem; font-variant-numeric: tabular-nums; }
.rubro-importe output { font-weight: 600; }
.resumen-liquidacion { width: 100%; }
.resumen-liquidacion output { font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
    .rubro { grid-template-columns: 1fr; }
    .rubro-importe { justify-items: start; grid-auto-flow: column; justify-content: space-between; }
}

/* Pago con e-Pagos: elección del medio de pago */
.convenios { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.convenio { border: 1px solid #d6ddd9; border-radius: 8px; padding: .75rem 1rem; }
.convenio form { margin: 0; }
.convenio .boton { min-width: 16rem; text-align: left; }
.convenio .logos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.convenio .logos img { height: 34px; width: auto; max-width: 90px; object-fit: contain; background: #fff; border: 1px solid #e3e7e5; border-radius: 4px; padding: 2px; }
.logo-epagos { max-height: 70px; max-width: 100%; }
@media (max-width: 30rem) { .convenio .boton { min-width: 0; width: 100%; } }