/*
 * Mejoras visuales - Sistema de Acceso Unico de la Abogacia
 * Se carga DESPUES de styles.min.css y styles.mobile.min.css y solo sobrescribe estilos.
 * Para volver al aspecto anterior basta con quitar el <link> a este fichero.
 */

:root {
    --c-navy: #39567d;
    --c-navy-dark: #27405f;
    --c-accent: #1f6fb2;
    --c-bg: #eef1f6;
    --c-card: #ffffff;
    --c-text: #2b3445;
    --c-muted: #6b778c;
    --c-border: #cfd7e3;
    --c-danger: #b3261e;
    --c-danger-bg: #fdecea;
    --c-warn-bg: #fff6df;
    --c-warn: #e8a317;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(25, 40, 65, .06), 0 8px 24px rgba(25, 40, 65, .08);
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--c-bg);
    color: var(--c-text);
    line-height: 1.5;
}

/* ---------- Tarjeta principal ---------- */

/* Titulo (paginas de formulario: va suelto sobre el formulario) */
.title-icon {
    max-width: 860px;
    margin: 24px auto 0;
    padding: 24px 12px 4px;
    background: var(--c-card);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow);
    position: relative;
}

.title-icon .container {
    max-width: 100%;
    /* 18px + 15px de la columna del formulario, para alinear titulo y campos */
    padding-left: 33px !important;
    padding-right: 33px !important;
}

/* Formulario / contenedor de resultado */
.form-filters {
    max-width: 860px;
    margin: 0 auto 28px;
    padding: 4px 12px 20px;
    background: var(--c-card);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
}

.form-filters .container {
    max-width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Paginas de resultado: el titulo va DENTRO de la tarjeta */
.form-filters.block-form-center {
    margin-top: 32px;
    padding-top: 24px;
    border-radius: var(--radius);
}

.form-filters .title-icon {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.form-filters .title-icon .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* El fondo blanco de <main> (estilos base) tapaba el fondo gris: la tarjeta no destacaba */
main {
    background: transparent !important;
}

/* El .container de Bootstrap fija anchos (720px) mayores que la tarjeta: ajustar al contenido */
.title-icon .container,
.form-filters .container {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.form-filters .row {
    margin-left: 0;
    margin-right: 0;
}

/* Unir visualmente las dos mitades de la tarjeta (sin sombra en la juntura) */
.title-icon {
    clip-path: inset(-24px -24px 0 -24px);
}

.form-filters {
    clip-path: inset(0 -24px -24px -24px);
}

.form-filters.block-form-center,
.form-filters .title-icon {
    clip-path: none;
}

/* Boton alineado con los campos (los estilos base lo centraban en su caja) */
.wrap-submit,
.wrap-submit p {
    text-align: left !important;
}

/* ---------- Tipografia ---------- */

.title-icon h2 {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted) !important;
    margin: 0 0 6px;
}

.title-icon h2 + br {
    display: none;
}

.title-icon h3,
.form-filters h3 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-navy) !important;
    margin: 0 0 14px;
}

.title-icon h6 {
    font-size: .98rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--c-text);
    margin: 0 0 12px;
}

/* Cuadro "RECUERDA" (antes fondo amarillo fosforito) */
.title-icon h6 div[style*="f6ffb6"],
.title-icon h6 div[style*="F6FFB6"] {
    background: var(--c-warn-bg) !important;
    border-left: 4px solid var(--c-warn);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .92rem;
}

.form-filters p,
.form-filters li {
    font-size: .98rem;
}

.form-filters ul {
    padding-left: 20px;
}

.form-filters li {
    margin-bottom: 8px;
}

a {
    color: var(--c-accent);
}

a:hover {
    color: var(--c-navy-dark);
}

/* ---------- Campos ---------- */

.form-filters label {
    font-size: .95rem;
    color: var(--c-text);
}

.form-filters input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.form-filters select,
.form-filters textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 1rem;
    color: var(--c-text);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-filters input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
.form-filters select:focus,
.form-filters textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(31, 111, 178, .2);
}

.form-filters input[type="radio"],
.form-filters input[type="checkbox"] {
    accent-color: var(--c-navy);
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Casilla de aceptacion de terminos: junto a su texto */
.form-filters input#termAcceptance {
    float: left;
    margin: 3px 10px 0 0;
}

.form-filters input#termAcceptance + label {
    display: block;
    overflow: hidden;
    margin-bottom: 14px;
    line-height: 1.45;
}

.select-label {
    margin-bottom: 10px;
}

.select-label label.radio-inline {
    margin: 0 18px 0 0;
    font-weight: 500;
    cursor: pointer;
}

/* ---------- Botones ---------- */

.btn.btn-blue,
.form-filters .btn-blue {
    display: inline-block;
    width: 100% !important;
    max-width: 340px;
    min-width: 200px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff !important;
    background: var(--c-navy);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(39, 64, 95, .25);
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

.btn.btn-blue:hover,
.form-filters .btn-blue:hover {
    background: var(--c-navy-dark);
    box-shadow: 0 4px 10px rgba(39, 64, 95, .3);
}

.btn.btn-blue:active {
    transform: translateY(1px);
}

.btn.btn-blue:focus-visible {
    outline: 3px solid rgba(31, 111, 178, .45);
    outline-offset: 2px;
}

.wrap-submit {
    width: 100% !important;
    max-width: 340px;
}

/* Menos aire vertical: los <br> del marcado y los margenes inferiores dejaban la tarjeta muy alta
   (el pie quedaba fuera de pantalla y aparecia scroll) */
.wrap-submit + br,
.wrap-submit p br {
    display: none;
}

.form-filters .mB30 {
    margin-bottom: 0;
}

.form-filters .wrap-inputs-politica {
    margin: 0;
}

#danger {
    margin: 0;
    padding: 0;
}

/* ---------- Avisos / errores ---------- */

#error:not(:empty) {
    display: block;
    padding: 10px 14px;
    font-size: .92rem;
    color: var(--c-danger);
    background: var(--c-danger-bg);
    border: 1px solid #f5c2be;
    border-radius: 8px;
}

.alert.alert-light {
    background: none;
    border: 0;
    padding: 6px 0 0;
    margin-bottom: 0;
    width: auto !important;
    max-width: 100%;
    font-size: .8rem;
    color: var(--c-muted);
    opacity: .85 !important;
}

/* ---------- Pagina de resultado ---------- */

.module-sent img {
    max-width: 72px;
    height: auto;
}

.module-sent .row,
.form-filters .title-icon .row {
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}

/* Contenedores anidados: evitar que se acumulen los margenes */
.module-sent .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.module-sent .col12 {
    padding: 0 15px !important;
}

/* Listas de las paginas de resultado: sin sangrado excesivo */
.module-sent ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.module-sent li {
    margin-bottom: 10px;
}

/* Icono de aviso (!) pequeno, junto al titulo */
.module-sent img[src*="icono-exclama"] {
    width: 28px !important;
    height: auto;
}

.module-sent h3 {
    margin-top: 0;
}

/* ---------- Movil ---------- */

@media only screen and (max-width: 568px) {
    body {
        background: #fff;
    }

    .title-icon,
    .form-filters,
    .form-filters.block-form-center {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .title-icon {
        margin-top: 0;
        padding-top: 20px;
    }

    .form-filters.block-form-center {
        margin-top: 0;
    }

    .title-icon h2 {
        font-size: .8rem;
    }

    .title-icon h3,
    .form-filters h3 {
        font-size: 1.3rem;
    }

    .title-icon h6,
    .form-filters p,
    .form-filters li,
    .form-filters label {
        font-size: .95rem;
    }

    .btn.btn-blue,
    .wrap-submit {
        max-width: none;
    }
}

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