:root {
    color-scheme: light;
    font-family: "Inter", system-ui, sans-serif;
    background: #f3f6fa;
    color: #17283c;
    --texto-secundario: #506377;
    --linea: #d8e2ed;
    --primario: #124f83;
    --azul-oscuro: #112b45;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--primario); text-underline-offset: .2em; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #ce6909; outline-offset: 3px; }
[hidden] { display: none !important; }
.contenedor { width: min(100% - 2rem, 48rem); margin-inline: auto; }
.barra { background: var(--azul-oscuro); color: white; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4.25rem; }
.barra a, .barra .link { color: white; }
.marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 750; text-decoration: none; }
.monograma { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #ffbe67; color: var(--azul-oscuro); }
nav { display: flex; align-items: center; gap: .9rem; font-size: .9rem; }
main { flex: 1; padding-block: clamp(1.75rem, 5vw, 4rem); }
h1 { margin: 0 0 .55rem; font-size: clamp(1.75rem, 5vw, 2.65rem); line-height: 1.13; letter-spacing: -.035em; }
h2 { margin: 0 0 1rem; font-size: 1.17rem; letter-spacing: -.015em; }
p { line-height: 1.5; }
.subtitulo { margin: 0 0 1.6rem; color: var(--texto-secundario); overflow-wrap: anywhere; }
.panel { background: white; border: 1px solid var(--linea); border-radius: 1rem; padding: clamp(1rem, 3vw, 1.5rem); box-shadow: 0 5px 16px #16375508; }
.estrecho { max-width: 27rem; margin-inline: auto; }
.estrecho h1 { margin-bottom: 1.25rem; }
.formatos, .historial, .apilado { display: grid; gap: .9rem; }
.formato, .registro { display: flex; align-items: center; gap: .95rem; color: inherit; text-decoration: none; }
.formato:hover, .registro:hover { border-color: #7398bc; }
.formato strong { font-size: 1.08rem; }
.logo-formato { flex: none; width: clamp(4.65rem, 15vw, 7rem); height: 3.5rem; object-fit: contain; }
small { display: block; margin-top: .3rem; color: var(--texto-secundario); line-height: 1.4; }
.flecha, .folio { margin-left: auto; flex: none; color: var(--primario); }
.volver { display: inline-block; margin-bottom: 1rem; font-size: .95rem; }
.campos, .item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.ancho { grid-column: 1 / -1; }
label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 650; }
input, select { width: 100%; min-width: 0; min-height: 2.85rem; border: 1px solid #aebed0; border-radius: .55rem; background: white; padding: .55rem .65rem; color: inherit; font-size: 1rem; font-weight: 450; }
input[type="date"], input[type="time"] { appearance: none; }
.item { margin: 0; min-width: 0; border: 1px solid var(--linea); border-radius: .65rem; padding: .8rem; }
.item legend { padding-inline: .25rem; color: var(--texto-secundario); font-size: .9rem; }
#filas { margin-block: 1rem; }
button { cursor: pointer; padding: .68rem 1rem; min-height: 2.8rem; border: 1px solid transparent; border-radius: .6rem; background: var(--primario); color: white; font-weight: 700; }
button:hover { filter: brightness(.92); }
button:disabled { opacity: .6; cursor: default; }
.secundario { color: var(--primario); background: #e8f1fc; }
.link { justify-self: start; padding: .35rem 0; background: transparent; color: var(--primario); border: 0; text-decoration: underline; text-underline-offset: .2em; }
.resumen { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.resumen output { font-weight: 650; }
.acciones { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; }
.descargas { margin-top: .85rem; }
.hoja { display: block; max-width: 39rem; margin: 1rem auto 0; box-shadow: 0 8px 28px #12304d23; }
.hoja img { display: block; width: 100%; height: auto; }
.historial { margin-block: 1.25rem; }
.registro strong { overflow-wrap: anywhere; }
.error { border: 1px solid #edb3ad; border-radius: .65rem; color: #842320; background: #ffefed; padding: .85rem; margin: 0 0 1rem; }
#mensaje-compartir:empty { display: none; }
footer { border-top: 1px solid var(--linea); text-align: center; padding-block: 1.25rem; font-size: .85rem; color: var(--texto-secundario); }

@media (max-width: 32rem) {
    .contenedor { width: calc(100% - 1.5rem); }
    .cabecera { min-height: 3.65rem; }
    nav { gap: .65rem; }
    .campos { grid-template-columns: minmax(0, 1fr); }
    .resumen button { width: 100%; }
    .exportacion button { flex: 1 0 9rem; }
}