/* --------------------------------------------------------------------------
   Generador de cuenta de cobro
   Layout de dos columnas: formulario + hoja en vivo.
   -------------------------------------------------------------------------- */

:root {
    --tinta:        #0b0d12;
    --tinta-2:      #3f4753;
    --gris:         #6b7482;
    --gris-suave:   #9aa3b0;
    --linea:        #e6e9ee;
    --linea-fuerte: #d3d8e0;
    --lienzo:       #f4f5f8;
    --panel:        #ffffff;

    --acento:       #0e7c66;
    --acento-alto:  #0a6252;
    --acento-tenue: #e8f4f0;

    --error:        #b42318;
    --error-tenue:  #fef3f2;
    --error-linea:  #fda29b;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    --sombra-sm: 0 1px 2px rgba(11, 13, 18, .05);
    --sombra-md: 0 4px 16px -4px rgba(11, 13, 18, .1), 0 2px 6px -2px rgba(11, 13, 18, .05);
    --sombra-hoja: 0 24px 60px -20px rgba(11, 13, 18, .22), 0 4px 12px -4px rgba(11, 13, 18, .08);

    --nav: 62px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-feature-settings: 'cv11', 'ss01';
    color: var(--tinta);
    background: var(--lienzo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.022em; line-height: 1.2; }

/* ============================================================== barra === */
.barra {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 24px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--linea);
}
.marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 640;
    font-size: 15px;
    color: var(--tinta);
    text-decoration: none;
}
.marca-glifo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--acento);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--acento-alto);
    background: var(--acento-tenue);
    border: 1px solid rgba(14, 124, 102, .16);
    border-radius: 999px;
    padding: 5px 12px 5px 10px;
}
.pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acento);
}
.pill-off {
    color: var(--error);
    background: var(--error-tenue);
    border-color: var(--error-linea);
}
.pill-off::before { background: var(--error); }

/* =============================================================== hero === */
.hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 52px 24px 34px;
    text-align: center;
}
.hero h1 {
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.035em;
}
.bajada {
    font-size: 17px;
    color: var(--gris);
    margin: 0 auto;
    max-width: 54ch;
}
.sellos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 22px;
    font-size: 13px;
    color: var(--gris);
}
.sellos span { display: inline-flex; align-items: center; gap: 6px; }
.sellos svg { color: var(--acento); flex-shrink: 0; }

/* ============================================================ tablero === */
.tablero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 30px;
    align-items: start;
}

/* -------------------------------------------------------- formulario --- */
.formulario fieldset { border: 0; margin: 0; padding: 0; }
.formulario.desactivado { opacity: .5; pointer-events: none; }

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-sm);
    padding: 24px;
    margin-bottom: 16px;
}
.tarjeta > h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 620;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.paso {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--acento-tenue);
    color: var(--acento-alto);
    font-size: 12px;
    font-weight: 680;
}
.tarjeta > h2 small {
    margin-left: auto;
    font-size: 12px;
    font-weight: 450;
    color: var(--gris-suave);
}

.fila { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 15px; }
.fila:last-child { margin-bottom: 0; }
.fila label { flex: 1 1 190px; display: block; min-width: 0; }
.fila label.ancho { flex-basis: 100%; }
.fila label.chico { flex: 0 1 170px; }

label > span {
    display: block;
    font-size: 12.5px;
    font-weight: 560;
    color: var(--tinta-2);
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    font: inherit;
    font-size: 14.5px;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: var(--gris-suave); }
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7482' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 32px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3.5px rgba(14, 124, 102, .13);
}
.campo-error input, .campo-error textarea, .campo-error select {
    border-color: var(--error-linea);
    background: var(--error-tenue);
}
.ayuda {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 550;
    letter-spacing: .01em;
    color: var(--acento-alto);
    min-height: 14px;
}

.prefijo { position: relative; }
.prefijo input { padding-left: 27px; }
.prefijo::before {
    content: '$';
    position: absolute;
    left: 12px;
    top: 31px;
    font-size: 14.5px;
    font-weight: 560;
    color: var(--gris);
    pointer-events: none;
}

/* ------------------------------------------------------------ botones --- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 580;
    color: #fff;
    background: var(--acento);
    border: 1px solid var(--acento);
    border-radius: var(--r-sm);
    padding: 10px 18px;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s, transform .08s, box-shadow .14s;
}
.boton:hover { background: var(--acento-alto); border-color: var(--acento-alto); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.boton-grande {
    width: 100%;
    padding: 14px;
    font-size: 15.5px;
    border-radius: var(--r-md);
    box-shadow: 0 6px 18px -6px rgba(14, 124, 102, .5);
}
.boton-suave {
    color: var(--tinta);
    background: #fff;
    border-color: var(--linea-fuerte);
    box-shadow: var(--sombra-sm);
}
.boton-suave:hover { background: #f7f8fa; border-color: var(--gris-suave); }

/* ----------------------------------------------------- consentimiento --- */
.consentimiento {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    padding: 15px 17px;
    margin-top: 4px;
    cursor: pointer;
}
.consentimiento:hover { border-color: var(--linea-fuerte); }
.consentimiento input {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin: 1px 0 0;
    accent-color: var(--acento);
    cursor: pointer;
}
.consentimiento span {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--gris);
}

.acciones { margin-top: 20px; }
.fino {
    font-size: 12.5px;
    color: var(--gris);
    margin: 12px 0 0;
    text-align: center;
}

/* ============================================== hoja de vista previa === */
.panel-hoja { position: sticky; top: calc(var(--nav) + 22px); }
.panel-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gris-suave);
}
.panel-vivo { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.punto-vivo {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 0 rgba(14, 124, 102, .5);
    animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
    0%   { box-shadow: 0 0 0 0 rgba(14, 124, 102, .45); }
    70%  { box-shadow: 0 0 0 7px rgba(14, 124, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 124, 102, 0); }
}

.hoja {
    background: #fff;
    border-radius: 6px;
    box-shadow: var(--sombra-hoja);
    padding: 40px 42px;
    font-size: 12px;
    line-height: 1.55;
    color: #1a1a1a;
    /* Proporcion carta como minimo; si el concepto es largo la hoja crece en
       vez de recortar el contenido. */
    aspect-ratio: 8.5 / 11;
}

/* Documento (compartido con la plantilla PHP, en escala reducida). */
.hoja .encabezado { text-align: center; margin-bottom: 22px; }
.hoja .encabezado h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 3px;
}
.hoja .consecutivo { font-size: 10px; color: #666; margin: 0; }
.hoja .lugar-fecha { text-align: right; margin: 0 0 18px; font-size: 11px; }
.hoja .bloque { margin-bottom: 14px; }
.hoja .rotulo {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #7a7a7a;
    margin: 0 0 2px;
}
.hoja .nombre { font-size: 13px; font-weight: 700; margin: 0; }
.hoja .meta { margin: 1px 0 0; font-size: 10.5px; color: #555; }
.hoja .debe { text-align: center; font-weight: 700; letter-spacing: .28em; margin: 18px 0; font-size: 11px; }
.hoja .concepto {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    padding: 11px 0;
    margin-bottom: 14px;
}
.hoja .concepto p { margin: 0; white-space: pre-line; }
.hoja .periodo { margin: 6px 0 0; font-size: 10.5px; color: #666; }
.hoja .total { width: 100%; border-collapse: collapse; }
.hoja .total td { padding: 5px 0; vertical-align: bottom; }
.hoja .total .etq { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: #7a7a7a; }
.hoja .total .cifra { text-align: right; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.hoja .letras { font-size: 9.5px; color: #666; margin: 2px 0 18px; font-style: italic; }
.hoja .pago { border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px 12px; margin-bottom: 26px; }
.hoja .pago table { width: 100%; border-collapse: collapse; }
.hoja .pago td { font-size: 10.5px; padding: 1px 0; }
.hoja .pago td.k { color: #777; width: 36%; }
.hoja .firma { margin-top: 34px; }
.hoja .linea { border-top: 1px solid #1a1a1a; width: 58%; padding-top: 4px; }
.hoja .linea p { margin: 0; font-size: 10px; }
.hoja .linea .n { font-weight: 700; font-size: 11px; }
.hoja .vacio { color: #c4c4c4; font-style: italic; font-weight: 400; }

/* ============================================================= avisos === */
.aviso {
    border-radius: var(--r-md);
    padding: 15px 18px;
    margin-bottom: 18px;
}
.aviso-error {
    background: var(--error-tenue);
    border: 1px solid var(--error-linea);
    color: var(--error);
    font-size: 14px;
}
.aviso-error ul { margin: 6px 0 0; padding-left: 20px; }
.aviso-tope {
    background: linear-gradient(180deg, #fffdf6, #fffaeb);
    border: 1px solid #f2d98c;
}
.aviso-tope h2 { margin: 0 0 6px; font-size: 18px; }
.aviso-tope p { margin: 0 0 10px; color: var(--tinta-2); }

/* ========================================================== comercial === */
.anuncio { margin: 30px auto; max-width: 728px; text-align: center; }
.anuncio-rotulo {
    display: block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #b3bac4;
    margin-bottom: 5px;
}
.afiliado {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-left: 3px solid var(--acento);
    border-radius: var(--r-md);
    box-shadow: var(--sombra-sm);
    padding: 20px 22px;
    margin: 26px 0;
}
.afiliado-titulo { font-weight: 640; margin: 0 0 5px; }
.afiliado-texto { margin: 0 0 14px; color: var(--tinta-2); font-size: 14.5px; }
.afiliado-nota { margin: 10px 0 0; font-size: 11px; color: var(--gris-suave); }

/* ========================================================== contenido === */
.contenido {
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 24px 64px;
}
.contenido h2 { font-size: 23px; font-weight: 660; margin: 40px 0 12px; }
.contenido p { color: var(--tinta-2); }
.lista { color: var(--tinta-2); padding-left: 4px; list-style: none; }
.lista li { position: relative; padding-left: 24px; margin-bottom: 7px; }
.lista li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acento);
    opacity: .55;
}

details {
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    background: var(--panel);
    padding: 14px 18px;
    margin-bottom: 10px;
}
details summary {
    cursor: pointer;
    font-weight: 570;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
    content: '+';
    color: var(--gris-suave);
    font-size: 19px;
    line-height: 1;
    font-weight: 400;
}
details[open] summary::after { content: '–'; }
details p { margin: 10px 0 0; font-size: 14.5px; }

.pie {
    border-top: 1px solid var(--linea);
    padding: 26px 24px 46px;
    font-size: 12.5px;
    color: var(--gris);
    text-align: center;
}

/* ====================================================== vista previa === */
.vista-previa { background: var(--lienzo); }
.acciones-previa {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 26px 24px 24px;
}
.hoja-final {
    max-width: 816px;
    margin: 0 auto 60px;
    background: #fff;
    padding: 62px 68px;
    border-radius: 6px;
    box-shadow: var(--sombra-hoja);
}

/* ============================================================ impresion === */
@media print {
    .no-print, .acciones-previa, .barra, .pie { display: none !important; }
    body, .vista-previa { background: #fff; }
    .hoja-final { box-shadow: none; padding: 0; max-width: none; margin: 0; }
}

/* ============================================================ responsive === */
@media (max-width: 1020px) {
    .tablero { grid-template-columns: minmax(0, 1fr); }
    /* El formulario va primero: en una columna, la hoja arriba solo empuja
       hacia abajo lo unico que el usuario vino a hacer. */
    .panel-hoja { position: static; }
    .hoja { aspect-ratio: auto; padding: 34px 32px; }
}

@media (max-width: 620px) {
    .hero { padding: 34px 20px 26px; }
    .tablero { padding: 0 16px 56px; gap: 22px; }
    .tarjeta { padding: 19px 17px; border-radius: var(--r-md); }
    .fila label, .fila label.chico { flex-basis: 100%; }
    .hoja { padding: 26px 22px; }
    .hoja-final { padding: 30px 24px; }
    .contenido { padding: 8px 20px 52px; }
    .barra { padding: 0 16px; }
    .pill { font-size: 11.5px; padding: 4px 10px 4px 9px; white-space: nowrap; }
    .marca { font-size: 14px; white-space: nowrap; }
    .hero h1 { font-size: 30px; }
    .bajada { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}