/* ==========================================================================
   public/css/cotizador.css | MAGNA Interactive Quotation System (Magna.md)
   Tarjetas blancas con hairline, modal redondeado, CTA pill naranja y
   barra de captura inspirada en el "Prompt Input Bar".
   ========================================================================== */

/* 1. INSTRUCCIONES SUPERIORES */
.instrucciones-cotizador { margin-bottom: var(--spacing-48) !important; }

.grid-instrucciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-16);
    text-align: left;
}

.paso-instruccion {
    padding: var(--spacing-24);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-card-sm);
    background: transparent;
}

.paso-instruccion h4 {
    font-size: var(--text-subheading);
    letter-spacing: -0.02em;
    color: var(--color-ink-black);
    margin: 0 0 var(--spacing-8);
}

.paso-instruccion .card-num { color: var(--color-ember-orange); margin-bottom: var(--spacing-8); }

/* 2. GRID DE TARJETAS */
.cotizador-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--spacing-16);
    margin-top: var(--spacing-24);
    position: relative;
}

.cotizacion-card-v2 {
    background: var(--surface-card-white);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-card-sm);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    min-height: 320px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.cotizacion-card-v2:hover:not(.focused) {
    border-color: var(--color-ink-black);
    transform: translateY(-4px);
}
.cotizacion-card-v2:hover:not(.focused) .icon-box-premium { color: var(--color-ember-orange); }

/* Tarjeta con selección guardada */
.cotizacion-card-v2.is-selected { border-color: var(--color-ember-orange); box-shadow: inset 0 0 0 1px var(--color-ember-orange); }

.cotizacion-card-v2 h3 {
    font-size: var(--text-heading-sm);
    letter-spacing: -0.03em;
    color: var(--color-ink-black);
    margin: 0 0 var(--spacing-8);
}

.cotizacion-card-v2 .icon-box-premium { margin-bottom: var(--spacing-40); }
.cotizacion-card-v2 h3 { margin-top: auto; }

.detail-text {
    font-size: 15px;
    color: var(--color-pewter);
    line-height: 1.5;
    margin: 0;
}

/* 3. MODO FOCUS (CAPA OSCURA Y MODAL) */
.cotizador-grid.has-focus::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(14, 14, 15, 0.72);
    backdrop-filter: blur(6px);
    z-index: 1100;
    pointer-events: all;
}

.cotizador-grid.has-focus .cotizacion-card-v2:not(.focused) {
    opacity: 0;
    visibility: hidden;
}

.cotizacion-card-v2.focused {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 32px);
    max-width: 600px;
    min-height: 0;
    max-height: 85vh;
    padding: var(--spacing-48);
    border: none;
    border-radius: var(--radius-cards);
    z-index: 1200;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    cursor: default;
}
.cotizacion-card-v2.focused .icon-box-premium { margin-bottom: var(--spacing-24); color: var(--color-ember-orange); }
.cotizacion-card-v2.focused h3 { margin-top: 0; }

/* 4. FORMULARIO INTERNO EN TARJETA */
.form-content-hidden { display: none; }

.focused .form-content-hidden {
    order: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-16);
    width: 100%;
    margin-top: var(--spacing-32);
    animation: fadeInUp 0.4s ease forwards;
}

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

.form-group-select { width: 100%; max-width: 420px; }

.plan-selector {
    width: 100%;
    appearance: none;
    background: var(--surface-card-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230e0e0f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-inputs);
    padding: 14px 40px 14px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--color-ink-black);
    cursor: pointer;
    outline: none;
}
.plan-selector:focus { border-color: var(--color-burnt-rust); box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.12); }

.btn-save-selection {
    padding: 12px 28px;
    background: var(--color-ember-orange);
    color: var(--color-pure-white);
    border: none;
    border-radius: var(--radius-buttons);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-save-selection:hover { background: var(--color-burnt-rust); }

/* 5. BOTÓN DE CIERRE (X) */
.close-card {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--color-warm-canvas);
    color: var(--color-ink-black);
    border: 1px solid var(--color-sand);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.close-card:hover { background: var(--color-ink-black); color: var(--color-pure-white); }
.focused .close-card { display: flex; }

/* 6. RESUMEN DE CONFIGURACIÓN (Dark Preview Card) */
.resumen-container {
    margin: 0 0 var(--spacing-24);
    padding: var(--spacing-32);
    background: var(--surface-dark-preview);
    color: var(--color-pure-white);
    border-radius: var(--radius-card-sm);
    text-align: left;
    animation: slideIn 0.4s ease;
}
.resumen-container .subtitulo-editorial { color: var(--color-stone); }

#lista-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.resumen-item {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-buttons);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.resumen-item strong { color: var(--color-peach-blush); font-weight: 500; }

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

/* 7. CAPTURA FINAL (Feature card + Prompt Input Bar) */
.data-reveal-box {
    margin-top: var(--spacing-48);
    padding: var(--spacing-64) var(--spacing-32);
    background: linear-gradient(135deg, var(--color-peach-blush) 0%, var(--color-sunset-coral) 100%);
    border-radius: var(--radius-cards);
    color: var(--color-ink-black);
    text-align: center;
}

.message-box { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-12); }
.message-box p { margin: 0; color: var(--color-ink-black); font-size: var(--text-subheading); letter-spacing: -0.02em; }

.magna-form-inline {
    display: flex;
    gap: var(--spacing-8);
    max-width: 820px;
    margin: var(--spacing-32) auto 0;
    padding: 8px;
    background: var(--surface-card-white);
    border: 1px solid var(--color-sand);
    border-radius: var(--radius-prompt);
    align-items: center;
}

.magna-form-inline input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--color-ink-black);
    font: inherit;
    font-size: 16px;
    outline: none;
}
.magna-form-inline input + input { border-left: 1px solid var(--color-sand); border-radius: 0; }
.magna-form-inline input::placeholder { color: var(--color-stone); }
.magna-form-inline input:focus { background: var(--color-warm-canvas); }

.magna-form-inline .btn-premium { flex: 0 0 auto; padding: 14px 24px; }

@media (min-width: 1100px) { .cotizador-grid { grid-template-columns: repeat(5, 1fr); } }

/* RESPONSIVO */
@media (max-width: 768px) {
    .grid-instrucciones { grid-template-columns: 1fr; }
    .cotizacion-card-v2.focused { width: calc(100% - 16px); padding: var(--spacing-48) 20px var(--spacing-32); max-height: 92vh; border-radius: 28px; }
    .data-reveal-box { padding: var(--spacing-40) 16px; border-radius: 28px; }
    .magna-form-inline { flex-direction: column; align-items: stretch; }
    .magna-form-inline input + input { border-left: none; border-top: 1px solid var(--color-sand); }
    .magna-form-inline .btn-premium { width: 100%; }
}