/* ============================================================================
   FEMA DESIGN — LA fuente única de componentes visuales del panel
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de admin.css y le gana. Acá se personaliza TODO el panel:
   cambiás un token abajo y cambia en todas las pantallas a la vez.

   Convención de clases (prefijo f):
     .fbtn        botón (variantes: fbtn-primario / fbtn-sec / fbtn-peligro /
                  fbtn-exito / fbtn-wa · tamaños: fbtn-ch / (normal) / fbtn-g)
     .falert      aviso fijo de resultado (falert-exito / -error / -aviso / -info)
     .fcard       tarjeta contenedora
     .fchip       etiqueta/píldora (fchip-primario / -exito / -peligro / -neutro)
     .finput      campos de formulario
   Migración: toda pantalla nueva o retocada usa estas clases. Nada de estilos
   inline para botones, avisos, chips o tarjetas.
   ========================================================================== */

:root {
    /* ---- Marca ---- */
    --f-azul: #1e169c;
    --f-azul-2: #3b2bd9;          /* degradés / hovers */
    --f-rojo: #ff203c;            /* CTA Felipe */
    --f-tinta: #0a0e27;           /* texto principal */
    --f-gris: #5b6170;            /* texto secundario */
    --f-gris-suave: #8a8e9c;      /* texto terciario */

    /* ---- Estados ---- */
    --f-exito: #10b981;  --f-exito-bg: #ecfdf5;  --f-exito-borde: #a7f3d0;  --f-exito-texto: #047857;
    --f-error: #dc2626;  --f-error-bg: #fef2f2;  --f-error-borde: #fecaca;  --f-error-texto: #b91c1c;
    --f-aviso: #f59e0b;  --f-aviso-bg: #fffbeb;  --f-aviso-borde: #fde68a;  --f-aviso-texto: #a16207;
    --f-info-bg: #eef0ff; --f-info-borde: #d6dcff; --f-info-texto: #1e169c;
    --f-wa: #25d366;     --f-wa-oscuro: #16a34a; --f-wa-bg: #f0fdf4; --f-wa-borde: #bbf7d0;

    /* ---- Superficies ---- */
    --f-borde: #ececef;
    --f-borde-fuerte: #d7dae2;
    --f-fondo-suave: #f7f8fa;
    --f-radio: 10px;              /* botones, inputs, chips */
    --f-radio-tarjeta: 14px;
    --f-sombra-tarjeta: 0 6px 20px rgba(10, 14, 39, .07);
    --f-sombra-flotante: 0 14px 40px rgba(10, 14, 39, .16);

    /* ---- Botones: LA medida única del panel ---- */
    --f-btn-alto: 44px;           /* normal */
    --f-btn-alto-ch: 34px;        /* chico */
    --f-btn-alto-g: 52px;         /* grande */
    --f-btn-fuente: 15px;
    --f-btn-fuente-ch: 13px;
    --f-btn-fuente-g: 17px;
    --f-btn-pad-x: 20px;
}

/* ============================== BOTONES ============================== */
/* La especificidad (button.fbtn / a.fbtn) le gana a `button[type=submit]`
   de admin.css, y ::before apaga el brillo heredado. */
button.fbtn, a.fbtn, .fbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--f-btn-alto);
    padding: 0 var(--f-btn-pad-x) !important;
    font-size: var(--f-btn-fuente) !important;
    font-weight: 700; font-family: inherit; line-height: 1;
    border-radius: var(--f-radio);
    border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--f-fondo-suave); color: var(--f-tinta) !important;
    box-shadow: none !important; transform: none;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}
button.fbtn::before, a.fbtn::before { display: none !important; content: none !important; }
button.fbtn:hover, a.fbtn:hover { transform: none; box-shadow: none; }
.fbtn:disabled { opacity: .5; cursor: not-allowed; }

/* Tamaños */
.fbtn.fbtn-ch { height: var(--f-btn-alto-ch); font-size: var(--f-btn-fuente-ch) !important; padding: 0 14px !important; }
.fbtn.fbtn-g  { height: var(--f-btn-alto-g);  font-size: var(--f-btn-fuente-g) !important;  padding: 0 26px !important; }

/* Variantes */
.fbtn.fbtn-primario { background: var(--f-tinta); color: #fff !important; }
.fbtn.fbtn-primario:hover { background: var(--f-azul); }
.fbtn.fbtn-azul { background: var(--f-azul); color: #fff !important; }
.fbtn.fbtn-azul:hover { filter: brightness(1.12); }
.fbtn.fbtn-cta { background: var(--f-rojo); color: #fff !important; }
.fbtn.fbtn-cta:hover { filter: brightness(1.08); }
.fbtn.fbtn-sec { background: #fff; border-color: var(--f-borde-fuerte); color: var(--f-tinta) !important; }
.fbtn.fbtn-sec:hover { border-color: var(--f-azul); color: var(--f-azul) !important; }
.fbtn.fbtn-peligro { background: #fff; border-color: var(--f-error-borde); color: var(--f-error-texto) !important; }
.fbtn.fbtn-peligro:hover { background: var(--f-error-bg); border-color: var(--f-error); }
.fbtn.fbtn-exito { background: var(--f-exito); color: #fff !important; }
.fbtn.fbtn-exito:hover { filter: brightness(1.08); }
.fbtn.fbtn-wa { background: #fff; border-color: var(--f-wa-borde); color: var(--f-wa-oscuro) !important; }
.fbtn.fbtn-wa:hover { background: var(--f-wa-bg); border-color: var(--f-wa-oscuro); color: var(--f-wa-oscuro) !important; }
.fbtn.fbtn-wa-lleno { background: var(--f-wa); color: #fff !important; }
.fbtn.fbtn-wa-lleno:hover { filter: brightness(1.06); }

/* ============================== AVISOS FIJOS ============================== */
/* El banner de resultado que queda fijo en la página (patrón Config Global). */
.falert {
    padding: 14px 20px; border-radius: var(--f-radio);
    font-weight: 700; font-size: 15px; text-align: center;
    border: 1px solid var(--f-borde-fuerte);
    background: var(--f-fondo-suave); color: var(--f-tinta);
    margin-bottom: 18px;
}
.falert.falert-exito { background: var(--f-exito-bg); border-color: var(--f-exito-borde); color: var(--f-exito-texto); }
.falert.falert-error { background: var(--f-error-bg); border-color: var(--f-error-borde); color: var(--f-error-texto); }
.falert.falert-aviso { background: var(--f-aviso-bg); border-color: var(--f-aviso-borde); color: var(--f-aviso-texto); }
.falert.falert-info  { background: var(--f-info-bg);  border-color: var(--f-info-borde);  color: var(--f-info-texto); }

/* ============================== TARJETAS ============================== */
.fcard {
    background: #fff; border: 1px solid var(--f-borde);
    border-radius: var(--f-radio-tarjeta); padding: 22px;
    transition: box-shadow .15s, border-color .15s;
}
.fcard:hover { box-shadow: var(--f-sombra-tarjeta); }
.fcard.fcard-destacada { border-color: #c7d2fe; background: #fdfdff; }

/* ============================== CHIPS ============================== */
.fchip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    background: var(--f-fondo-suave); color: var(--f-gris);
}
.fchip.fchip-primario { background: var(--f-azul); color: #fff; }
.fchip.fchip-info { background: var(--f-info-bg); color: var(--f-info-texto); }
.fchip.fchip-exito { background: var(--f-exito-bg); color: var(--f-exito-texto); }
.fchip.fchip-peligro { background: var(--f-error-bg); color: var(--f-error-texto); }

/* ============================== INPUTS ============================== */
.finput {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--f-borde); border-radius: var(--f-radio);
    font-size: 15px; font-family: inherit; color: var(--f-tinta); background: #fff;
}
.finput:focus { outline: none; border-color: var(--f-azul); box-shadow: 0 0 0 3px rgba(30, 22, 156, .12); }

/* ============================================================================
   PUENTE LEGACY — MIGRACIÓN GLOBAL DE TODAS LAS PANTALLAS
   ----------------------------------------------------------------------------
   Las pantallas viejas usan .btn-primary / .btn-secondary / button[type=submit]
   / .alert. Acá esas clases se re-visten con los tokens del sistema: TODO el
   panel queda unificado de una, sin editar pantalla por pantalla. Cuando una
   pantalla se migra a .fbtn/.falert, estas reglas simplemente dejan de aplicarle.
   ========================================================================== */

/* ---- Botón primario legacy (y todo submit) = mismo cuerpo que .fbtn ---- */
.btn-primary, button[type="submit"]:not(.fbtn):not([hidden]):not([style*="display:none"]) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    height: var(--f-btn-alto) !important;
    padding: 0 var(--f-btn-pad-x) !important;
    font-size: var(--f-btn-fuente) !important;
    font-weight: 700 !important; font-family: inherit !important; line-height: 1 !important;
    border-radius: var(--f-radio) !important;
    border: 1.5px solid transparent !important;
    background: var(--f-tinta) !important; color: #fff !important;
    box-shadow: none !important; transform: none !important; cursor: pointer !important;
    transition: background .15s, filter .15s !important;
    white-space: nowrap !important;
}
.btn-primary:hover, button[type="submit"]:not(.fbtn):hover { background: var(--f-azul) !important; box-shadow: none !important; transform: none !important; }
.btn-primary::before, button[type="submit"]:not(.fbtn)::before { display: none !important; content: none !important; }

/* ---- Botón secundario legacy = fantasma del sistema ---- */
.btn-secondary {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    height: var(--f-btn-alto) !important;
    padding: 0 var(--f-btn-pad-x) !important;
    font-size: var(--f-btn-fuente) !important;
    font-weight: 700 !important; font-family: inherit !important; line-height: 1 !important;
    border-radius: var(--f-radio) !important;
    background: #fff !important; border: 1.5px solid var(--f-borde-fuerte) !important; color: var(--f-tinta) !important;
    box-shadow: none !important; cursor: pointer !important; white-space: nowrap !important;
}
.btn-secondary:hover { border-color: var(--f-azul) !important; color: var(--f-azul) !important; background: #fff !important; }

/* Excepciones: el login y el chatbot conservan su estilo propio */
.login-box button, #fema-chatbot-window button { height: auto !important; }

/* ---- Avisos legacy = paleta del sistema (patrón banner fijo) ---- */
.alert { padding: 14px 20px !important; border-radius: var(--f-radio) !important; font-weight: 700 !important; font-size: 15px !important; text-align: center !important; margin-bottom: 18px !important; }
.alert.success { background: var(--f-exito-bg) !important; border: 1px solid var(--f-exito-borde) !important; color: var(--f-exito-texto) !important; }
.alert.error, .alert.danger { background: var(--f-error-bg) !important; border: 1px solid var(--f-error-borde) !important; color: var(--f-error-texto) !important; }
.alert.warning { background: var(--f-aviso-bg) !important; border: 1px solid var(--f-aviso-borde) !important; color: var(--f-aviso-texto) !important; }

/* ---- Campos legacy = foco y bordes del sistema ---- */
.admin-page-container input[type="text"], .admin-page-container input[type="url"], .admin-page-container input[type="email"],
.admin-page-container input[type="tel"], .admin-page-container input[type="number"], .admin-page-container input[type="password"],
.admin-page-container select, .admin-page-container textarea {
    border-color: var(--f-borde);
    border-radius: var(--f-radio);
    font-family: inherit;
    color: var(--f-tinta);
}
.admin-page-container input:focus, .admin-page-container select:focus, .admin-page-container textarea:focus {
    outline: none !important;
    border-color: var(--f-azul) !important;
    box-shadow: 0 0 0 3px rgba(30, 22, 156, .12) !important;
}