/* ── LYL Newsletter Widget ─────────────────────────────────────────────────── */

.lyln-widget {
    --lyln-bg:       #0f172a;
    --lyln-surface:  #1e293b;
    --lyln-border:   #1e3a5f;
    --lyln-accent:   #3b82f6;
    --lyln-accent-h: #2563eb;
    --lyln-text:     #e2e8f0;
    --lyln-muted:    #64748b;
    --lyln-success:  #22c55e;
    --lyln-error:    #ef4444;
    --lyln-radius:   12px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── Card (por defecto) ────────────────────────────────────────────────────── */
.lyln-widget--card .lyln-inner {
    background: var(--lyln-bg);
    border: 1px solid var(--lyln-border);
    border-radius: var(--lyln-radius);
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

/* ── Inline ────────────────────────────────────────────────────────────────── */
.lyln-widget--inline .lyln-inner {
    background: linear-gradient(135deg, #0f2040 0%, #0f172a 100%);
    border: 1px solid var(--lyln-border);
    border-radius: var(--lyln-radius);
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.lyln-widget--inline .lyln-inner > * { flex: 1 1 200px; }
.lyln-widget--inline .lyln-inner > .lyln-form { flex: 1 1 360px; }

/* ── Minimal ───────────────────────────────────────────────────────────────── */
.lyln-widget--minimal .lyln-inner {
    padding: 8px 0;
}

/* ── Icono ─────────────────────────────────────────────────────────────────── */
.lyln-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    border-radius: 12px;
    color: #fff;
    margin-bottom: 16px;
}
.lyln-widget--inline .lyln-icon { display: none; }
.lyln-widget--minimal .lyln-icon { display: none; }

/* ── Textos ─────────────────────────────────────────────────────────────────── */
.lyln-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lyln-text);
}
.lyln-desc {
    margin: 0 0 20px;
    font-size: .875rem;
    color: var(--lyln-muted);
    line-height: 1.55;
}
.lyln-legal {
    margin: 6px 0 0;
    font-size: .7rem;
    color: var(--lyln-muted);
    text-align: center;
}
.lyln-opt { font-weight: 400; opacity: .6; }

/* ── Campos ──────────────────────────────────────────────────────────────────── */
.lyln-field {
    margin-bottom: 12px;
    text-align: left;
}
.lyln-field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 5px;
}
.lyln-field--inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lyln-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--lyln-surface);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 11px 14px;
    color: var(--lyln-text);
    font-size: .9375rem;
    outline: none;
    transition: border-color .2s;
}
.lyln-input:focus { border-color: var(--lyln-accent); }
.lyln-field--inline .lyln-input { flex: 1 1 200px; }

/* ── Botón ───────────────────────────────────────────────────────────────────── */
.lyln-btn {
    background: var(--lyln-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, transform .1s;
}
.lyln-btn:hover  { background: var(--lyln-accent-h); }
.lyln-btn:active { transform: scale(.98); }
.lyln-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Alertas ────────────────────────────────────────────────────────────────── */
.lyln-alert {
    border-radius: 8px;
    padding: 11px 14px;
    font-size: .875rem;
    margin-bottom: 14px;
    line-height: 1.4;
}
.lyln-err {
    background: #450a0a;
    border: 1px solid #7f1d1d;
    color: #fca5a5;
}
.lyln-ok {
    background: #052e16;
    border: 1px solid #14532d;
    color: #86efac;
}

/* ── Success state (formulario ocultado) ─────────────────────────────────────── */
.lyln-widget.lyln-subscribed .lyln-form  { display: none; }
.lyln-widget.lyln-subscribed .lyln-title,
.lyln-widget.lyln-subscribed .lyln-desc  { display: none; }
.lyln-success-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    color: var(--lyln-success);
    font-size: 1rem;
    font-weight: 600;
}
.lyln-success-checkmark {
    font-size: 2.5rem;
    line-height: 1;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
    .lyln-widget--card .lyln-inner { padding: 24px 18px; }
    .lyln-widget--inline .lyln-inner { flex-direction: column; gap: 16px; }
}
