body {
    background-color: #f0f2f5;
}

/* ── Page header ── */
.page-header {
    background: linear-gradient(135deg, #E62E2D 0%, #b01e1d 100%);
    color: #fff;
    padding: 24px 28px;
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 4px 18px rgba(230,46,45,.25);
}
.page-header h2 {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 2px;
}
.page-header .subtitle {
    font-size: 13px;
    opacity: .8;
    margin: 0;
}

/* ── Form cards ── */
.preview-column {
    position: sticky;
    top: 1.5rem;
    align-self: flex-start;
}

.form-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.form-section h3 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebebeb;
}

/* ── Info note ── */
.intro-alert {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: #78350f;
    margin-bottom: 1.5rem;
}

/* ── Color pickers ── */
.color-picker-label {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    text-align: center;
}
input[type="color"].form-control-color {
    height: 40px;
    cursor: pointer;
    padding: 3px;
}

/* ── Social rows ── */
.social-row label.social-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.social-row .form-control-sm {
    font-size: 12px;
}

/* ── Submit button ── */
.btn-generate {
    background: linear-gradient(135deg, #E62E2D, #b01e1d);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 10px;
    border-radius: 8px;
    transition: opacity .2s;
}
.btn-generate:hover {
    opacity: .88;
    color: #fff;
}

/* ── Preview ── */
.email-mock {
    background: #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}

.email-mock-titlebar {
    background: #d0d3d8;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.email-mock-titlebar span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.email-mock-header {
    background: #fff;
    padding: 10px 16px;
    border-bottom: 1px solid #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #555;
}

.email-mock-header div {
    margin-bottom: 3px;
}

.email-mock-body {
    background: #fff;
    padding: 20px 20px 16px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
}

.email-mock-body p {
    margin-bottom: 10px;
}

.email-mock-divider {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 16px 0;
}

.firma-preview-wrapper {
    overflow-x: auto;
}

.preview-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    text-align: center;
    margin-bottom: 10px;
}

/* ── Shared section title (lista + resultado) ── */
.section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── firmas_lista ── */
.signatures-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.search-box { max-width: 340px; }

.firma-row {
    border: none;
    border-bottom: 1px solid #f2f2f2;
    border-radius: 0 !important;
    transition: background .12s;
    padding: 10px 4px;
}
.firma-row:first-child { border-radius: 6px 6px 0 0 !important; }
.firma-row:last-child  { border-bottom: none; border-radius: 0 0 6px 6px !important; }
.firma-row:hover { background: #fdf1f1; }
.firma-row span { font-size: .9rem; color: #333; }

.btn-ver {
    background: transparent;
    border: 1px solid #E62E2D;
    color: #E62E2D;
    font-size: .8rem;
    padding: 3px 12px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.btn-ver:hover {
    background: #E62E2D;
    color: #fff;
}

#buscador:focus {
    border-color: #E62E2D;
    box-shadow: 0 0 0 .2rem rgba(230,46,45,.2);
}

/* ── generar_firma (resultado) ── */
.result-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.success-banner {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    font-size: .9rem;
    color: #15803d;
}

.btn-action {
    background: linear-gradient(135deg, #E62E2D, #b01e1d);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 18px;
    transition: opacity .2s;
}
.btn-action:hover { opacity: .88; color: #fff; }

.btn-secondary-action {
    background: #fff;
    border: 1px solid #ddd;
    color: #444;
    font-weight: 500;
    border-radius: 8px;
    padding: 8px 18px;
    transition: background .15s;
}
.btn-secondary-action:hover { background: #f5f5f5; color: #333; }

.result-card iframe {
    width: 100%;
    height: 230px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
}