/*
 * Capa de marca para las pantallas de producto que siguen con main.css
 * (constructor, login, registro, demos, pago). Se carga DESPUES de main.css y
 * de las hojas propias de cada pantalla: redefine los tokens al diseno nuevo
 * (papel, tinta y acento teja de site.css) y arregla los pocos colores fijos
 * pensados para el tema oscuro antiguo. Los componentes no cambian de clases.
 */

:root {
    --primary: #C2410C;
    --primary-dark: #9A3412;
    --primary-light: #C2410C;       /* enlaces sobre claro: 4.6:1 */
    --secondary: #9A3412;
    --accent: #1F4D3A;

    --bg-dark: #F5F0E6;
    --bg-card: #FFFDF8;
    --bg-elevated: #FFFFFF;
    --bg-surface: #EDE5D6;

    --text-primary: #16130E;
    --text-secondary: #4A443A;
    --text-muted: #6B6357;

    --success: #1F7A45;
    --warning: #B45309;
    --error: #B42318;

    --border: rgba(22, 19, 14, .14);
    --shadow: 0 2px 4px rgba(22, 19, 14, .05), 0 22px 48px -20px rgba(22, 19, 14, .35);
    --shadow-glow: 0 10px 24px -12px rgba(194, 65, 12, .7);

    --gradient-primary: linear-gradient(135deg, #C2410C 0%, #B93A12 100%);
    --gradient-dark: linear-gradient(180deg, #F5F0E6 0%, #F5F0E6 100%);
    --gradient-card: none;

    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;

    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

body { background: var(--bg-dark); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.btn { border-radius: 999px; }
.btn-primary { color: #fff; }
.btn-primary:hover { box-shadow: 0 14px 28px -12px rgba(194, 65, 12, .8); }
.btn-secondary { background: #fff; border-color: rgba(22, 19, 14, .22); }
.btn-secondary:hover { background: var(--bg-surface); border-color: var(--text-primary); }
.btn-outline { color: var(--primary); }
.text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--primary); }

.form-input { background: #fff; border-color: rgba(22, 19, 14, .22); border-radius: 12px; }
.form-input:focus { box-shadow: 0 0 0 4px #F9DCCB; }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234A443A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.card:hover { box-shadow: var(--shadow); }
.navbar { background: rgba(245, 240, 230, .9); }
.badge-success { background: #D8E6DC; }
.badge-warning { background: #FDECC8; }
.badge-error { background: #FDE2DE; }
.alert-success { background: #EAF3EC; }
.alert-error { background: #FDECEA; }
.alert-info { background: #EAF3EC; border-color: var(--accent); color: var(--accent); }

/* ---- Modales: siempre caben en la pantalla y hacen scroll por dentro ---- */
.modal-overlay {
    background: rgba(22, 19, 14, .55);
    backdrop-filter: blur(3px);
    padding: 16px;
    overscroll-behavior: contain;
}
.modal {
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow);
    padding: 0 clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px);
}
.modal-header {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-card);
    padding: clamp(20px, 3vw, 32px) 0 1rem;
    margin-bottom: .5rem;
}
.modal-header h3 { margin: 0; font-size: 1.35rem; }
.modal-close {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--bg-surface); color: var(--text-primary);
    display: grid; place-items: center; line-height: 1;
}
@media (max-width: 560px) {
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal-overlay .modal, .help-modal .modal {
        margin: 0; width: 100%; max-width: none !important;
        border-radius: 24px 24px 0 0;
        max-height: 92vh; max-height: 92dvh;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .modal-overlay .modal { transform: translateY(24px); }
    .modal-overlay.active .modal { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .modal, .modal-overlay { transition: none !important; }
}

/* ---- Constructor ---- */
.color-option:hover, .color-option.selected { border-color: var(--text-primary); }
.logo { font-family: var(--font-display); }
textarea.form-input, .form-input { font-family: inherit; }

/* Asistente por pasos: anillo del paso actual y barra sin scroll visible */
.wizard { scrollbar-width: none; }
.wizard::-webkit-scrollbar { display: none; }
.wizard-step.is-now .wizard-dot { box-shadow: 0 0 0 4px #F9DCCB; }
.wizard-step.is-done .wizard-dot { background: #D8E6DC; color: #1F4D3A; border-color: #9FC3AC; }

/* Tarjeta de la guia del constructor (estilos en linea en constructor/index.php) */
.constructor-guide-card {
    background: #16130E !important;
    border-color: rgba(245, 240, 230, .12) !important;
    box-shadow: 0 22px 48px -18px rgba(22, 19, 14, .6) !important;
}
.constructor-guide-card .guide-card-title { color: #F5F0E6; font-family: var(--font-display); font-size: 1.05rem; }
.constructor-guide-card .guide-card-desc { color: #BDB3A2; }
.constructor-guide-card .guide-dot { background: rgba(245, 240, 230, .18); }
.constructor-guide-card .guide-dot.done { background: rgba(240, 100, 58, .5); }
.constructor-guide-card .guide-dot.active { background: #F0643A; }
.guide-highlight { outline-color: #C2410C !important; animation: none; }

.help-step-number { color: #fff; }

/* Foto de portada en el paso "Tu negocio" */
.cover-field { display: flex; gap: var(--space-md); align-items: center; }
.cover-thumb {
    position: relative; flex: none; width: 96px; aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border);
    display: grid; place-items: center; text-align: center;
}
.cover-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-thumb__default { font-size: .72rem; color: var(--text-muted); padding: .4rem; line-height: 1.25; }
.cover-actions { display: grid; gap: .4rem; justify-items: start; }
.cover-reset { background: none; border: 0; padding: .3rem 0; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: .85rem; cursor: pointer; }
.cover-hint { display: block; margin-top: .5rem; color: var(--text-muted); font-size: .8rem; line-height: 1.45; }
[hidden] { display: none !important; }