/* ==============================================
   Formulario de Brevo (guía de prompts) con la paleta de StudyCode Pro.
   Va DESPUÉS de sib-styles.css (la hoja base de Brevo) y se limita a .sc-brevo.
   Solo cambia colores, tipografía y espaciados: no toca la lógica de Brevo
   (ids, clases y campos) ni el display de los mensajes, que gestiona main.js.
   ============================================== */

/* Reglas que Brevo recomienda en el <head> (especificidad cero a propósito) */
:where(.sib-form-message-panel) {
    display: none;
}

:where(.sib-form-message-panel .sib-notification__icon) {
    width: 20px;
    height: 20px;
}

/* Caja contenedora: igual que el bloque anterior del blog */
.sc-brevo {
    margin: 3rem 0;
    padding: 2rem;
    background: var(--accent-green-bg, rgba(34, 197, 94, 0.1));
    border: 1px solid var(--accent-green-border, rgba(34, 197, 94, 0.3));
    border-radius: 12px;
    color: var(--text-secondary, #cbd5e1);
    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sc-brevo .sib-form,
.sc-brevo .sib-form-container,
.sc-brevo #sib-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    text-align: left !important;
}

/* Títulos y texto */
.sc-brevo .sc-brevo__title {
    margin: 0 0 0.5rem;
    color: var(--accent-green, #22c55e);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.sc-brevo .sc-brevo__lead {
    margin: 0 0 1.25rem;
    color: var(--text-secondary, #cbd5e1);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.sc-brevo .sib-form-block,
.sc-brevo .sib-input,
.sc-brevo .form__entry {
    background: transparent !important;
}

.sc-brevo .sib-form-block > div[style],
.sc-brevo form > div {
    padding: 0.5rem 0 !important;
}

/* Etiquetas de los campos */
.sc-brevo .entry__label {
    display: block;
    margin: 0 0 0.35rem;
    color: var(--text-light, #e2e8f0) !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: left !important;
}

/* La etiqueta del consentimiento solo se lee con lector de pantalla */
.sc-brevo .entry__label[for="OPT_IN"] {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Contenedor del input: Brevo le pone fondo blanco, borde y esquinas de 3px,
   que asomaban por las esquinas redondeadas del campo. */
.sc-brevo .entry__field {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Campos de texto */
.sc-brevo .input,
.sc-brevo input[type="text"],
.sc-brevo input[type="email"] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 16px !important;
    background: var(--primary-bg, #0f172a) !important;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2)) !important;
    border-radius: var(--radius-small, 8px) !important;
    color: var(--text-primary, #ffffff) !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    text-align: left !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sc-brevo .input::placeholder,
.sc-brevo input::placeholder {
    color: var(--text-muted, #94a3b8) !important;
    font-family: inherit !important;
    text-align: left !important;
    opacity: 1;
}

.sc-brevo .input:focus,
.sc-brevo input[type="text"]:focus,
.sc-brevo input[type="email"]:focus {
    outline: none;
    border-color: var(--accent-blue, #6366f1) !important;
    box-shadow: 0 0 0 3px var(--accent-blue-glow, rgba(99, 102, 241, 0.3));
}

/* Mensaje de error de cada campo (lo rellena Brevo) */
.sc-brevo .entry__error:empty {
    display: none;
}

.sc-brevo .entry__error {
    display: block;
    margin-top: 0.4rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #fca5a5 !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    text-align: left !important;
}

.sc-brevo .entry__specification {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted, #94a3b8) !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: 1.5;
    text-align: left !important;
}

/* Bloque informativo sobre Brevo + responsable y finalidad */
.sc-brevo .sib-form__declaration {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.sc-brevo .declaration-block-icon {
    flex: 0 0 auto;
}

.sc-brevo .declaration-block-icon .svgIcon-sphere {
    width: 32px !important;
    height: 32px !important;
}

.sc-brevo .declaration-block-icon .path1 {
    fill: var(--accent-blue-light, #818cf8) !important;
}

.sc-brevo .sib-form__declaration > div:last-child {
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: 1.55;
    text-align: left !important;
}

.sc-brevo .sib-form__declaration p {
    margin: 0 0 0.4rem;
    color: var(--text-muted, #94a3b8) !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

.sc-brevo .sib-form__declaration p:last-child {
    margin-bottom: 0;
}

.sc-brevo #sib-container a,
.sc-brevo a {
    color: var(--accent-blue-light, #818cf8) !important;
    text-decoration: underline;
}

.sc-brevo a:hover {
    color: var(--accent-purple-light, #a78bfa) !important;
}

/* Casilla de consentimiento.
   La hoja de Brevo dibuja el tick (::before, borde blanco) siempre visible y confía
   en que el cuadro cambie de color al marcarse. Aquí se oculta el tick hasta que
   la casilla esté marcada y entonces el cuadro se rellena de verde. */
.sc-brevo .entry__choice {
    text-align: left;
}

.sc-brevo .entry__choice label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
}

.sc-brevo .entry__choice .checkbox {
    flex: 0 0 auto;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2)) !important;
    background-color: var(--primary-bg, #0f172a) !important;
    border-radius: 4px;
    transition: background-color 0.15s, border-color 0.15s;
}

.sc-brevo .entry__choice .checkbox::before {
    opacity: 0;
}

.sc-brevo .entry__choice input:checked + .checkbox {
    background-color: var(--accent-green, #22c55e) !important;
    border-color: var(--accent-green, #22c55e) !important;
}

.sc-brevo .entry__choice input:checked + .checkbox::before {
    opacity: 1;
}

.sc-brevo .entry__choice input:focus-visible + .checkbox {
    outline: 2px solid var(--accent-purple-light, #a78bfa);
    outline-offset: 2px;
}

.sc-brevo .entry__choice label > span:not(.checkbox),
.sc-brevo .entry__choice label p {
    margin: 0 !important;
    background: transparent !important;
    color: var(--text-secondary, #cbd5e1) !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.5;
    text-align: left !important;
}

/* Botón: mismo degradado que el resto del sitio */
.sc-brevo .sib-form-block__button {
    width: 100% !important;
    padding: 12px 24px !important;
    background: linear-gradient(45deg, var(--accent-blue, #6366f1), var(--accent-purple, #8b5cf6)) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: opacity 0.2s, transform 0.2s;
}

.sc-brevo .sib-form-block__button:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.sc-brevo .sib-form-block__button:focus-visible {
    outline: 2px solid var(--accent-purple-light, #a78bfa);
    outline-offset: 2px;
}

.sc-brevo .sib-form-block__button:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

/* Mensajes de éxito / error del formulario (el display lo controla Brevo) */
.sc-brevo .sib-form-message-panel {
    max-width: none !important;
    margin: 0 auto 1rem;
    border-radius: 8px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    text-align: left !important;
}

.sc-brevo #error-message {
    background: var(--accent-red-bg, rgba(239, 68, 68, 0.1)) !important;
    border-color: var(--accent-red-border, rgba(239, 68, 68, 0.3)) !important;
    color: #fecaca !important;
}

.sc-brevo #success-message {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #bbf7d0 !important;
}

/* Campo trampa anti-bots: fuera de la vista, no accesible para personas */
.sc-brevo .input--hidden {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 480px) {
    .sc-brevo {
        padding: 1.25rem;
        margin: 2rem 0;
    }
}

/* Autorrelleno del navegador: mantiene el fondo oscuro y el texto claro */
.sc-brevo input:-webkit-autofill,
.sc-brevo input:-webkit-autofill:hover,
.sc-brevo input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary, #ffffff);
    -webkit-box-shadow: 0 0 0 1000px var(--primary-bg, #0f172a) inset;
    caret-color: var(--text-primary, #ffffff);
    transition: background-color 9999s ease-out 0s;
}