/*
 * Invitarts Client Flow — Frontend CSS
 * Tipografía: Jost (Google Fonts) · Paleta: beige / marrón / dorado
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    --icf-cream:      #f0ebe3;
    --icf-cream2:     #f9f5f0;
    --icf-brown:      #3d2b1f;
    --icf-brown2:     #2a1e15;
    --icf-gold:       #b8960c;
    --icf-gold-light: #d4a843;
    --icf-gray:       #8b7f77;
    --icf-gray-light: #c4b8b0;
    --icf-white:      #ffffff;
    --icf-border:     #e0d8d0;
    --icf-shadow:     rgba(61,43,31,.08);
    --icf-radius:     16px;
    --icf-radius-sm:  10px;
    --icf-transition: all .3s ease;
    --icf-font:       'Jost', Arial, sans-serif;
}

/* ── Reset mínimo ───────────────────────────────────────────────────────── */
.icf-form-wrapper *,
.icf-dashboard *,
.icf-detalle * {
    box-sizing: border-box;
}

/* ── Wrapper del formulario ─────────────────────────────────────────────── */
.icf-form-wrapper {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    padding: 48px 48px 40px;
    max-width: 720px;
    margin: 40px auto;
    box-shadow: 0 4px 24px var(--icf-shadow);
    font-family: var(--icf-font);
}

@media (max-width: 640px) {
    .icf-form-wrapper { padding: 32px 20px; margin: 20px 12px; }
}

/* ── Encabezado del formulario ──────────────────────────────────────────── */
.icf-form-header { text-align: center; margin-bottom: 36px; }
.icf-form-title  { font-size: 28px; font-weight: 600; color: var(--icf-brown); margin: 0 0 8px; }
.icf-form-subtitle { color: var(--icf-gray); font-size: 14px; margin: 0; }

/* ── Grupos de campo ───────────────────────────────────────────────────── */
.icf-form-group { margin-bottom: 24px; }
.icf-form-row { margin-bottom: 24px; }
.icf-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 480px) { .icf-two-cols { grid-template-columns: 1fr; } }

/* ── Labels ─────────────────────────────────────────────────────────────── */
.icf-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--icf-brown);
    margin-bottom: 8px;
}
.icf-required { color: #c0392b; margin-left: 2px; }
/* Asterisco requerido via CSS (Form 1 — labels con icf-t no pueden tener spans internos) */
.icf-label-req::after { content: ' *'; color: #c0392b; }
.icf-field-hint { font-size: 12px; color: var(--icf-gray); margin: 6px 0 0; }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.icf-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    font-size: 14px;
    font-family: var(--icf-font);
    color: var(--icf-brown);
    background: var(--icf-white);
    transition: var(--icf-transition);
    outline: none;
}
.icf-input:focus {
    border-color: var(--icf-gold);
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
}
.icf-input::placeholder { color: var(--icf-gray-light); }

/* ── Textarea ───────────────────────────────────────────────────────────── */
.icf-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    font-size: 14px;
    font-family: var(--icf-font);
    color: var(--icf-brown);
    background: var(--icf-white);
    transition: var(--icf-transition);
    resize: vertical;
    min-height: 100px;
    outline: none;
    line-height: 1.6;
}
.icf-textarea:focus {
    border-color: var(--icf-gold);
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
}
.icf-textarea::placeholder { color: var(--icf-gray-light); }

/* ── Radios ─────────────────────────────────────────────────────────────── */
.icf-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.icf-radio-group--inline { flex-wrap: nowrap; }
.icf-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--icf-brown);
    padding: 10px 18px;
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    background: var(--icf-white);
    transition: var(--icf-transition);
    user-select: none;
}
.icf-radio-option:has(input:checked) {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    color: var(--icf-brown);
    font-weight: 600;
}
.icf-radio-option input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.icf-radio-custom {
    width: 16px; height: 16px;
    border: 2px solid var(--icf-border);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--icf-white);
    transition: var(--icf-transition);
    display: flex; align-items: center; justify-content: center;
}
.icf-radio-option:has(input:checked) .icf-radio-custom {
    border-color: var(--icf-gold);
    background: var(--icf-gold);
}
.icf-radio-option:has(input:checked) .icf-radio-custom::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--icf-white);
    display: block;
}

/* ── Checkboxes ─────────────────────────────────────────────────────────── */
.icf-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 480px) { .icf-checkbox-grid { grid-template-columns: 1fr; } }

.icf-check-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--icf-brown);
    padding: 10px 14px;
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    background: var(--icf-white);
    transition: var(--icf-transition);
    user-select: none;
}
.icf-check-option:has(input:checked) {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    font-weight: 600;
}
.icf-checkbox-input {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.icf-check-custom {
    width: 18px; height: 18px;
    border: 2px solid var(--icf-border);
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--icf-white);
    transition: var(--icf-transition);
    display: flex; align-items: center; justify-content: center;
}
.icf-check-option:has(input:checked) .icf-check-custom {
    background: var(--icf-brown);
    border-color: var(--icf-brown);
}
.icf-check-option:has(input:checked) .icf-check-custom::after {
    content: '';
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

/* ── Selector de país ───────────────────────────────────────────────────── */
.icf-country-selector { position: relative; }

.icf-country-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    background: var(--icf-white);
    cursor: pointer;
    font-size: 14px;
    font-family: var(--icf-font);
    color: var(--icf-brown);
    transition: var(--icf-transition);
    text-align: left;
}
.icf-country-trigger:focus,
.icf-country-trigger[aria-expanded="true"] {
    border-color: var(--icf-gold);
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
    outline: none;
}
.icf-country-flag { font-size: 20px; line-height: 1; }
.icf-country-name { flex: 1; }
.icf-chevron { margin-left: auto; transition: transform .3s ease; color: var(--icf-gray); flex-shrink:0; }
.icf-country-trigger[aria-expanded="true"] .icf-chevron { transform: rotate(180deg); }

.icf-country-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: var(--icf-white);
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    box-shadow: 0 8px 30px var(--icf-shadow);
    z-index: 100;
    overflow: hidden;
    animation: icf-fadeInUp .2s ease;
}
.icf-country-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--icf-border);
    color: var(--icf-gray);
}
.icf-country-search-input {
    border: none; outline: none;
    font-size: 13px;
    font-family: var(--icf-font);
    color: var(--icf-brown);
    flex: 1;
    background: transparent;
}
.icf-country-search-input::placeholder { color: var(--icf-gray-light); }

.icf-country-list {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.icf-country-list::-webkit-scrollbar { width: 6px; }
.icf-country-list::-webkit-scrollbar-thumb { background: var(--icf-border); border-radius: 3px; }

.icf-country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--icf-brown);
    transition: background .15s ease;
}
.icf-country-option:hover,
.icf-country-option--selected { background: var(--icf-cream); }
.icf-country-option .icf-co-flag { font-size: 18px; }

/* ── Planes ─────────────────────────────────────────────────────────────── */
.icf-plans-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 480px) { .icf-plans-grid { grid-template-columns: 1fr; } }

.icf-plan-card {
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    padding: 16px;
    cursor: pointer;
    transition: var(--icf-transition);
    background: var(--icf-white);
    text-align: center;
}
.icf-plan-card:hover {
    border-color: var(--icf-gold-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--icf-shadow);
}
.icf-plan-card--selected {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    box-shadow: 0 0 0 3px rgba(184,150,12,.15);
}
.icf-plan-name  { display: block; font-size: 15px; font-weight: 700; color: var(--icf-brown); margin-bottom: 4px; }
.icf-plan-price { display: block; font-size: 22px; font-weight: 700; color: var(--icf-gold); }
.icf-plan-price-original { font-size: 12px; color: var(--icf-gray); text-decoration: line-through; }

/* Badge "Más popular" / "Máximo nivel" */
.icf-plan-badge {
    display: inline-block;
    background: var(--icf-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 8px;
    white-space: nowrap;
}
.icf-plan-card--featured {
    border-color: var(--icf-gold);
    box-shadow: 0 2px 12px rgba(184,150,12,.18);
}

/* ── Área de subida de fotos ────────────────────────────────────────────── */
.icf-upload-area {
    border: 2px dashed var(--icf-gold-light);
    border-radius: var(--icf-radius-sm);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--icf-transition);
    background: #fdfaf5;
}
.icf-upload-area:hover,
.icf-upload-area:focus { border-color: var(--icf-gold); background: #fdf6e3; outline: none; }
.icf-upload-placeholder {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    color: var(--icf-gold);
    pointer-events: none;
}
.icf-upload-placeholder span  { font-size: 15px; font-weight: 600; color: var(--icf-brown); }
.icf-upload-placeholder small { font-size: 12px; color: var(--icf-gray); }
.icf-input-file { display: none; }

.icf-fotos-preview {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px; justify-content: center;
}
.icf-foto-thumb {
    width: 72px; height: 72px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid var(--icf-gold-light);
}

/* ── Botón principal ────────────────────────────────────────────────────── */
.icf-btn-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: var(--icf-brown);
    color: var(--icf-white);
    border: none;
    border-radius: 50px;
    font-size: 16px; font-weight: 600;
    font-family: var(--icf-font);
    cursor: pointer;
    transition: var(--icf-transition);
    margin-top: 8px;
    letter-spacing: .3px;
}
.icf-btn-submit:hover:not(:disabled) {
    background: var(--icf-brown2);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(61,43,31,.25);
}
.icf-btn-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* ── Mensajes de éxito/error ───────────────────────────────────────────── */
.icf-success-msg {
    background: #f0fdf4; border: 1px solid #86efac;
    border-radius: var(--icf-radius-sm); padding: 32px 24px;
    text-align: center; margin-bottom: 24px;
    animation: icf-fadeInUp .4s ease;
}
.icf-success-icon { color: #16a34a; margin-bottom: 12px; }
.icf-success-msg h3 { margin: 0 0 8px; font-size: 20px; color: #15803d; font-family: var(--icf-font); }
.icf-success-msg p  { margin: 0; font-size: 14px; color: #166534; }

.icf-error-msg {
    background: #fef2f2; border: 1px solid #fca5a5;
    border-radius: var(--icf-radius-sm); padding: 16px 20px;
    color: #991b1b; font-size: 14px; margin-bottom: 20px;
    animation: icf-shake .4s ease;
}

/* ── Bloques del Form 2 ─────────────────────────────────────────────────── */
.icf-block {
    background: var(--icf-cream2);
    border-radius: var(--icf-radius-sm);
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--icf-border);
}
.icf-block-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.icf-block-number {
    width: 32px; height: 32px;
    background: var(--icf-brown);
    color: var(--icf-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.icf-block-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--icf-brown); }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.icf-dashboard { font-family: var(--icf-font); }

.icf-dash-header {
    background: var(--icf-brown);
    color: var(--icf-white);
    padding: 32px 36px;
    border-radius: var(--icf-radius);
    margin-bottom: 24px;
}
.icf-dash-title {
    margin: 0 0 6px;
    font-size: 24px; font-weight: 700; color: var(--icf-white);
    letter-spacing: 0.5px; font-family: Georgia, serif;
}
.icf-dash-subtitle { margin: 0; color: #c4a882; font-size: 14px; }

.icf-dash-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 24px;
}
.icf-filter-btn {
    padding: 7px 18px;
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    background: var(--icf-white);
    color: var(--icf-brown);
    font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: var(--icf-transition);
}
.icf-filter-btn:hover,
.icf-filter-btn--active {
    background: var(--icf-brown);
    border-color: var(--icf-brown);
    color: var(--icf-white);
}

/* ── Buscador de clientes (estilo Google) ───────────────────────────────── */
.icf-dash-search-wrap {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px;
}
.icf-dash-search-bar {
    position: relative;
    display: flex; align-items: center;
    width: 100%; max-width: 480px;
    background: var(--icf-white);
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(61,43,31,.07);
    transition: box-shadow .25s, border-color .25s;
    overflow: hidden;
}
.icf-dash-search-bar:focus-within {
    border-color: var(--icf-gold);
    box-shadow: 0 4px 18px rgba(184,150,12,.18);
}
.icf-dash-search-lupa {
    flex-shrink: 0;
    margin-left: 16px;
    color: var(--icf-gold);
    pointer-events: none;
    transition: color .2s;
}
.icf-dash-search-bar:focus-within .icf-dash-search-lupa {
    color: var(--icf-gold);
}
.icf-dash-search-input {
    flex: 1;
    padding: 12px 12px 12px 10px;
    border: none;
    background: transparent;
    color: var(--icf-brown);
    font-family: var(--icf-font);
    font-size: 14px;
    outline: none;
}
.icf-dash-search-input::placeholder {
    color: var(--icf-gray-light);
}
.icf-dash-search-clear {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-right: 8px;
    background: var(--icf-cream);
    border: none; border-radius: 50%;
    color: var(--icf-gray);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.icf-dash-search-clear:hover {
    background: var(--icf-border);
    color: var(--icf-brown);
}
.icf-dash-search-count {
    font-size: 12px; color: var(--icf-gray);
    white-space: nowrap; font-style: italic;
}

/* ── Tabla ─────────────────────────────────────────────────────────────── */
.icf-dash-table-wrap {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    box-shadow: 0 2px 12px var(--icf-shadow);
    overflow-x: auto;
}
.icf-dash-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; color: var(--icf-brown);
}
.icf-dash-table thead tr {
    background: var(--icf-cream);
    border-bottom: 1.5px solid var(--icf-border);
}
.icf-dash-table th {
    padding: 12px 14px; text-align: left;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--icf-gray); white-space: nowrap;
}
.icf-dash-table td {
    padding: 14px 14px; border-bottom: 1px solid var(--icf-border);
    vertical-align: top;
}
.icf-client-row:hover td { background: #fdfaf5; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.icf-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px; font-weight: 700;
    color: #fff; letter-spacing: .3px; white-space: nowrap;
}

/* ── Observaciones inline ───────────────────────────────────────────────── */
.icf-obs-wrap { display: flex; gap: 6px; align-items: flex-start; }
.icf-obs-input {
    flex: 1; font-size: 12px; font-family: var(--icf-font);
    border: 1px solid var(--icf-border); border-radius: 8px;
    padding: 6px 10px; resize: none; color: var(--icf-brown);
    background: var(--icf-cream2);
}
.icf-obs-input:focus { border-color: var(--icf-gold); outline: none; }
.icf-obs-save {
    padding: 6px; background: none; border: 1px solid var(--icf-border);
    border-radius: 6px; cursor: pointer; color: var(--icf-gray);
    transition: var(--icf-transition); flex-shrink: 0;
}
.icf-obs-save:hover { color: var(--icf-gold); border-color: var(--icf-gold); }

/* ── Botones de acción en tabla ─────────────────────────────────────────── */
.icf-td-actions { white-space: nowrap; }
.icf-action-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important; border: 2px solid var(--icf-border) !important;
    background: var(--icf-white) !important; color: var(--icf-brown) !important;
    cursor: pointer !important; transition: var(--icf-transition) !important;
    text-decoration: none !important; font-size: 18px !important;
    vertical-align: middle !important; margin: 2px !important;
    padding: 0 !important; line-height: 1 !important;
}
.icf-action-btn svg {
    width: 22px !important; height: 22px !important;
    pointer-events: none;
}
.icf-action-btn:hover {
    background: var(--icf-brown) !important; color: var(--icf-white) !important;
    border-color: var(--icf-brown) !important; transform: scale(1.08) !important;
}
.icf-btn-detalle {
    background: var(--icf-cream) !important;
    border-color: var(--icf-gold) !important;
    color: var(--icf-gold) !important;
}
.icf-btn-detalle img {
    opacity: 0.75;
    transition: opacity .25s, filter .25s;
}
.icf-btn-detalle:hover {
    background: var(--icf-gold) !important;
    border-color: var(--icf-gold) !important;
    color: var(--icf-white) !important;
}
.icf-btn-detalle:hover img {
    opacity: 1;
    filter: brightness(0) invert(1); /* ícono blanco sobre fondo dorado */
}
.icf-btn-wa:hover  { background: #25d366 !important; border-color: #25d366 !important; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.icf-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    z-index: 9999; overflow-y: auto; padding: 20px;
    display: flex; align-items: flex-start; justify-content: center;
    animation: icf-fadeIn .2s ease;
}
.icf-modal {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    max-width: 960px; width: 100%;
    margin: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: icf-slideUp .3s ease;
}
.icf-modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px;
    border: 1.5px solid var(--icf-border); border-radius: 50%;
    background: var(--icf-white); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--icf-gray); transition: var(--icf-transition);
    z-index: 1;
}
.icf-modal-close:hover { background: var(--icf-brown); color: var(--icf-white); border-color: var(--icf-brown); }
.icf-modal-content { padding: 40px; }

/* ── Detalle del cliente ────────────────────────────────────────────────── */
.icf-detalle-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 28px; flex-wrap: wrap;
}
.icf-detalle-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--icf-brown); }

.icf-detalle-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
}
@media (max-width: 720px) { .icf-detalle-layout { grid-template-columns: 1fr; } }

.icf-detalle-section {
    background: var(--icf-cream2);
    border-radius: var(--icf-radius-sm);
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--icf-border);
}
.icf-detalle-section-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--icf-gray); margin: 0 0 16px;
}

.icf-field-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--icf-border);
}
.icf-field-row:last-child { border-bottom: none; }
.icf-field-label { font-size: 11px; font-weight: 700; color: var(--icf-gray); text-transform: uppercase; letter-spacing: .5px; width: 140px; flex-shrink: 0; margin-top: 2px; }
.icf-field-value { flex: 1; font-size: 13px; color: var(--icf-brown); word-break: break-word; }
.icf-copy-btn {
    padding: 4px; background: none; border: 1px solid var(--icf-border);
    border-radius: 4px; cursor: pointer; color: var(--icf-gray);
    transition: var(--icf-transition); flex-shrink: 0;
}
.icf-copy-btn:hover { color: var(--icf-gold); border-color: var(--icf-gold); }
.icf-copy-btn.copied { color: #15803d; border-color: #15803d; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.icf-sidebar-section {
    background: var(--icf-cream2); border: 1px solid var(--icf-border);
    border-radius: var(--icf-radius-sm); padding: 16px;
    margin-bottom: 16px;
}
.icf-sidebar-section h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--icf-gray); font-weight: 700; }

.icf-action-primary {
    display: block; width: 100%;
    padding: 11px 16px; border-radius: 50px; border: none;
    background: var(--icf-brown); color: var(--icf-white);
    font-size: 13px; font-weight: 600; font-family: var(--icf-font);
    cursor: pointer; text-decoration: none; text-align: center;
    transition: var(--icf-transition); margin-bottom: 8px;
}
.icf-action-primary:hover { opacity: .9; transform: translateY(-1px); }

.icf-action-secondary {
    display: block; width: 100%;
    padding: 10px 16px; border-radius: 50px;
    border: 1.5px solid var(--icf-border);
    background: transparent; color: var(--icf-brown);
    font-size: 13px; font-weight: 600; font-family: var(--icf-font);
    cursor: pointer; text-decoration: none; text-align: center;
    transition: var(--icf-transition); margin-bottom: 8px;
}
.icf-action-secondary:hover { border-color: var(--icf-brown); background: var(--icf-cream); }

/* ── Control de pagos ───────────────────────────────────────────────────── */
.icf-pagos-section { border-left: 3px solid var(--icf-gold); }
.icf-pagos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 540px) { .icf-pagos-grid { grid-template-columns: 1fr; } }
.icf-pago-card {
    background: var(--icf-white); border: 1px solid var(--icf-border);
    border-radius: var(--icf-radius-sm); padding: 14px; text-align: center;
}
.icf-pago-label { font-size: 11px; color: var(--icf-gray); text-transform: uppercase; letter-spacing: .5px; display: block; margin-bottom: 6px; }
.icf-pago-valor { font-size: 20px; font-weight: 700; color: var(--icf-brown); }
.icf-pago-saldo .icf-pago-valor { color: #ef4444; }
.icf-pago-input {
    width: 100%; border: 1.5px solid var(--icf-border);
    border-radius: 8px; padding: 6px 10px;
    font-size: 16px; font-weight: 700; color: var(--icf-brown);
    font-family: var(--icf-font); text-align: center; background: var(--icf-cream2);
}
.icf-pago-input:focus { border-color: var(--icf-gold); outline: none; }
.icf-btn-pago-save { margin-top: 8px; }
.icf-pagos-controls { }

/* ── Notice ─────────────────────────────────────────────────────────────── */
.icf-notice {
    padding: 16px 20px; border-radius: var(--icf-radius-sm);
    font-family: var(--icf-font); font-size: 14px;
}
.icf-notice--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Animaciones ───────────────────────────────────────────────────────── */
@keyframes icf-fadeInUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes icf-fadeIn {
    from { opacity:0; } to { opacity:1; }
}
@keyframes icf-slideUp {
    from { opacity:0; transform:translateY(32px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes icf-shake {
    0%,100% { transform:translateX(0); }
    20%     { transform:translateX(-8px); }
    40%     { transform:translateX(8px); }
    60%     { transform:translateX(-4px); }
    80%     { transform:translateX(4px); }
}
@keyframes icf-spin {
    from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM 1 — Nuevos estilos (restructura 2025)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper Form 1 ─────────────────────────────────────────────────────── */
.icf-form1-wrap {
    max-width: 720px;
    margin: 40px auto;
    font-family: var(--icf-font);
}
@media (max-width: 640px) { .icf-form1-wrap { margin: 20px 12px; } }

/* ── Header Form 1 ──────────────────────────────────────────────────────── */
.icf-form1-header {
    text-align: center;
    margin-bottom: 32px;
}
.icf-form1-title {
    font-size: 26px; font-weight: 700;
    color: var(--icf-brown); margin: 0 0 8px;
    line-height: 1.2;
}
.icf-form1-subtitle {
    font-size: 14px; color: var(--icf-gray); margin: 0;
}

/* ── Panel del formulario ───────────────────────────────────────────────── */
#icf-form1 {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    padding: 44px 48px;
    box-shadow: 0 4px 28px var(--icf-shadow);
}
@media (max-width: 640px) { #icf-form1 { padding: 28px 20px; } }

/* ── Grid de tipo de evento ─────────────────────────────────────────────── */
.icf-event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 500px) { .icf-event-grid { grid-template-columns: repeat(2, 1fr); } }

.icf-event-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    background: var(--icf-white);
    cursor: pointer;
    transition: var(--icf-transition);
    font-family: var(--icf-font);
    color: var(--icf-brown);
    font-size: 13px; font-weight: 500;
    text-align: center;
}
.icf-event-card .icf-event-emoji { font-size: 26px; line-height: 1; }
.icf-event-card:hover {
    border-color: var(--icf-gold-light);
    background: #fdfaf5;
    transform: translateY(-2px);
}
.icf-event-card--selected {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
    transform: translateY(-2px);
}

/* ── Grid de estilos ────────────────────────────────────────────────────── */
.icf-style-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 540px) { .icf-style-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 360px)  { .icf-style-grid { grid-template-columns: repeat(2, 1fr); } }

.icf-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    background: var(--icf-white);
    cursor: pointer;
    transition: var(--icf-transition);
    font-family: var(--icf-font);
    color: var(--icf-brown);
    font-size: 12px; font-weight: 500;
    text-align: center;
}
.icf-style-card svg { color: var(--icf-gold); }
.icf-style-card:hover {
    border-color: var(--icf-gold-light);
    background: #fdfaf5;
}
.icf-style-card--selected {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
}

/* ── WhatsApp split ─────────────────────────────────────────────────────── */
.icf-wa-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.icf-wa-prefix-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 14px;
    border: 1.5px solid var(--icf-border);
    border-radius: 50px;
    background: var(--icf-cream2);
    cursor: pointer;
    font-size: 14px; font-weight: 600;
    color: var(--icf-brown);
    font-family: var(--icf-font);
    transition: var(--icf-transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.icf-wa-prefix-btn:hover { border-color: var(--icf-gold); }
.icf-wa-prefix-btn .icf-wa-flag { font-size: 18px; }
.icf-wa-wrap .icf-input { flex: 1; }

/* ── Botón de fotos (secundario) ────────────────────────────────────────── */
.icf-fotos-row {
    text-align: center;
}
.icf-fotos-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    border: 1.5px solid var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-size: 14px; font-weight: 600;
    font-family: var(--icf-font);
    cursor: pointer;
    transition: var(--icf-transition);
}
.icf-fotos-btn:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}
.icf-fotos-optional {
    display: block; font-size: 12px;
    color: var(--icf-gray); margin-top: 6px;
}

/* ── Modal de fotos ─────────────────────────────────────────────────────── */
.icf-fotos-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: icf-fadeIn .2s ease;
}
.icf-fotos-modal {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    padding: 36px;
    max-width: 460px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: icf-slideUp .3s ease;
    position: relative;
}
.icf-fotos-modal-title {
    font-size: 18px; font-weight: 700;
    color: var(--icf-brown); margin: 0 0 8px;
    padding-right: 32px;
}
.icf-fotos-modal-desc {
    font-size: 14px; color: var(--icf-gray);
    margin: 0 0 24px;
}
.icf-fotos-close {
    position: absolute; top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%; border: 1.5px solid var(--icf-border);
    background: var(--icf-white); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--icf-gray); transition: var(--icf-transition);
}
.icf-fotos-close:hover { background: var(--icf-brown); color: var(--icf-white); border-color: var(--icf-brown); }

.icf-fotos-options { display: flex; flex-direction: column; gap: 12px; }
.icf-fotos-option {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    cursor: pointer; text-decoration: none;
    color: var(--icf-brown); transition: var(--icf-transition);
    background: var(--icf-white);
}
.icf-fotos-option:hover {
    border-color: var(--icf-gold);
    background: #fdf6e3;
}
.icf-fotos-option-icon {
    font-size: 24px; flex-shrink: 0; margin-top: 2px;
}
.icf-fotos-option-title {
    font-size: 14px; font-weight: 700;
    color: var(--icf-brown); margin-bottom: 3px;
    display: block;
}
.icf-fotos-option-desc {
    font-size: 12px; color: var(--icf-gray);
}

/* ── Success state Form 1 ───────────────────────────────────────────────── */
.icf-form-success {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    padding: 60px 48px;
    box-shadow: 0 4px 28px var(--icf-shadow);
    text-align: center;
    animation: icf-fadeInUp .4s ease;
}
.icf-form-success-icon { font-size: 56px; margin-bottom: 16px; }
.icf-form-success-title { font-size: 24px; font-weight: 700; color: var(--icf-brown); margin: 0 0 12px; }
.icf-form-success-text  { font-size: 15px; color: var(--icf-gray); margin: 0; line-height: 1.6; }

/* ── Badges de tipo de evento (dashboard) ───────────────────────────────── */
.icf-evento-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px; font-weight: 700;
    white-space: nowrap; letter-spacing: .2px;
}
.icf-evento-boda        { background: #fce7f3; color: #9d174d; }
.icf-evento-xv_anos     { background: #fdf2f8; color: #a21caf; }
.icf-evento-baby_shower { background: #eff6ff; color: #1d4ed8; }
.icf-evento-graduacion  { background: #ecfdf5; color: #065f46; }
.icf-evento-cumpleanos  { background: #fff7ed; color: #c2410c; }
.icf-evento-otro        { background: #f5f3ff; color: #5b21b6; }

/* ── Header de detalle (badges lado a lado) ─────────────────────────────── */
.icf-detalle-header-badges {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* ── Logo en encabezado del Form 1 ─────────────────────────────────────── */
.icf-form1-logo {
    text-align: center;
    margin-bottom: 10px;
}
.icf-logo-img {
    max-width: 140px;
    width: 100%;
    height: auto;
    display: inline-block;
}

/* ── Texto de aliento para fotos (Form 1) ───────────────────────────────── */
.icf-fotos-encourage {
    font-size: 13px;
    color: var(--icf-gray);
    text-align: center;
    margin: 0 0 12px;
    line-height: 1.5;
    font-style: italic;
}

/* ── Campo "Otro" de estilo ─────────────────────────────────────────────── */
#icf-estilo-otro-wrap {
    margin-top: 12px;
}
#icf-estilo-otro-wrap .icf-input {
    border-radius: var(--icf-radius-sm);
}

/* ── Logo blanco (legacy) ───────────────────────────────────────────────── */
.icf-logo-white-img {
    max-width: 140px;
    width: auto;
    height: 44px;
    display: block;
}

/* ── Logo dorado en dashboard ───────────────────────────────────────────── */
.icf-logo-dash-img {
    max-width: 140px;
    width: auto;
    height: 44px;
    display: block;
}

/* ── Panel de diagnóstico ────────────────────────────────────────────────── */
.icf-debug-panel {
    margin-top: 32px;
    border: 2px solid #3d2b1f;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}
.icf-debug-header {
    background: #3d2b1f;
    color: #f0ebe3;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.icf-debug-clear {
    background: transparent;
    border: 1px solid #c4a882;
    color: #c4a882;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 11px;
}
.icf-debug-clear:hover { background: rgba(255,255,255,.1); }
.icf-debug-body {
    background: #1a1a1a;
    color: #e2e8f0;
    padding: 12px 16px;
    max-height: 360px;
    overflow-y: auto;
}
.icf-debug-placeholder { color: #4a5568; font-style: italic; margin: 0; }
.icf-debug-entry { margin-bottom: 14px; border-bottom: 1px solid #2d3748; padding-bottom: 10px; }
.icf-debug-entry:last-child { border-bottom: none; margin-bottom: 0; }
.icf-debug-entry-title {
    color: #b8960c;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 12px;
}
.icf-debug-ts { color: #718096; font-weight: normal; font-size: 10px; margin-left: 8px; }
.icf-debug-line { padding: 2px 0; line-height: 1.6; }
.icf-debug-ok    { color: #68d391; }
.icf-debug-warn  { color: #f6e05e; }
.icf-debug-error { color: #fc8181; font-weight: 600; }
.icf-debug-test-bar {
    background: #2d3748;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid #3d2b1f;
}

/* ── Botón "+" para actividades personalizadas (Form 2) ─────────────────── */
.icf-add-activity-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px;
    padding: 8px 16px;
    border: 1.5px dashed var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-size: 13px; font-weight: 600;
    font-family: var(--icf-font);
    cursor: pointer;
    transition: var(--icf-transition);
}
.icf-add-activity-btn:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}
.icf-custom-activity-row {
    display: flex; gap: 8px; align-items: center;
    margin-top: 8px;
}
.icf-custom-activity-row .icf-input {
    flex: 1;
    border-radius: var(--icf-radius-sm);
    padding: 10px 14px;
}
.icf-remove-activity-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%; border: 1.5px solid var(--icf-border);
    background: var(--icf-white); color: var(--icf-gray);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: var(--icf-transition);
    font-size: 18px; line-height: 1;
}
.icf-remove-activity-btn:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }

/* ── Campo "Otro" condicional en radios (Form 2) ────────────────────────── */
.icf-otro-input-wrap {
    margin-top: 10px;
    padding-left: 4px;
}
.icf-otro-input-wrap .icf-input {
    border-radius: var(--icf-radius-sm);
}

/* ── Selector de paletas de color (Form 2) ──────────────────────────────── */
.icf-paletas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 4px;
}
@media (max-width: 480px) { .icf-paletas-grid { grid-template-columns: 1fr; } }

.icf-paleta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    cursor: pointer;
    background: var(--icf-white);
    transition: var(--icf-transition);
    font-family: var(--icf-font);
    font-size: 13px; font-weight: 500;
    color: var(--icf-brown);
    user-select: none;
}
.icf-paleta-card:hover {
    border-color: var(--icf-gold-light);
    background: #fdfaf5;
}
.icf-paleta-card--selected {
    border-color: var(--icf-gold);
    background: #fdf6e3;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(184,150,12,.12);
}
.icf-paleta-swatches {
    display: flex; gap: 4px; flex-shrink: 0;
}
.icf-paleta-swatch {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.08);
    flex-shrink: 0;
}

/* ── Modal de fotos (Form 2) ────────────────────────────────────────────── */
.icf-f2-fotos-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 24px;
    border: 1.5px solid var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-size: 14px; font-weight: 600;
    font-family: var(--icf-font);
    cursor: pointer;
    transition: var(--icf-transition);
}
.icf-f2-fotos-btn:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}
.icf-f2-fotos-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: icf-fadeIn .2s ease;
}
.icf-f2-fotos-modal {
    background: var(--icf-white);
    border-radius: var(--icf-radius);
    padding: 36px;
    max-width: 460px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: icf-slideUp .3s ease;
    position: relative;
}

/* ── Upload area (Form 1 y Form 2) ──────────────────────────────────────── */
.icf-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.icf-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-family: var(--icf-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--icf-transition);
    user-select: none;
}
.icf-upload-label:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}
.icf-upload-hint {
    font-size: 11px;
    opacity: .7;
}
.icf-upload-count {
    font-weight: 400;
    opacity: .8;
}
.icf-upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}
.icf-upload-thumb {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--icf-cream2);
    border: 1.5px solid var(--icf-border);
    flex-shrink: 0;
}
/* Botón × para quitar foto individual del preview */
.icf-upload-thumb-del {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: background .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.icf-upload-thumb-del:hover { background: #dc2626; }

.icf-upload-more {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    border: 1.5px dashed var(--icf-gold);
    background: var(--icf-cream2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--icf-gold);
}

/* Form 2 — área de subida (idéntica visualmente a Form 1) */
.icf-f2-upload-area {
    border: 2px dashed var(--icf-gold-light);
    border-radius: var(--icf-radius-sm);
    padding: 32px 20px;
    text-align: center;
    transition: var(--icf-transition);
    background: #fdfaf5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}
.icf-f2-upload-area:hover { border-color: var(--icf-gold); background: #fdf6e3; }

/* Label-botón dentro del área (modo Drive activo) */
.icf-f2-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-family: var(--icf-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--icf-transition);
    user-select: none;
}
.icf-f2-upload-label:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}

/* Botón dentro del área (modo fallback / sin Drive) */
.icf-f2-fotos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid var(--icf-gold);
    border-radius: 50px;
    background: transparent;
    color: var(--icf-gold);
    font-family: var(--icf-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--icf-transition);
    user-select: none;
}
.icf-f2-fotos-btn:hover {
    background: var(--icf-gold);
    color: var(--icf-white);
}

/* ── Dashboard: sección de fotos Drive ─────────────────────────────────── */
.icf-drive-section {}
.icf-drive-photos-wrap {}
.icf-photos-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.icf-photo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--icf-cream2);
    border-radius: 8px;
    border: 1px solid var(--icf-border);
    font-size: 13px;
}
.icf-photo-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--icf-brown);
}
.icf-photo-dl {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #e8f4fd;
    color: #1d6fa5;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}
.icf-photo-dl:hover { background: #1d6fa5; color: #fff; }
.icf-photo-del-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--icf-border);
    background: var(--icf-white);
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: all .2s;
}
.icf-photo-del-btn:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fca5a5;
}

/* ── Form 2: resultado de envío de email ─────────────────────────────────── */
.icf-form2-ok {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    color: #166534;
    font-size: 14px;
    font-weight: 500;
}
.icf-form2-warn {
    padding: 14px 16px;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 10px;
    color: #92400e;
    font-size: 13px;
}
.icf-form2-warn p { margin: 0 0 10px; line-height: 1.5; }
.icf-form2-warn small { color: #a16207; }
.icf-form2-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.icf-form2-link-input {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid #fcd34d;
    border-radius: 8px;
    font-size: 12px;
    background: #fff;
    color: #1c1917;
    font-family: monospace;
    outline: none;
    min-width: 0;
}
.icf-form2-copy-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #b8960c;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
}
.icf-form2-copy-btn:hover { background: #9a7d0a; }

/* ── T&C checkbox (Form 1) ──────────────────────────────────────────────── */
.icf-tac-group { margin-bottom: 8px; }

.icf-tac-label {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 16px 20px;
    background: var(--icf-cream2);
    border: 1.5px solid var(--icf-border);
    border-radius: var(--icf-radius-sm);
    transition: var(--icf-transition);
    user-select: none;
}
.icf-tac-label:hover {
    border-color: var(--icf-gold-light);
    background: #fdfaf5;
}
.icf-tac-label:has(input:checked) {
    border-color: var(--icf-gold);
    background: #fdf6e3;
}

.icf-tac-box { position: relative; flex-shrink: 0; }
.icf-tac-box input[type="checkbox"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.icf-tac-check {
    width: 22px; height: 22px;
    border: 2px solid var(--icf-border);
    border-radius: 6px;
    background: var(--icf-white);
    display: flex; align-items: center; justify-content: center;
    transition: var(--icf-transition);
    flex-shrink: 0;
}
.icf-tac-box input:checked ~ .icf-tac-check {
    background: var(--icf-brown);
    border-color: var(--icf-brown);
}
.icf-tac-box input:checked ~ .icf-tac-check::after {
    content: '';
    width: 6px; height: 11px;
    border: 2.5px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translateY(-1px);
    display: block;
}

.icf-tac-text {
    font-size: 14px;
    color: var(--icf-brown);
    line-height: 1.5;
}
.icf-tac-link {
    color: var(--icf-brown);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid var(--icf-gold);
    padding-bottom: 1px;
    transition: color .2s, border-color .2s;
}
.icf-tac-link:hover {
    color: var(--icf-gold);
    border-color: transparent;
}