/* Pantallas de emision del cotizador publico (cotizacion enviada, emitir,
   emision registrada). Extraido tal cual del <style> de baseam.html, que se
   elimino: arrastraba la barra y el pie de mgaseguros con enlaces a un
   cotizador de vehiculos que este sistema no tiene.
   Las variables de color vienen de /static/stylecotam/vidasana.css. */

/* ─── HERO ─────────────────────────────── */
        .hero-am {
            background: var(--primary);
            color: #fff;
            padding: calc(var(--lnd-nav-h, 64px) + 2.75rem) 0 4.25rem;
            position: relative; overflow: hidden;}

.hero-am .container { position: relative; z-index: 2;}

.hero-eyebrow {
            display: inline-flex; align-items: center; gap: .5rem;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.22);
            padding: .4rem 1rem;
            border-radius: 999px; font-size: .78rem; font-weight: 600;
            letter-spacing: .06em; text-transform: uppercase;
            margin-bottom: .9rem;
            backdrop-filter: blur(10px);}

.hero-eyebrow i { color: var(--accent-lt);}

.hero-am h1 {
            color: #fff;
            font-size: clamp(1.7rem, 3.2vw, 2.6rem);
            font-weight: 800; margin: 0 0 .5rem;
            letter-spacing: -.02em;}

.hero-am h1 .accent { color: var(--accent-lt);}

.hero-am p { font-size: 1.05rem; opacity: .92; margin: 0; max-width: 620px;}

.hero-trust-row {
            display: flex; gap: 1.25rem; flex-wrap: wrap;
            margin-top: 1.5rem;}

.hero-trust-pill {
            display: inline-flex; align-items: center; gap: .55rem;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.18);
            padding: .55rem .95rem;
            border-radius: 12px;
            font-size: .82rem; font-weight: 500;}

.hero-trust-pill i { color: var(--accent-lt); font-size: .95rem;}

/* ─── LAYOUT ─────────────────────────── */
        .container-am {
            max-width: 1300px; margin: -2.5rem auto 2rem;
            padding: 0 1rem; position: relative; z-index: 3;}

/* ─── CARDS ──────────────────────────── */
        .am-card {
            background: var(--surface);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            overflow: hidden;}

.step-header {
            background: transparent;
            padding: 1.25rem 1.75rem;
            border-bottom: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center;
            gap: 1rem; flex-wrap: wrap;}

.step-header h3 { font-size: 1.1rem; margin: 0; display: flex; align-items: center;}

.step-num {
            display: inline-block; background: var(--primary-xlt); color: var(--primary-lt);
            width: 30px; height: 30px; border-radius: 50%;
            text-align: center; line-height: 30px; font-weight: 800;
            margin-right: .6rem; font-size: .9rem;}

.step-body { padding: 1.5rem 1.75rem;}

.form-control, .form-select {
            border-radius: 10px !important;
            border: 1.5px solid var(--border) !important;
            padding: .6rem .85rem !important;
            font-size: .9rem !important;
            font-family: inherit !important;
            color: var(--text) !important;
            background: #fff !important;
            transition: var(--transition) !important;
            height: auto !important;}

.form-control:focus, .form-select:focus {
            border-color: var(--primary-lt) !important;
            box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important;
            outline: none !important;}

.form-control[readonly] { background: #F8FAFC !important;}

.btn-am-primary {
            background: var(--primary) !important;
            color: #fff !important;
            border: 0 !important;
            box-shadow: var(--shadow-sm) !important;}

.btn-am-primary:hover {
            background: var(--primary-lt) !important;
            box-shadow: var(--shadow) !important;}

.btn-am-outline { background: #fff !important; color: var(--primary) !important; border: 1.5px solid var(--border) !important;}

.btn-am-outline:hover { border-color: var(--primary-lt) !important; color: var(--primary-lt) !important; box-shadow: 0 4px 14px rgba(15, 76, 129, .12) !important;}

.alert-info { background: var(--primary-xlt); color: var(--primary);}

.btn-am-success {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-lt) 100%) !important;
    color: var(--text) !important;
    border: 0 !important;
    font-weight: 700;
    box-shadow: 0 10px 24px -12px rgba(227, 138, 43, .9);
}

.btn-am-success:hover:not(:disabled),
.btn-am-success:focus-visible {
    background: linear-gradient(135deg, var(--accent-lt) 0%, var(--accent) 100%) !important;
    color: var(--text) !important;
    box-shadow: 0 14px 30px -12px rgba(227, 138, 43, 1);
}

.btn-am-success:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

.btn-am-success:disabled {
    opacity: .5;
    box-shadow: none;
    cursor: not-allowed;
}

.terminos-acepta {
    margin-top: .35rem;
}

.terminos-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.terminos-titulo i { margin-right: .35rem; }

.terminos-abrir {
    font-size: .9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.terminos-abrir:hover, .terminos-abrir:focus-visible { color: var(--primary); text-decoration-thickness: 2px; }

.terminos-abrir i { font-size: .75em; margin-left: .15rem; }

.terminos-visor {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.terminos-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.terminos-link:hover { text-decoration-thickness: 2px; }

.terminos-link:focus-visible {
    outline: 3px solid var(--primary-lt);
    outline-offset: 2px;
    border-radius: 4px;
}

.acepta-modal {
    width: min(960px, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    height: min(88vh, 820px);
    padding: 1rem;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.acepta-modal[open] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.acepta-modal::backdrop {
    background: rgba(30, 66, 99, .45);
    backdrop-filter: blur(3px);
}

.acepta-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.acepta-cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--primary-xlt);
    color: var(--primary);
    font-size: 1.15rem;
    cursor: pointer;
}

.acepta-cerrar:hover { background: var(--border); }

.acepta-cerrar:focus-visible { outline: 3px solid var(--primary-lt); outline-offset: 2px; }

.acepta-modal-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.acepta-intro {
    margin: 0 0 .75rem;
    font-size: 1rem;
    color: var(--text);
}

.carencia-resumen {
    display: block;
    margin-top: .2rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--primary);
}

.carencia-destacada {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    background: var(--primary-xlt);
    color: var(--primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.acepta-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.acepta-tabla th {
    position: sticky;
    top: 0;
    padding: .6rem .75rem;
    background: var(--primary-xlt);
    color: var(--primary);
    font-weight: 700;
    text-align: left;
}

.acepta-tabla td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.acepta-tabla td:last-child {
    width: 38%;
    font-weight: 600;
    color: var(--primary);
}

.acepta-modal-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.acepta-modal-botones {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

.acepta-modal-botones .btn { min-height: 2.75rem; padding-inline: 1.1rem; }

.terminos-check {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.terminos-check .form-check-input {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    cursor: pointer;
}

@media (max-width: 540px) {
    .acepta-modal { width: calc(100vw - 1rem); height: calc(100dvh - 1rem); max-height: none; padding: .75rem; }
    .acepta-tabla td:last-child { width: 42%; }
    .acepta-modal-botones { width: 100%; }
    .acepta-modal-botones .btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
    .acepta-modal::backdrop { backdrop-filter: none; }
}