@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

/* ===================================================================
   Estudio de Imagen con IA — Estilos
   Compatible con Elementor Pro.
   El color principal se inyecta desde PHP como:
     :root { --eii-primary: #F0DDA6; }
   =================================================================== */

:root {
    --eii-primary:        #f0dda6;
    --eii-primary-light:  #fdf8ec;
    --eii-primary-dark:   #e2c97b;
    --eii-text:           #222425;
    --eii-text-muted:     #80796b;
    --eii-bg:             #ffffff;
    --eii-bg-alt:         #f9fafb;
    --eii-border:         #e5e7eb;
    --eii-radius:         14px;
    --eii-radius-sm:      8px;
    --eii-shadow:         0 4px 24px rgba(0,0,0,0.07);
    --eii-shadow-hover:   0 8px 32px rgba(0,0,0,0.12);
    --eii-transition:     all 0.22s ease;
    --eii-font:           inherit;
}

/* ------------------------------------------------------------------ */
/*  Wrapper principal                                                   */
/* ------------------------------------------------------------------ */
#eii-wrapper {
    font-family:  var(--eii-font);
    color:        var(--eii-text);
    max-width:    760px;
    margin:       0 auto;
    padding:      0 0 48px;
}

#eii-wrapper *,
#eii-wrapper *::before,
#eii-wrapper *::after {
    box-sizing: border-box;
}

/* Montserrat para textos secundarios, descripciones y controles */
#eii-wrapper p,
#eii-wrapper small,
#eii-wrapper label,
#eii-wrapper span,
#eii-wrapper input,
#eii-wrapper textarea,
#eii-wrapper select,
#eii-wrapper .eii-btn,
#eii-wrapper .eii-section-title,
#eii-wrapper .eii-upload-tips,
#eii-wrapper .eii-checkbox-label,
#eii-wrapper .eii-result-note,
#eii-wrapper .eii-error-msg,
#eii-wrapper .eii-study-badge,
#eii-wrapper .eii-back-btn,
#eii-wrapper .eii-result-body {
    font-family: 'Montserrat', sans-serif;
}

/* ------------------------------------------------------------------ */
/*  Barra de pasos                                                      */
/* ------------------------------------------------------------------ */
.eii-steps-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
    margin-bottom:   36px;
    padding-top:     8px;
}

.eii-step-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
}

.eii-step-circle {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--eii-border);
    color:           var(--eii-text-muted);
    font-weight:     700;
    font-size:       14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--eii-transition);
    border:          2px solid transparent;
}

.eii-step-item span:last-child {
    font-size:   11px;
    color:       var(--eii-text-muted);
    white-space: nowrap;
    transition:  var(--eii-transition);
}

.eii-step-line {
    flex:             1;
    min-width:        32px;
    max-width:        80px;
    height:           2px;
    background:       var(--eii-border);
    margin-bottom:    20px;
    transition:       var(--eii-transition);
}

.eii-step-item.active .eii-step-circle {
    background:   var(--eii-primary);
    color:        var(--eii-text);
    border-color: var(--eii-primary);
    box-shadow:   0 0 0 4px var(--eii-primary-light);
}

.eii-step-item.active span:last-child {
    color:       var(--eii-text);
    font-weight: 600;
}

.eii-step-item.completed .eii-step-circle {
    background:   var(--eii-primary-light);
    color:        var(--eii-text);
    border-color: var(--eii-primary-dark);
}

.eii-step-item.completed + .eii-step-line {
    background: var(--eii-primary);
}

/* ------------------------------------------------------------------ */
/*  Panel genérico                                                      */
/* ------------------------------------------------------------------ */
.eii-panel {
    background:    var(--eii-bg);
    border-radius: var(--eii-radius);
    box-shadow:    var(--eii-shadow);
    padding:       36px 36px 40px;
    animation:     eiiFadeIn 0.28s ease;
}

@keyframes eiiFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------ */
/*  Cabecera de panel                                                   */
/* ------------------------------------------------------------------ */
.eii-panel-header {
    text-align:    center;
    margin-bottom: 32px;
    position:      relative;
}

.eii-panel-header h2 {
    font-size:     1.6rem;
    font-weight:   700;
    color:         var(--eii-text);
    margin:        0 0 6px;
    line-height:   1.25;
}

.eii-panel-header p {
    font-size:  0.95rem;
    color:      var(--eii-text-muted);
    margin:     0;
}

.eii-study-badge {
    display:       inline-block;
    background:    var(--eii-primary-light);
    color:         var(--eii-text);
    font-size:     0.82rem;
    font-weight:   600;
    padding:       4px 14px;
    border-radius: 99px;
    margin-top:    8px !important;
}

/* ------------------------------------------------------------------ */
/*  Paso 1 — Tarjetas de selección                                      */
/* ------------------------------------------------------------------ */
.eii-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   20px;
}

.eii-study-card {
    border:        2px solid var(--eii-border);
    border-radius: var(--eii-radius);
    padding:       28px 24px 24px;
    text-align:    center;
    transition:    var(--eii-transition);
    cursor:        default;
}

.eii-study-card:hover {
    border-color: var(--eii-primary);
    box-shadow:   var(--eii-shadow-hover);
    transform:    translateY(-3px);
}

.eii-card-icon {
    width:        64px;
    height:       64px;
    margin:       0 auto 16px;
    background:   var(--eii-primary-light);
    border-radius: 50%;
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        var(--eii-text);
}

.eii-card-icon svg {
    width:  32px;
    height: 32px;
}

.eii-study-card h3 {
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--eii-text);
    margin:        0 0 8px;
}

.eii-study-card p {
    font-size:     0.875rem;
    color:         var(--eii-text-muted);
    line-height:   1.55;
    margin:        0 0 20px;
}

/* ------------------------------------------------------------------ */
/*  Botones generales                                                   */
/* ------------------------------------------------------------------ */
.eii-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         11px 24px;
    border-radius:   99px;
    font-size:       0.9rem;
    font-weight:     600;
    cursor:          pointer;
    text-decoration: none;
    border:          2px solid transparent;
    transition:      var(--eii-transition);
    white-space:     nowrap;
}

.eii-btn-primary {
    background: var(--eii-primary);
    color:      var(--eii-text);
}

.eii-btn-primary:hover {
    background: var(--eii-primary-dark);
    color:      var(--eii-text);
    transform:  translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 218, 123, 0.615);
}

.eii-btn-secondary {
    background:   transparent;
    color:        var(--eii-text);
    border-color: var(--eii-text);
}

.eii-btn-secondary:hover {
    background:   var(--eii-primary);
    color:        var(--eii-text);
    border-color: var(--eii-primary);
    transform:    translateY(-1px);
    box-shadow:   0 4px 14px rgba(240, 221, 166, 0.55);
}

.eii-btn-ghost {
    background:   transparent;
    color:        var(--eii-text-muted);
    border-color: var(--eii-border);
    font-size:    0.82rem;
}

.eii-btn-ghost:hover {
    background: var(--eii-bg-alt);
    color:      var(--eii-text);
}

/* Centrado de contenido interior en el botón submit */
.eii-btn-label,
.eii-btn-loading {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    gap:         8px;
    line-height: 1;
}

.eii-btn-label svg,
.eii-btn-loading svg {
    flex-shrink:    0;
    vertical-align: middle;
    position:       relative;
    top:            0;
}

.eii-btn-submit {
    width:      100%;
    padding:    14px 24px;
    font-size:  1rem;
    margin-top: 8px;
    position:   relative;
}

.eii-btn-submit:disabled {
    opacity: 0.75;
    cursor:  not-allowed;
    transform: none !important;
}

/* Botón volver */
.eii-back-btn {
    position:      absolute;
    left:          0;
    top:           0;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    none;
    border:        none;
    color:         var(--eii-text-muted);
    font-size:     0.85rem;
    cursor:        pointer;
    padding:       4px 10px;
    border-radius: var(--eii-radius-sm);
    transition:    var(--eii-transition);
}

.eii-back-btn:hover {
    color:      var(--eii-primary-dark);
    background: var(--eii-primary-light);
}

.eii-back-btn svg {
    width:  16px;
    height: 16px;
}

/* ------------------------------------------------------------------ */
/*  Formulario — Paso 2                                                 */
/* ------------------------------------------------------------------ */
.eii-section-title {
    font-size:     0.78rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--eii-text-muted);
    margin:        24px 0 14px;
    padding-bottom: 8px;
    border-bottom:  1px solid var(--eii-border);
}

.eii-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
}

.eii-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.eii-field-full {
    grid-column: 1 / -1;
}

.eii-field label {
    font-size:   0.83rem;
    font-weight: 600;
    color:       var(--eii-text);
}

.eii-required {
    color: #ef4444;
}

.eii-field input,
.eii-field textarea,
.eii-field select {
    width:         100%;
    padding:       10px 13px;
    border:        1.5px solid var(--eii-border);
    border-radius: var(--eii-radius-sm);
    font-size:     0.9rem;
    color:         var(--eii-text);
    background:    var(--eii-bg);
    transition:    var(--eii-transition);
    outline:       none;
    font-family:   inherit;
}

.eii-field input:focus,
.eii-field textarea:focus {
    border-color: var(--eii-primary-dark);
    box-shadow:   0 0 0 3px var(--eii-primary-light);
}

.eii-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* ------------------------------------------------------------------ */
/*  Tips de subida                                                      */
/* ------------------------------------------------------------------ */
.eii-upload-tips {
    background:    var(--eii-primary-light);
    border-radius: var(--eii-radius-sm);
    padding:       14px 18px;
    font-size:     0.85rem;
    color:         var(--eii-text);
    margin-bottom: 14px;
    line-height:   1.6;
}

.eii-upload-tips strong {
    display:       block;
    margin-bottom: 6px;
    color:         var(--eii-primary-dark);
}

.eii-upload-tips ul {
    margin:  0;
    padding: 0 0 0 4px;
    list-style: none;
}

.eii-upload-tips li {
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------ */
/*  Zona de carga (dropzone)                                            */
/* ------------------------------------------------------------------ */
.eii-dropzone {
    border:        2px dashed var(--eii-border);
    border-radius: var(--eii-radius);
    padding:       24px;
    cursor:        pointer;
    transition:    var(--eii-transition);
    min-height:    140px;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    justify-content: center;
    background:    var(--eii-bg-alt);
    margin-bottom: 20px;
}

.eii-dropzone:hover,
.eii-dropzone:focus {
    border-color: var(--eii-primary);
    background:   var(--eii-primary-light);
    outline:      none;
}

.eii-dropzone.drag-over {
    border-color: var(--eii-primary-dark);
    background:   var(--eii-primary-light);
    box-shadow:   0 0 0 4px rgba(240, 221, 166, 0.45);
}

.eii-dropzone-placeholder {
    text-align: center;
    color:      var(--eii-text-muted);
}

.eii-dropzone-placeholder svg {
    width:        40px;
    height:       40px;
    margin-bottom: 10px;
    color:        var(--eii-primary);
    opacity:      0.7;
}

.eii-dropzone-placeholder p {
    font-size:  0.9rem;
    color:      var(--eii-text-muted);
    margin:     0 0 4px;
}

.eii-dropzone-placeholder p strong {
    color:           var(--eii-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition:      var(--eii-transition);
}

.eii-dropzone:hover .eii-dropzone-placeholder p strong {
    text-decoration-color: var(--eii-primary);
}

.eii-dropzone-placeholder small {
    font-size: 0.78rem;
    color:     var(--eii-text-muted);
}

.eii-dz-browse-btn {
    display:        inline-block;
    margin-top:     12px;
    margin-bottom:  10px;
    padding:        9px 22px;
    background:     var(--eii-primary);
    color:          var(--eii-text);
    border:         none;
    border-radius:  99px;
    font-family:    'Montserrat', sans-serif;
    font-size:      0.82rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     var(--eii-transition);
    pointer-events: auto;
}

.eii-dz-browse-btn:hover {
    background: var(--eii-primary-dark);
}

/* Aviso privacidad de imágenes */
.eii-upload-privacy {
    text-align:  center;
    font-size:   0.74rem;
    color:       var(--eii-text-muted);
    margin:      -6px 0 14px;
    font-style:  italic;
    letter-spacing: 0.01em;
}

/* Preview grid */
.eii-preview-grid {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    width:     100%;
}

.eii-preview-item {
    position:      relative;
    width:         90px;
    height:        90px;
    border-radius: var(--eii-radius-sm);
    overflow:      hidden;
    border:        2px solid var(--eii-border);
    flex-shrink:   0;
}

.eii-preview-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.eii-preview-remove {
    position:        absolute;
    top:             3px;
    right:           3px;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      rgba(17,24,39,0.8);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    font-size:       14px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      var(--eii-transition);
    padding:         0;
    z-index:         2;
}

.eii-preview-remove:hover {
    background: #ef4444;
    transform:  scale(1.1);
}

/* ------------------------------------------------------------------ */
/*  Checkbox de privacidad                                              */
/* ------------------------------------------------------------------ */
.eii-checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   0.82rem;
    color:       var(--eii-text-muted);
    cursor:      pointer;
    margin:      4px 0 16px;
    line-height: 1.55;
    user-select: none;
}

.eii-checkbox-label input[type="checkbox"] {
    width:      16px;
    height:     16px;
    min-width:  16px;
    margin:     2px 0 0;
    cursor:     pointer;
    accent-color: var(--eii-primary);
}

.eii-checkbox-label a {
    color:      var(--eii-text);
    font-weight: 600;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/*  Mensaje de error                                                    */
/* ------------------------------------------------------------------ */
.eii-error-msg {
    background:    #fef2f2;
    border:        1px solid #fecaca;
    color:         #dc2626;
    border-radius: var(--eii-radius-sm);
    padding:       12px 16px;
    font-size:     0.87rem;
    margin-bottom: 14px;
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
}

/* ------------------------------------------------------------------ */
/*  Spinner de carga                                                    */
/* ------------------------------------------------------------------ */
.eii-spinner {
    display:          inline-block;
    width:            18px;
    height:           18px;
    border:           2.5px solid rgba(34, 36, 37, 0.18);
    border-top-color: var(--eii-text);
    border-radius:    50%;
    animation:        eiiSpin 0.65s linear infinite;
    flex-shrink:      0;
}

@keyframes eiiSpin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/*  Paso 3 — Resultado                                                  */
/* ------------------------------------------------------------------ */
.eii-result-header {
    text-align:    center;
    margin-bottom: 28px;
}

.eii-result-emoji {
    font-size:     3rem;
    line-height:   1;
    margin-bottom: 12px;
    display:       block;
}

.eii-result-header h2 {
    font-size:   1.55rem;
    font-weight: 700;
    margin:      0 0 6px;
}

.eii-result-header p {
    font-size:  0.9rem;
    color:      var(--eii-text-muted);
    margin:     0;
}

.eii-result-body {
    border:        1.5px solid var(--eii-primary);
    border-radius: var(--eii-radius);
    padding:       32px 28px 28px;
    margin-bottom: 28px;
    background:    linear-gradient(160deg, var(--eii-primary-light) 0%, #ffffff 55%);
    text-align:    center;
    color:         var(--eii-text);
}

/* Frase principal generada por Claude */
.eii-result-main {
    font-size:      1.2rem;
    font-weight:    700;
    color:          var(--eii-text);
    line-height:    1.45;
    letter-spacing: 0.01em;
    font-family:    inherit;
    margin-bottom:  0;
}

.eii-result-main p {
    margin: 0;
    font-size:   inherit;
    font-weight: inherit;
}

.eii-result-actions {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
    margin-bottom:   20px;
}

.eii-result-actions .eii-btn {
    min-width: 200px;
    padding:   13px 28px;
}

/* Mensaje comercial fijo añadido por PHP */
.eii-result-cta {
    display:       block;
    position:      relative;
    margin-top:    24px;
    padding:       18px 20px 18px 46px;
    background:    #ffffff;
    border:        1px solid var(--eii-primary);
    border-radius: var(--eii-radius-sm);
    font-family:   'Montserrat', sans-serif;
    font-size:     0.88rem;
    font-style:    normal;
    color:         var(--eii-text);
    line-height:   1.75;
    text-align:    left;
}

.eii-result-cta::before {
    content:   '✦';
    position:  absolute;
    left:      17px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--eii-primary-dark);
    font-size: 1rem;
    line-height: 1;
}

.eii-result-note {
    text-align:  center;
    font-size:   0.82rem;
    font-style:  italic;
    color:       var(--eii-text-muted);
    margin:      0 0 24px;
    padding:     0 16px;
    background:  transparent;
    border:      none;
}

#eii-new-analysis-btn {
    display: block;
    margin:  0 auto;
}

/* ------------------------------------------------------------------ */
/*  Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .eii-panel {
        padding: 24px 20px 28px;
    }

    .eii-cards-grid {
        grid-template-columns: 1fr;
    }

    .eii-form-grid {
        grid-template-columns: 1fr;
    }

    .eii-panel-header h2 {
        font-size: 1.3rem;
    }

    .eii-steps-bar {
        gap: 0;
    }

    .eii-step-item span:last-child {
        font-size: 10px;
    }

    .eii-step-circle {
        width:  30px;
        height: 30px;
        font-size: 12px;
    }

    .eii-step-line {
        min-width: 16px;
    }

    .eii-result-actions {
        flex-direction: column;
        align-items:    stretch;
    }

    .eii-result-actions .eii-btn {
        min-width: unset;
        width: 100%;
    }

    .eii-back-btn {
        position: relative;
        margin-bottom: 12px;
    }
}