/* ═══════════════════════════════════════════════════════════
   ESM Frontend v3 — Selector, My Account, DNI, Cuotas
═══════════════════════════════════════════════════════════ */

/* ── Contenedor principal ─────────────────────────────── */
.esm-selector-wrap {
    margin: 24px 0;
    padding: 20px 24px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

/* ── Campo selector de padre ──────────────────────────── */
.esm-field-label { display: block; margin-bottom: 10px; font-size: 15px; }

.esm-parent-select {
    width: 100%; max-width: 520px; padding: 10px 14px;
    font-size: 14px; border: 2px solid #ccc; border-radius: 6px;
    background: #fff; transition: border-color .2s;
}
.esm-parent-select:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 0 3px rgba(0,115,170,.15); }

.esm-seats-info { margin-top: 8px; font-size: 13px; color: #555; }
.esm-seats-info strong { color: #00a32a; }
.esm-no-parents { color: #777; font-style: italic; }
.esm-stock-info { font-size: 13px; color: #555; margin-top: 6px; }

/* ── Add-ons ──────────────────────────────────────────── */
.esm-addons-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e0e0e0; }
.esm-addons-section h4 { margin: 0 0 6px; font-size: 14px; }
.esm-addon-desc { font-size: 12px; color: #777; margin: 0 0 12px; }

.esm-addon-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; margin-bottom: 8px; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 6px; gap: 12px;
}
.esm-addon-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.esm-addon-price { font-size: 13px; color: #0073aa; font-weight: 600; }
.esm-no-stock { color: #d63638; font-size: 12px; }

.esm-addon-tag {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px; margin-left: 6px;
}
.esm-addon-tag.mesa  { background: #d5f5e3; color: #1e8449; }
.esm-addon-tag.silla { background: #d6eaf8; color: #2471a3; }

/* ── Qty Buttons ──────────────────────────────────────── */
.esm-addon-qty { display: flex; align-items: center; gap: 6px; }

.esm-qty-btn {
    width: 30px; height: 30px; border: 1px solid #ccc; background: #f6f7f7;
    border-radius: 4px; font-size: 16px; line-height: 1; cursor: pointer;
    padding: 0; transition: background .15s;
}
.esm-qty-btn:hover:not(:disabled) { background: #e0e0e0; }
.esm-qty-btn:disabled { opacity: .4; cursor: not-allowed; }

.esm-qty-input {
    width: 54px; padding: 5px 6px; text-align: center;
    border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
}

/* ── Servicio wrap ─────────────────────────────────────── */
.esm-service-header {
    background: #f0f7ff; border: 1px solid #b8d4f0; border-radius: 6px;
    padding: 12px 16px; margin-bottom: 16px; font-size: 14px;
}
.esm-service-header p { margin: 4px 0; }
.esm-service-note { font-size: 12px; color: #666; font-style: italic; }

/* ── Entrada General ──────────────────────────────────── */
.esm-entrada-header {
    background: #f0faf0; border: 1px solid #b8e0b8; border-radius: 6px;
    padding: 12px 16px; margin-bottom: 16px; font-size: 14px;
}
.esm-entrada-header p { margin: 4px 0; }
.esm-entrada-desc { font-size: 13px; color: #555; }

/* ── Avisos ───────────────────────────────────────────── */
.esm-login-notice, .esm-already-purchased {
    padding: 14px 18px; background: #fff3cd; border: 1px solid #ffc107;
    border-radius: 6px; margin: 16px 0; font-size: 14px;
}
.esm-already-purchased { background: #d4edda; border-color: #28a745; }

/* ── My Account ───────────────────────────────────────── */
.esm-account-block {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    padding: 20px 24px; margin-bottom: 24px;
}
.esm-account-title {
    margin: 0 0 14px; padding-bottom: 10px;
    border-bottom: 2px solid #0073aa; font-size: 17px;
}

.esm-status {
    display: inline-block; padding: 5px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.esm-status.active  { background: #d4edda; color: #155724; }
.esm-status.pending { background: #fff3cd; color: #856404; }

/* ── Opciones de contratación (estado pendiente) ──────── */
.esm-pending-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.esm-pending-opt {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px 22px;
    background: #fafafa;
    transition: border-color .2s;
}

.esm-pending-opt-full {
    border-color: #b8d4f0;
    background: #f0f7ff;
}

.esm-pending-opt-cuotas {
    border-color: #c8e6c9;
    background: #f9fff9;
}

.esm-pending-opt-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: #0073aa;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.esm-pending-opt-tag-cuotas {
    background: #2e7d32;
}

.esm-pending-opt-price {
    font-size: 28px;
    font-weight: 700;
    color: #0073aa;
    margin-bottom: 8px;
    line-height: 1;
}

.esm-pending-opt-desc {
    font-size: 13px;
    color: #555;
    margin: 0 0 14px;
    line-height: 1.5;
}

.esm-pending-btn-full {
    display: inline-block;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Dentro de la opción cuotas: el panel no necesita margin-top */
.esm-pending-opt-cuotas .esm-inst-section {
    margin-top: 12px;
}

/* ── Opciones de pago legacy (compatibilidad) ─────────── */
.esm-option-card {
    flex: 1; min-width: 220px; padding: 16px; background: #f8f9fa;
    border: 1px solid #dee2e6; border-radius: 8px;
}
.esm-option-card h4 { margin: 0 0 8px; font-size: 15px; }
.esm-option-desc { font-size: 12px; color: #666; margin: 6px 0 10px; }
.esm-service-price { font-size: 20px; font-weight: 700; color: #0073aa; margin-bottom: 10px; }

/* ── Seats panel ──────────────────────────────────────── */
.esm-seats-panel {
    display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap;
}
.esm-seat-stat {
    text-align: center; background: #f6f7f7; padding: 12px 16px;
    border-radius: 6px; min-width: 80px;
}
.esm-seat-stat .num {
    display: block; font-size: 26px; font-weight: 700; line-height: 1; color: #1d2327;
}
.esm-seat-stat .lbl {
    display: block; font-size: 10px; color: #646970; margin-top: 4px;
    text-transform: uppercase; letter-spacing: .3px;
}
.esm-seat-stat.sold .num { color: #d63638; }
.esm-seat-stat.avail .num { color: #00a32a; }

.esm-event-link { margin: 10px 0; font-size: 14px; }
.esm-btn-event { margin-left: 10px !important; }

/* ── Installments panel ───────────────────────────────── */
.esm-inst-section {
    margin-top: 24px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

/* Header */
.esm-inst-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px;
    padding: 14px 18px !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.esm-inst-title {
    font-size: 15px;
    font-weight: 700;
    color: #1d2327;
}

.esm-inst-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.esm-inst-bar {
    width: 120px;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.esm-inst-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00a32a, #46b450);
    border-radius: 4px;
    transition: width .4s ease;
}

.esm-inst-bar-label {
    font-size: 12px;
    color: #646970;
    white-space: nowrap;
}

/* Lista de cuotas */
.esm-cuotas-list {
    padding: 8px 0;
}

.esm-cuota-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px 18px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background .15s;
    list-style: none !important;
    margin: 0 !important;
}

.esm-cuota-row:last-child { border-bottom: 0; }

/* Estados de fila */
.esm-cuota-paid      { background: #f6fef6; }
.esm-cuota-available { background: #fff; }
.esm-cuota-available:hover { background: #fafbff; }
.esm-cuota-locked    { background: #fafafa; opacity: .7; }

/* Indicador izquierdo (checkbox / check / lock) */
.esm-cuota-indicator {
    flex-shrink: 0 !important;
    width: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.esm-cuota-indicator input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0073aa;
}

.esm-cuota-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #00a32a;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.esm-cuota-lock {
    font-size: 14px;
    opacity: .5;
}

/* Cuerpo: número + precio */
.esm-cuota-body {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
}

.esm-cuota-num {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    min-width: 80px;
}

.esm-cuota-price {
    font-size: 14px;
    font-weight: 700;
    color: #0073aa;
}

/* Meta: badge + fecha */
.esm-cuota-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex-shrink: 0 !important;
}

.esm-cuota-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.esm-cb-paid      { background: #d4edda; color: #155724; }
.esm-cb-available { background: #fff3cd; color: #856404; }
.esm-cb-locked    { background: #e9ecef; color: #6c757d; }

.esm-cuota-date {
    font-size: 11px;
    color: #8c8f94;
}

/* Caja de pago (botón + resumen) */
.esm-inst-paybox {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px;
    padding: 14px 18px !important;
    background: #0073aa !important;
    border-top: 1px solid #005f8a !important;
}

.esm-inst-paybox-info {
    display: flex !important;
    align-items: center !important;
    gap: 20px;
    color: #fff !important;
    font-size: 14px;
}

.esm-inst-paybox-count { font-weight: 500; }
.esm-inst-paybox-total { font-weight: 700; font-size: 16px; }

.esm-sel-total { font-size: 18px; }

.esm-inst-paybox .esm-pay-inst-btn {
    background: #fff !important;
    color: #0073aa !important;
    border-color: #fff !important;
    font-weight: 700;
    padding: 8px 22px !important;
    font-size: 14px !important;
}

.esm-inst-paybox .esm-pay-inst-btn:hover {
    background: #e8f4fb !important;
}

.esm-inst-paybox .esm-pay-inst-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Completo */
.esm-inst-complete {
    padding: 14px 18px;
    background: #d4edda;
    text-align: center;
    font-size: 14px;
    color: #155724;
}

/* ── My Account: secciones activas ── */
.esm-account-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e8e8e8;
}

.esm-account-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #8c8f94;
    margin: 0 0 12px;
}

/* Legacy badge styles (compatibilidad) */
.esm-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700;
}
.esm-badge.ok      { background: #d4edda; color: #155724; }
.esm-badge.pending { background: #fff3cd; color: #856404; }
.esm-badge.locked  { background: #e9ecef; color: #6c757d; }

/* ── Responsive cuotas ── */
@media (max-width: 600px) {
    .esm-inst-header { flex-direction: column; align-items: flex-start; }
    .esm-inst-bar    { width: 100%; }
    .esm-cuota-body  { flex-direction: column; align-items: flex-start; gap: 2px; }
    .esm-cuota-meta  { flex-direction: column; align-items: flex-end; }
    .esm-inst-paybox { flex-direction: column; align-items: stretch; }
    .esm-inst-paybox .esm-pay-inst-btn { text-align: center; }
}

/* ── DNI Section ──────────────────────────────────────── */
.esm-dni-section {
    margin-top: 20px; padding: 16px; background: #faf8ff;
    border: 1px solid #d8d0e8; border-radius: 8px;
}
.esm-dni-section h4 { margin: 0 0 8px; font-size: 15px; }
.esm-dni-desc { font-size: 13px; color: #555; margin-bottom: 12px; }

.esm-invite-link-box {
    margin-bottom: 14px; padding: 10px; background: #fff;
    border: 1px solid #e0e0e0; border-radius: 6px;
}
.esm-invite-link-box label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 4px; }
.esm-invite-link-row { display: flex; gap: 6px; }
.esm-invite-input {
    flex: 1; padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 12px; color: #333; background: #f9f9f9;
}
.esm-copy-btn { font-size: 12px !important; }

.esm-add-dni-form {
    display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.esm-add-dni-form input {
    padding: 7px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px;
}
.esm-dni-input { width: 140px; }
.esm-dni-nombre-input { width: 180px; }

.esm-dni-list { margin-top: 8px; }
.esm-no-dni { font-size: 13px; color: #999; font-style: italic; }

.esm-dni-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 10px;
    border-bottom: 1px solid #eee; font-size: 13px;
}
.esm-dni-number { font-weight: 700; min-width: 100px; }
.esm-dni-name { flex: 1; color: #555; }
.esm-remove-dni-btn {
    background: none; border: none; color: #d63638; cursor: pointer;
    font-size: 14px; padding: 2px 6px;
}
.esm-remove-dni-btn:hover { background: #fce8e8; border-radius: 3px; }

/* ── History section ──────────────────────────────────── */
.esm-history-section { margin-top: 20px; }
.esm-history-section h4 { margin: 0 0 10px; font-size: 15px; }
.esm-history-table { font-size: 13px; }

/* ── DNI Modal ────────────────────────────────────────── */
.esm-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; }
.esm-modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5);
}
.esm-modal-content {
    position: relative; max-width: 400px; margin: 15vh auto; padding: 28px;
    background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.2);
    z-index: 1;
}
.esm-modal-content h3 { margin: 0 0 10px; font-size: 18px; }
.esm-modal-content p { font-size: 14px; color: #555; margin-bottom: 14px; }
.esm-modal-input {
    width: 100%; padding: 10px 14px; border: 2px solid #ccc; border-radius: 6px;
    font-size: 16px; margin-bottom: 14px; box-sizing: border-box;
}
.esm-modal-input:focus { border-color: #0073aa; outline: none; }
.esm-modal-actions { display: flex; gap: 8px; }
.esm-modal-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.esm-modal-msg.error { color: #d63638; }
.esm-modal-msg.success { color: #00a32a; }

/* ── Error inline ─────────────────────────────────────── */
.esm-field-error {
    color: #d63638; font-size: 13px; margin-top: 6px; padding: 6px 10px;
    background: #fce8e8; border-radius: 4px; display: none;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 600px) {
    .esm-addon-row { flex-direction: column; align-items: flex-start; }
    .esm-seats-panel { gap: 8px; }
    .esm-seat-stat { min-width: 65px; padding: 8px; }
    .esm-seat-stat .num { font-size: 22px; }
    .esm-service-options { flex-direction: column; }
    .esm-option-card { min-width: auto; }
    .esm-add-dni-form { flex-direction: column; }
    .esm-dni-input, .esm-dni-nombre-input { width: 100%; }
    .esm-invite-link-row { flex-direction: column; }
    .esm-modal-content { margin: 10vh 16px; }
}