/* ── Variables de marca El Mentidero ───────────────── */
:root {
    --mb-rojo:        #EA2027;
    --mb-negro:       #221F1F;
    --mb-gris-osc:   #57585B;
    --mb-gris-cla:   #A6A8AB;
    --mb-fondo:      #F4F4F4;
    --mb-blanco:     #FFFFFF;
    --mb-exito:      #27AE60;
    --mb-alerta:     #F39C12;
    --mb-sombra:     0 2px 12px rgba(0,0,0,0.10);
    --mb-radio:      4px;
    --mb-transicion: 0.18s ease;
}

/* ── Contenedor base ────────────────────────────────── */
.mb-wrap {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 16px;
    color: var(--mb-negro);
    box-sizing: border-box;
}

/* ── Paso / sección ─────────────────────────────────── */
.mb-step { animation: mbFadeIn 0.25s ease; }
@keyframes mbFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── Títulos de paso ────────────────────────────────── */
.mb-step-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--mb-negro);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--mb-rojo);
}

/* ── Selector de función ────────────────────────────── */
.mb-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--mb-gris-cla);
    border-radius: var(--mb-radio);
    font-size: 15px;
    background: var(--mb-blanco);
    color: var(--mb-negro);
    cursor: pointer;
    transition: border-color var(--mb-transicion);
}
.mb-select:focus { outline: none; border-color: var(--mb-rojo); }

/* ── Info de función seleccionada ───────────────────── */
.mb-funcion-header {
    background: var(--mb-negro);
    color: var(--mb-blanco);
    padding: 16px 20px;
    border-radius: var(--mb-radio);
    margin-bottom: 20px;
    border-left: 4px solid var(--mb-rojo);
}
.mb-funcion-nombre { font-size: 18px; font-weight: bold; margin-bottom: 4px; }
.mb-funcion-meta   { font-size: 14px; color: var(--mb-gris-cla); }

/* ── Mapa de asientos ───────────────────────────────── */
.mb-mapa {
    background: #1a1a1a;
    border-radius: var(--mb-radio);
    padding: 20px 12px;
    overflow-x: auto;
    margin-bottom: 16px;
}
.mb-escenario {
    text-align: center;
    background: var(--mb-gris-osc);
    color: var(--mb-blanco);
    padding: 8px;
    border-radius: var(--mb-radio);
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.mb-fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
}
.mb-fila-label {
    color: var(--mb-gris-cla);
    font-size: 12px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.mb-asiento {
    width: 32px;
    height: 32px;
    border-radius: 4px 4px 6px 6px;
    border: none;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: transform var(--mb-transicion), background var(--mb-transicion);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mb-asiento.disponible  { background: #3A9D5D; color: var(--mb-blanco); }
.mb-asiento.disponible:hover { background: #48C26E; transform: scale(1.12); }
.mb-asiento.seleccionado { background: var(--mb-rojo); color: var(--mb-blanco); transform: scale(1.1); box-shadow: 0 0 8px rgba(234,32,39,0.6); }
.mb-asiento.ocupado     { background: #555; color: #888; cursor: not-allowed; }

/* ── Leyenda ────────────────────────────────────────── */
.mb-leyenda {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.mb-legen {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mb-gris-osc);
}
.mb-legen::before {
    content: '';
    width: 16px; height: 16px;
    border-radius: 3px;
    display: inline-block;
}
.mb-legen.disponible::before  { background: #3A9D5D; }
.mb-legen.seleccionado::before { background: var(--mb-rojo); }
.mb-legen.ocupado::before     { background: #555; }

/* ── Resumen de selección ───────────────────────────── */
.mb-resumen {
    background: var(--mb-blanco);
    border: 2px solid var(--mb-rojo);
    border-radius: var(--mb-radio);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.mb-resumen p { margin: 4px 0; font-size: 15px; }

/* ── Formulario ─────────────────────────────────────── */
.mb-form { max-width: 480px; }
.mb-campo { margin-bottom: 16px; }
.mb-campo label { display: block; font-size: 13px; font-weight: bold; color: var(--mb-gris-osc); margin-bottom: 5px; }
.mb-campo input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--mb-gris-cla);
    border-radius: var(--mb-radio);
    font-size: 15px;
    color: var(--mb-negro);
    transition: border-color var(--mb-transicion);
    box-sizing: border-box;
}
.mb-campo input:focus { outline: none; border-color: var(--mb-rojo); }

/* ── Resumen de compra ──────────────────────────────── */
.mb-resumen-compra {
    background: #f9f9f9;
    border-radius: var(--mb-radio);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.mb-resumen-items {}
.mb-resumen-item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}
.mb-resumen-item:last-child { border-bottom: none; }
.mb-resumen-total { font-weight: bold; font-size: 15px; padding-top: 8px; }

/* ── Código de descuento ────────────────────────────── */
.mb-descuento-wrap { display: flex; gap: 8px; }
.mb-descuento-wrap input { flex: 1; text-transform: uppercase; }
.mb-desc-ok    { color: var(--mb-exito); font-size: 13px; margin-top: 5px; display: block; }
.mb-desc-error { color: var(--mb-rojo);  font-size: 13px; margin-top: 5px; display: block; }

/* ── Total final ────────────────────────────────────── */
.mb-total-final {
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    padding: 12px 0;
    border-top: 2px solid var(--mb-rojo);
    margin: 16px 0;
}

/* ── Timer ──────────────────────────────────────────── */
.mb-timer {
    background: var(--mb-negro);
    color: var(--mb-blanco);
    padding: 10px 16px;
    border-radius: var(--mb-radio);
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
}
.mb-timer strong { color: var(--mb-rojo); font-size: 18px; }

/* ── Botones ────────────────────────────────────────── */
.mb-btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: var(--mb-radio);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background var(--mb-transicion), transform var(--mb-transicion);
    text-decoration: none;
}
.mb-btn:active { transform: scale(0.97); }
.mb-btn-primario  { background: var(--mb-rojo); color: var(--mb-blanco); width: 100%; text-align: center; }
.mb-btn-primario:hover { background: #c5151b; }
.mb-btn-secundario { background: var(--mb-negro); color: var(--mb-blanco); }
.mb-btn-secundario:hover { background: #3a3a3a; }
.mb-btn-pagar {
    background: var(--mb-rojo); color: var(--mb-blanco);
    width: 100%; text-align: center; font-size: 17px; padding: 14px;
}
.mb-btn-pagar:hover { background: #c5151b; }
.mb-btn-link { background: none; color: var(--mb-gris-osc); font-size: 14px; padding: 8px 0; }
.mb-btn-link:hover { color: var(--mb-rojo); }

/* ── Errores ────────────────────────────────────────── */
.mb-errores {
    background: #FFF0F0;
    border: 1px solid #FFCCCC;
    border-radius: var(--mb-radio);
    padding: 12px 16px;
    margin-bottom: 14px;
    color: #c0392b;
    font-size: 14px;
}
.mb-errores p { margin: 3px 0; }

/* ── Avisos genéricos ───────────────────────────────── */
.mb-aviso {
    background: var(--mb-fondo);
    border-radius: var(--mb-radio);
    padding: 30px;
    text-align: center;
    font-size: 16px;
    color: var(--mb-gris-osc);
}
.mb-aviso.mb-error { background: #FFF0F0; color: var(--mb-rojo); }
.mb-aviso-pendiente { text-align: center; padding: 40px; }
.mb-aviso-pendiente .mb-icon { font-size: 56px; margin-bottom: 16px; }

/* ── Loading ────────────────────────────────────────── */
.mb-loading-box {
    text-align: center;
    padding: 40px;
    color: var(--mb-gris-osc);
}
.mb-spinner {
    width: 36px; height: 36px;
    border: 4px solid var(--mb-fondo);
    border-top-color: var(--mb-rojo);
    border-radius: 50%;
    animation: mbSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes mbSpin { to { transform: rotate(360deg); } }

/* ── Confirmación ───────────────────────────────────── */
.mb-confirmacion { max-width: 680px; }
.mb-conf-header { text-align: center; padding: 24px 0 16px; }
.mb-conf-check  { font-size: 56px; margin-bottom: 8px; }
.mb-conf-header h2 { font-size: 26px; color: var(--mb-exito); margin: 0 0 8px; }
.mb-conf-funcion {
    background: var(--mb-negro);
    color: var(--mb-blanco);
    border-radius: var(--mb-radio);
    padding: 20px 24px;
    margin: 16px 0;
    border-left: 4px solid var(--mb-rojo);
}
.mb-conf-obra { font-size: 20px; font-weight: bold; margin-bottom: 6px; }
.mb-conf-meta { font-size: 14px; color: var(--mb-gris-cla); margin-top: 3px; }
.mb-conf-boletos { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 20px 0; }
.mb-conf-boleto {
    background: var(--mb-blanco);
    border: 2px solid var(--mb-rojo);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    min-width: 180px;
    box-shadow: var(--mb-sombra);
}
.mb-conf-asiento-num  { font-size: 38px; font-weight: bold; color: var(--mb-negro); }
.mb-conf-asiento-zona { font-size: 13px; color: var(--mb-gris-osc); margin-bottom: 12px; }
.mb-conf-qr           { width: 160px; height: 160px; border: 1px solid #eee; border-radius: 4px; }
.mb-conf-ticket-id    { font-size: 10px; color: var(--mb-gris-cla); margin-top: 8px; }
.mb-conf-instrucciones {
    background: #f9f9f9;
    border-radius: var(--mb-radio);
    padding: 16px;
    font-size: 14px;
    color: var(--mb-gris-osc);
    margin: 0 0 16px;
}
.mb-conf-total {
    font-size: 17px;
    text-align: right;
    border-top: 2px solid var(--mb-rojo);
    padding-top: 14px;
    margin-top: 14px;
}

/* ── Validador en puerta ────────────────────────────── */
.mb-validador { max-width: 540px; }
.mb-val-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mb-val-logo   { height: 40px; }
.mb-val-header h2 { margin: 0; font-size: 22px; }
.mb-val-busqueda, .mb-val-busq-nombre { display: flex; gap: 8px; margin-bottom: 12px; }
.mb-val-busqueda input, .mb-val-busq-nombre input {
    flex: 1; padding: 12px 16px; border: 2px solid var(--mb-gris-cla);
    border-radius: var(--mb-radio); font-size: 16px;
}
.mb-val-busqueda input:focus, .mb-val-busq-nombre input:focus { outline: none; border-color: var(--mb-rojo); }
.mb-val-resultados { position: relative; }
.mb-val-result-item {
    padding: 10px 14px; background: var(--mb-blanco);
    border: 1px solid #eee; cursor: pointer; font-size: 14px;
}
.mb-val-result-item:hover { background: var(--mb-fondo); }
.mb-val-resultado { margin-top: 12px; }
.mb-val-tarjeta {
    border-radius: 8px; padding: 24px; text-align: center;
    animation: mbFadeIn 0.2s ease;
}
.mb-val-ok     { background: #D4EFDF; border: 3px solid var(--mb-exito); }
.mb-val-usado  { background: #FEF9E7; border: 3px solid var(--mb-alerta); }
.mb-val-error  { background: #FADBD8; border: 3px solid var(--mb-rojo); }
.mb-val-icono  { font-size: 48px; margin-bottom: 8px; }
.mb-val-msg    { font-size: 22px; font-weight: bold; margin-bottom: 8px; }
.mb-val-nombre { font-size: 20px; margin-bottom: 4px; }
.mb-val-asiento { font-size: 16px; color: var(--mb-gris-osc); }
.mb-val-canal   { font-size: 13px; color: var(--mb-gris-cla); margin-top: 4px; }
.mb-val-manual  { margin-top: 16px; background: var(--mb-fondo); border-radius: var(--mb-radio); padding: 16px; }
.mb-val-manual p { margin: 0 0 8px; font-size: 14px; }
.mb-val-manual input { padding: 8px 12px; border: 1px solid #ccc; border-radius: var(--mb-radio); width: 200px; margin-right: 8px; }
.mb-sin-res { font-size: 13px; color: var(--mb-gris-cla); padding: 8px; }

/* ── Taquilla ───────────────────────────────────────── */
.mb-taquilla { max-width: 680px; }
.mb-taq-header { display: flex; align-items: center; gap: 12px; background: var(--mb-negro); padding: 14px 20px; border-radius: var(--mb-radio); margin-bottom: 20px; border-left: 4px solid var(--mb-rojo); }
.mb-taq-logo   { height: 36px; }
.mb-taq-header h2 { margin: 0; font-size: 20px; color: var(--mb-blanco); flex: 1; }
.mb-taq-vendedor { font-size: 13px; color: var(--mb-gris-cla); }
.mb-taq-paso { animation: mbFadeIn 0.2s ease; }
.mb-taq-tipo-pago { display: flex; gap: 20px; margin: 12px 0; font-size: 15px; }
.mb-taq-tipo-pago label { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.mb-taq-exito { text-align: center; padding: 30px 0; }
.mb-taq-exito .mb-icon { font-size: 56px; margin-bottom: 12px; }
.mb-taq-exito h3 { font-size: 22px; color: var(--mb-exito); }
.mb-taq-ticket-gen { background: var(--mb-fondo); border-radius: var(--mb-radio); padding: 16px; margin-bottom: 12px; display: inline-block; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
    .mb-asiento { width: 27px; height: 27px; font-size: 9px; }
    .mb-fila { gap: 3px; }
    .mb-conf-boletos { flex-direction: column; align-items: center; }
    .mb-taq-tipo-pago { flex-direction: column; gap: 8px; }
    .mb-val-busqueda, .mb-val-busq-nombre { flex-direction: column; }
}