/* ==========================================================================
   FORMS.CSS
   Sistema de estilos unificado para TODOS los formularios del sitio.
   --------------------------------------------------------------------------
   ORIGEN: extraído y generalizado a partir de avisos-new-view.php (rediseño mobile-first, acordeón con cards, acento naranja).

   NAMESPACE: todo selector relevante empieza con ".fm-" (Form).
   Esto es a propósito, para que estos estilos NUNCA choquen con:
     - Bootstrap / Bootstrap Material Design ya cargado en el sitio
     - estilos propios de cada página particular
     - librerías de terceros (selects, date-pickers, etc.)

   CÓMO USARLO EN UNA PÁGINA NUEVA:
     1. Envolver el formulario en un contenedor con clase "fm-wrap".
     2. Usar las clases de este archivo para header, campos, botones, etc.
     3. Si esa página necesita un ajuste MUY puntual y único, ese ajuste va en el <style> propio de esa página, nunca acá.
     4. Si el ajuste sirve para más de un formulario -> se agrega ACÁ.

   Requiere (en el <head> o antes de este archivo):
     <link rel="stylesheet" href=".../vistas/css/fonts.css">
     <link rel="stylesheet" href=".../vistas/css/forms.css">
   ========================================================================== */


/* ══════════════════════════════════════
   1. VARIABLES GLOBALES (paleta y tipografía)
   Cambiar acá impacta en TODOS los formularios que usen forms.css
══════════════════════════════════════ */
:root {
    /* Tipografía */
    --fm-font: 'Nunito', sans-serif;

    /* Color de acento principal (campos activos, íconos, botón guardar secundario, links) */
    --fm-color-acento: #ff6200;
    --fm-color-acento-bg: #fff3eb;
    --fm-color-acento-bg-focus: rgba(255, 98, 0, .1);
    --fm-color-acento-shadow: rgba(255, 98, 0, .35);

    /* Color de header / marca (podés tener uno por sección si hace falta) */
    --fm-color-header: #D59825;

    /* Textos */
    --fm-color-texto: #1a1a1a;
    --fm-color-texto-suave: #555;
    --fm-color-texto-muted: #888;
    --fm-color-texto-disabled: #bbb;

    /* Fondos y bordes */
    --fm-color-fondo-page: #f4f2ee;
    --fm-color-fondo-card: #fff;
    --fm-color-fondo-input: #fafafa;
    --fm-color-borde: #e8e4e0;
    --fm-color-borde-suave: #ede9e4;

    /* Estados / colores de íconos del acordeón */
    --fm-icon-naranja-bg: #fff3eb;
    --fm-icon-naranja-fg: #ff6200;
    --fm-icon-azul-bg: #e8f0fe;
    --fm-icon-azul-fg: #1a73e8;
    --fm-icon-verde-bg: #e8f9f0;
    --fm-icon-verde-fg: #16a34a;
    --fm-icon-violeta-bg: #f3e8ff;
    --fm-icon-violeta-fg: #7c3aed;

    /* Radios */
    --fm-radius-card: 16px;
    --fm-radius-input: 10px;
    --fm-radius-btn: 14px;
}


/* ══════════════════════════════════════
   2. BASE / WRAPPER
   Todo formulario nuevo arranca envuelto en .fm-wrap
══════════════════════════════════════ */
.fm-wrap * {
    box-sizing: border-box;
}

.fm-wrap {
    font-family: var(--fm-font);
    background: var(--fm-color-fondo-page);
    min-height: 100vh;
    padding: 0 0 3rem;
}


/* ══════════════════════════════════════
   3. HEADER DEL FORMULARIO
══════════════════════════════════════ */
.fm-header {
    background: var(--fm-color-header);
    padding: 16px 16px 14px;
    margin-bottom: 16px;
}

.fm-header-title {
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    margin-top: 10px;
}

.fm-header-sub {
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
    font-weight: 600;
    padding-left: 2px;
}

/* .fm-header-title i {
    color: #48bb78;
    font-size: 22px;
    -webkit-text-stroke: 0.6px #48bb78;
    text-stroke: 0.6px #48bb78;
} */

/* ══════════════════════════════════════
   BOTÓN REDONDO DE AYUDA (esquina del header)
══════════════════════════════════════ */
.fm-btn-ayuda {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: white !important;
    background: #48bb78 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s, transform .15s;
    font-weight: 900;
    font-size: 22px;
    font-family: var(--fm-font);
}

/* ══════════════════════════════════════
   4. ACORDEÓN (secciones colapsables del form)
   Se scopea a ".fm-wrap .accordion..." porque "accordion" y
   "accordion-button" son clases DE BOOTSTRAP: no las tocamos
   globalmente, solo cuando están dentro de un .fm-wrap.
══════════════════════════════════════ */
.fm-wrap .accordion {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fm-wrap .accordion-item {
    background: var(--fm-color-fondo-card);
    border-radius: var(--fm-radius-card) !important;
    border: 1px solid var(--fm-color-borde-suave) !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.fm-wrap .accordion-button {
    font-family: var(--fm-font) !important;
    background: var(--fm-color-fondo-card) !important;
    color: var(--fm-color-texto) !important;
    box-shadow: none !important;
    border-radius: var(--fm-radius-card) !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.fm-wrap .accordion-button::after {
    filter: none !important;
    background-image: none !important;
    content: '\F282' !important;
    font-family: 'bootstrap-icons' !important;
    font-size: 14px !important;
    color: #aaa !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    transition: transform .2s !important;
}

.fm-wrap .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
}

.fm-wrap .accordion-button:not(.collapsed) {
    border-radius: var(--fm-radius-card) var(--fm-radius-card) 0 0 !important;
    border-bottom: 1px solid var(--fm-color-borde-suave) !important;
}

.fm-wrap .accordion-body {
    padding: 16px 14px !important;
    background: var(--fm-color-fondo-card);
}

/* Ícono redondo a la izquierda del título del acordeón */
.fm-acc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.fm-acc-icon.naranja {
    background: var(--fm-icon-naranja-bg);
    color: var(--fm-icon-naranja-fg);
}

.fm-acc-icon.azul {
    background: var(--fm-icon-azul-bg);
    color: var(--fm-icon-azul-fg);
}

.fm-acc-icon.verde {
    background: var(--fm-icon-verde-bg);
    color: var(--fm-icon-verde-fg);
}

.fm-acc-icon.violeta {
    background: var(--fm-icon-violeta-bg);
    color: var(--fm-icon-violeta-fg);
}

.fm-acc-texts {
    flex: 1;
    min-width: 0;
}

.fm-acc-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--fm-color-texto);
    line-height: 1.2;
}

.fm-acc-sub {
    font-size: 10px;
    color: #aaa;
    font-weight: 600;
    margin-top: 1px;
}


/* ══════════════════════════════════════
   5. ETIQUETA DE SECCIÓN (subtítulo dentro de un bloque)
══════════════════════════════════════ */
.fm-section-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--fm-color-acento);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 20px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fm-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ffe8d6;
}

.fm-section-label:not(:first-child) {
    margin-top: 20px;
}


/* ══════════════════════════════════════
   6. CAMPOS DE FORMULARIO
══════════════════════════════════════ */
.fm-field {
    margin-bottom: 20px;
}

.fm-field label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: var(--fm-color-texto-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 5px;
    margin-left: 15px;
}

.fm-field label i {
    font-size: 12px;
    color: var(--fm-color-acento);
}

.fm-field .form-control,
.fm-field select.form-control {
    border: 1.5px solid var(--fm-color-borde) !important;
    border-radius: var(--fm-radius-input) !important;
    font-family: var(--fm-font) !important;
    font-size: 13px !important;
    color: #333 !important;
    padding: 9px 12px !important;
    background: var(--fm-color-fondo-input) !important;
    box-shadow: none !important;
    transition: border-color .15s !important;
    /* height: auto !important; */
    height: 39.5px !important;
}

.fm-field .form-control:focus {
    border-color: var(--fm-color-acento) !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--fm-color-acento-bg-focus) !important;
}

.fm-field textarea.form-control {
    resize: vertical !important;
    min-height: 90px !important;
    line-height: 1.6 !important;
}

/* Neutraliza el "Bootstrap Material Design" para que no agregue
   paddings/posiciones raras dentro de un campo .fm-field */
.fm-field .bmd-form-group,
.fm-field .form-group {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
}

/* Grilla de 2 columnas para campos chicos (ej: código postal + número) */
.fm-fields-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Campos de solo lectura (fecha de carga, usuario, etc.) */
.fm-readonly {
    font-size: 12px !important;
    color: var(--fm-color-texto-disabled) !important;
    background: #f8f7f4 !important;
    cursor: not-allowed !important;
}

/* Input de contraseña con ícono de mostrar/ocultar (login, contacto-new, etc.) 20260704 19hs*/
.fm-pass-wrap {
    position: relative;
    width: 100%;
}

.fm-pass-wrap .form-control {
    padding-right: 34px !important;
}

.fm-pass-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--fm-color-texto-muted);
    font-size: 14px;
}




/* ══════════════════════════════════════
   7. ZONA DE CARGA DE FOTO
══════════════════════════════════════ */
.fm-foto-zona {
    width: 100%;
    border: 2px dashed #ffd5b5;
    border-radius: 14px;
    background: #fff8f3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: border-color .15s, background .15s;
    position: relative;
    min-height: 300px;
    padding: 0 12px;
}

.fm-foto-zona:hover {
    border-color: var(--fm-color-acento);
    background: var(--fm-color-acento-bg);
}

.fm-foto-zona input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.fm-foto-zona i {
    font-size: 28px;
    color: var(--fm-color-acento);
}

.fm-foto-zona span {
    font-size: 12px;
    font-weight: 700;
    color: var(--fm-color-acento);
}

.fm-foto-zona small {
    font-size: 10px;
    color: #bbb;
}

.fm-foto-preview {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--fm-color-borde-suave);
    margin-bottom: 12px;
    display: none;
    min-height: 300px;
    padding: 0 12px;
}

.fm-foto-preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.fm-foto-preview.visible {
    display: block;
}


/* ══════════════════════════════════════
   8. COORDENADAS / UBICACIÓN
══════════════════════════════════════ */
.fm-coord-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.fm-coord-row .form-control {
    flex: 1;
    border: 1.5px solid var(--fm-color-borde) !important;
    border-radius: var(--fm-radius-input) !important;
    font-family: var(--fm-font) !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    background: var(--fm-color-fondo-input) !important;
    box-shadow: none !important;
    height: auto !important;
}

.fm-coord-row .form-control:focus {
    border-color: var(--fm-color-acento) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--fm-color-acento-bg-focus) !important;
    outline: none !important;
}

.fm-coord-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: none;
    border-radius: var(--fm-radius-input);
    background: var(--fm-color-acento);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    font-family: var(--fm-font);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
}

.fm-coord-btn:hover {
    opacity: .88;
    color: #fff;
    text-decoration: none;
}

.fm-coord-btn i {
    font-size: 14px;
}

.fm-coord-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff8f3;
    border: 1px solid #ffe0c8;
    border-radius: var(--fm-radius-input);
    padding: 9px 12px;
    margin-bottom: 10px;
}

.fm-coord-tip i {
    font-size: 14px;
    color: var(--fm-color-acento);
    flex-shrink: 0;
    margin-top: 1px;
}

.fm-coord-tip span {
    font-size: 11px;
    color: #b85c00;
    line-height: 1.5;
    font-weight: 600;
}

.fm-map-preview {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    border: 1.5px dashed #e0ddd8;
    background: #f8f7f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .2s;
}

.fm-map-preview i {
    font-size: 28px;
    color: #ccc;
}

.fm-map-preview span {
    font-size: 11px;
    color: #bbb;
    font-weight: 600;
    text-align: center;
    padding: 0 1rem;
}

.fm-map-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* ══════════════════════════════════════
   9. REDES SOCIALES
══════════════════════════════════════ */
.fm-redes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.fm-red-field {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1.5px solid var(--fm-color-borde);
    border-radius: var(--fm-radius-input);
    background: var(--fm-color-fondo-input);
    transition: border-color .15s;
}

.fm-red-field:focus-within {
    border-color: var(--fm-color-acento);
    background: #fff;
}

.fm-red-field i {
    font-size: 18px;
    flex-shrink: 0;
}

.fm-red-field input {
    border: none !important;
    background: transparent !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #333 !important;
    width: 100% !important;
    outline: none !important;
    font-family: var(--fm-font) !important;
    padding: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

.fm-red-field input::placeholder {
    color: #ccc !important;
}

.fm-red-field .bmd-form-group {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
}


/* ══════════════════════════════════════
   10. SWITCHES / SERVICIOS (lista de opciones on-off)
══════════════════════════════════════ */
.fm-servicios {
    display: flex;
    flex-direction: column;
}

.fm-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid #f0ece8;
}

.fm-switch-row:last-child {
    border-bottom: none;
}

.fm-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.fm-switch-label i {
    font-size: 16px;
    color: var(--fm-color-acento);
    flex-shrink: 0;
}

/* Toggle tipo "pill" para radios (los radios originales quedan ocultos) */
.fm-toggle-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.fm-toggle-wrap input[type="radio"] {
    display: none;
}

.fm-toggle-wrap label {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 1.5px solid #e0ddd8;
    color: #aaa;
    background: #fff;
    transition: all .15s;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.fm-toggle-wrap input[type="radio"]:checked+label {
    background: var(--fm-color-acento);
    border-color: var(--fm-color-acento);
    color: #fff;
}


/* ══════════════════════════════════════
   11. FOOTER: TÉRMINOS Y BOTONES FINALES
══════════════════════════════════════ */
.fm-footer {
    padding: 20px 14px 10px;
}

.fm-terminos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--fm-color-borde-suave);
    margin-bottom: 14px;
}

.fm-terminos input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--fm-color-acento);
    cursor: pointer;
}

.fm-terminos label {
    font-size: 13px;
    color: var(--fm-color-texto-suave);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.5;
}

.fm-terminos a {
    color: var(--fm-color-acento);
    text-decoration: none;
    font-weight: 800;
}

.fm-terminos a:hover {
    text-decoration: underline;
}

.fm-btns {
    display: flex;
    gap: 10px;
}

.fm-btn-limpiar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px;
    border-radius: var(--fm-radius-btn);
    background: #f4f4f0;
    border: 1.5px solid #e0ddd8;
    font-size: 14px;
    font-weight: 800;
    color: #777;
    font-family: var(--fm-font);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fm-btn-guardar {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px;
    border-radius: var(--fm-radius-btn);
    background: var(--fm-color-header);
    border: none;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    font-family: var(--fm-font);
    cursor: pointer;
    box-shadow: 0 4px 14px var(--fm-color-acento-shadow);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
}

.fm-btn-guardar:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

.fm-btn-volver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border-radius: var(--fm-radius-btn);
    background: #fff;
    border: 1.5px solid #e0ddd8;
    font-size: 13px;
    font-weight: 800;
    color: var(--fm-color-texto-suave);
    text-decoration: none;
    font-family: var(--fm-font);
    margin-top: 10px;
    -webkit-tap-highlight-color: transparent;
}

.fm-btn-volver:hover {
    background: #f4f4f0;
    color: #333;
    text-decoration: none;
}

/* Variante: cuando fm-btn-volver va EN PAREJA con otro botón dentro de fm-btns
   (ej: "Volver" + "Activar cuenta"), pierde el margen superior y se pone
   flex:1 para repartir el ancho igual que fm-btn-limpiar lo hace con fm-btn-guardar */
.fm-btns .fm-btn-volver {
    flex: 1;
    margin-top: 0;
}


.fm-link-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    background: transparent;
    border-radius: var(--fm-radius-btn);
    font-size: 12px;
    font-weight: 700;
    color: #d64545;
    text-decoration: none;
    font-family: var(--fm-font);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fm-link-danger:hover {
    background: #fdf1f1;
    color: #c23333;
    text-decoration: none;
}


/* ══════════════════════════════════════
   12. AJUSTES GENERALES DE TIPOGRAFÍA/ESTADOS
   (antes escritos contra un ID de página puntual, ej. "#collapseThree";
   generalizados acá contra .fm-wrap para que apliquen en cualquier form)
══════════════════════════════════════ */
.fm-wrap input,
.fm-wrap select,
.fm-wrap textarea,
.fm-wrap label,
.fm-wrap button {
    font-family: var(--fm-font) !important;
}

.fm-wrap input::placeholder,
.fm-wrap textarea::placeholder {
    color: #c0bdb8 !important;
    font-weight: 400 !important;
    font-family: var(--fm-font) !important;
    font-size: 13px !important;
}

/* Select sin nada elegido -> texto gris claro; con opción elegida -> negro */
.fm-wrap select option:disabled,
.fm-wrap select option[value=""] {
    color: #c0bdb8 !important;
}

.fm-wrap select:has(option[value=""]:checked) {
    color: #c0bdb8 !important;
}

.fm-wrap select {
    color: #333 !important;
}

.fm-wrap select option {
    color: #333 !important;
}

.fm-wrap input.form-control,
.fm-wrap textarea.form-control,
.fm-wrap select.form-control {
    font-family: var(--fm-font) !important;
    font-size: 13px !important;
}


/* ══════════════════════════════════════
   13. RESPONSIVE DESKTOP
   (mobile-first: todo lo de arriba es el estilo base para celular)
══════════════════════════════════════ */
@media (min-width: 640px) {
    .fm-wrap .accordion {
        max-width: 680px;
        margin: 0 auto;
        padding: 0 0 1rem;
    }

    .fm-footer {
        max-width: 680px;
        margin: 0 auto;
    }

    .fm-header {
        padding: 18px 24px 16px;
    }

    .fm-fields-2 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Se aplicará solo en dispositivos con pantallas mayores a 480px (ajusta este valor si lo necesitas) */
@media (min-width: 480px) {
    .fm-wrap {
        margin-top: 50px !important;
    }
}





/* ══════════════════════════════════════
   14. BARRA DE PROGRESO FIJA
══════════════════════════════════════ */
.fm-progress-wrap {
    position: sticky;
    top: 8px;
    left: 0;
    width: 100%;
    height: 10px;
    background: var(--fm-color-borde);
    z-index: 1050;
    border-radius: 0 6px 6px 0;
    /* Por encima de todo al scrollear */
}

.fm-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--fm-color-acento);
    transition: width 0.4s ease;
    border-radius: 0 4px 4px 0;
}

/* ══════════════════════════════════════
   15. BOTÓN DE AYUDA FLOTANTE
══════════════════════════════════════ */
.fm-btn-ayuda {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #1a73e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
    z-index: 10;
}

.fm-btn-ayuda:hover {
    transform: scale(1.1);
    background: #f5f8ff;
    color: #1557b0;
}

/* ══════════════════════════════════════
   16. TARJETAS DE SECCIÓN (Reemplazo Acordeón)
══════════════════════════════════════ */
.fm-section-card {
    background: var(--fm-color-fondo-card);
    border-radius: var(--fm-radius-card);
    border: 1px solid var(--fm-color-borde-suave);
    padding: 24px 16px;
    margin: 0 12px 20px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.fm-section-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--fm-color-texto);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fm-color-borde-suave);
}

@media (min-width: 640px) {
    .fm-section-card {
        max-width: 680px;
        margin: 0 auto 24px auto;
        padding: 30px 24px;
    }
}