/* ============================================================
   ESTILOS PRINCIPALES (Mobile-First)
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
}
header {
    background: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e0e0e0;
    flex-wrap: wrap;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
}
nav .btn-whatsapp {
    background: #25D366;
    color: #fff;
    border-radius: 20px;
    padding: 5px 15px;
}
main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}
.banner {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
.banner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.info-premio {
    margin-top: 15px;
}

/* ============================================================
   NÚMEROS EN GRILLA (MÚLTIPLES COLUMNAS)
   ============================================================ */
.numero-item {
    transition: background 0.15s;
    font-size: 13px;
    font-weight: bold;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}
.numero-item:hover {
    transform: none;
    z-index: auto;
    background: #f0f0f0;
}
.numero-item.disponible {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.numero-item.disponible:hover {
    background: #c8e6c9;
}
.numero-item.reservado {
    background: #fff9c4;
    color: #f57f17;
    border-color: #ffd54f;
}
.numero-item.vendido,
.numero-item.pagado {
    background: #ffcdd2;
    color: #999;
    cursor: not-allowed;
    opacity: 0.6;
    border-color: #ef9a9a;
}
.numero-item.seleccionado {
    background: #7e57c2 !important;
    border: 2px solid #4a148c !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(126, 87, 194, 0.7);
    transform: scale(1.05);
    z-index: 2;
}
@media (max-width: 500px) {
    .numero-item {
        font-size: 11px;
    }
}

/* ============================================================
   MIS NÚMEROS
   ============================================================ */
.mis-numeros-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.mis-numeros-container h1 {
    text-align: center;
    margin-bottom: 5px;
}
.subtitulo {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
}
.form-buscar-numeros {
    margin-bottom: 25px;
}
.campo-busqueda {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}
.campo-busqueda input {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
}
.campo-busqueda input:focus {
    border-color: #1976d2;
}
.campo-busqueda button {
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.campo-busqueda button:hover {
    background: #0d47a1;
}
.resultado-cliente {
    background: #e3f2fd;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 5px solid #1976d2;
}
.resultado-cliente h2 {
    font-size: 20px;
    margin-bottom: 5px;
}
.resultado-cliente p {
    color: #555;
    font-size: 14px;
}
.lista-ventas {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.venta-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.venta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
}
.venta-id {
    font-weight: bold;
    color: #1976d2;
    font-size: 14px;
    margin-right: 10px;
}
.venta-fecha {
    font-size: 12px;
    color: #999;
}
.estado-pago {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}
.estado-pago.estado-pendiente {
    background: #ffd54f;
    color: #f57f17;
}
.estado-pago.estado-aprobado {
    background: #81c784;
    color: #1b5e20;
}
.estado-pago.estado-rechazado {
    background: #ef9a9a;
    color: #b71c1c;
}
.venta-sorteo {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
}
.venta-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.numero-tag {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #a5d6a7;
}
.numero-tag.estado-reservado {
    background: #fff9c4;
    color: #f57f17;
    border-color: #ffd54f;
}
.numero-tag.estado-pagado,
.numero-tag.estado-vendido {
    background: #e1bee7;
    color: #4a148c;
    border-color: #ce93d8;
}
.venta-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
}
.venta-total {
    font-size: 14px;
    color: #333;
}
.btn-ver {
    background: #1976d2;
    color: #fff;
    text-decoration: none;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 13px;
}
.btn-ver:hover {
    background: #0d47a1;
}
.alert.info {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}
.alert.error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin: 15px 0;
}
.alert.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-container {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.faq-container h1 {
    text-align: center;
    margin-bottom: 5px;
}
.faq-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
}
.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fafafa;
    transition: all 0.2s;
}
.faq-item[open] {
    background: #fff;
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(25,118,210,0.1);
}
.faq-item summary {
    cursor: pointer;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '▼';
    font-size: 12px;
    color: #666;
    transition: transform 0.2s;
}
.faq-item[open] summary::after {
    transform: rotate(180deg);
    color: #1976d2;
}
.faq-item summary:hover {
    background: #f0f0f0;
}
.faq-item[open] summary:hover {
    background: #e3f2fd;
}
.faq-respuesta {
    padding: 0 20px 20px;
    color: #555;
    line-height: 1.6;
}
.faq-respuesta ul,
.faq-respuesta ol {
    padding-left: 20px;
    margin: 10px 0;
}
.faq-respuesta li {
    margin-bottom: 5px;
}
.faq-respuesta a {
    color: #1976d2;
    text-decoration: underline;
}
.faq-cta {
    text-align: center;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}
.faq-cta p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}
.btn-cta {
    background: #25D366;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}
.btn-cta:hover {
    background: #128C7E;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-container {
    max-width: 900px;
    margin: 0 auto;
}
.contacto-container > h1 {
    text-align: center;
    margin-bottom: 5px;
}
.contacto-container > .subtitulo {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}
.contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.contacto-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.2s;
}
.contacto-card:hover {
    transform: translateY(-3px);
}
.contacto-icono {
    font-size: 40px;
    margin-bottom: 10px;
}
.contacto-card h3 {
    margin-bottom: 10px;
    color: #333;
}
.contacto-card p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.btn-contacto {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
}
.btn-whatsapp-contacto {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp-contacto:hover {
    background: #128C7E;
}
.btn-correo {
    background: #1976d2;
    color: #fff;
}
.btn-correo:hover {
    background: #0d47a1;
}
.contacto-form-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.contacto-form-container h2 {
    margin-bottom: 5px;
}
.form-contacto .campo {
    margin-bottom: 18px;
}
.form-contacto .campo label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
}
.form-contacto .campo input,
.form-contacto .campo select,
.form-contacto .campo textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.form-contacto .campo input:focus,
.form-contacto .campo select:focus,
.form-contacto .campo textarea:focus {
    border-color: #1976d2;
}
.form-contacto .campo textarea {
    resize: vertical;
    min-height: 100px;
}
.btn-enviar {
    background: #1976d2;
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}
.btn-enviar:hover {
    background: #0d47a1;
}

/* ============================================================
   PÁGINA DE COMPRA (Estilo Pasos)
   ============================================================ */
.compra-page {
    background: #f5f7fa;
    min-height: calc(100vh - 80px);
    padding: 40px 15px;
    margin: -20px -15px;
}
.compra-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

/* Indicador de pasos */
.steps-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.step {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.5;
}
.step-activo {
    opacity: 1;
}
.step-numero {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}
.step-activo .step-numero {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
}
.step-texto {
    font-size: 13px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.step-activo .step-texto {
    color: #764ba2;
}
.step-linea {
    width: 30px;
    height: 2px;
    background: #e0e0e0;
}
@media (max-width: 500px) {
    .step-texto { display: none; }
    .step-linea { width: 20px; }
}

/* Card principal */
.compra-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* Sección del formulario */
.form-seccion {
    padding: 40px 45px;
}
@media (max-width: 600px) {
    .form-seccion { padding: 25px 20px; }
}
.form-seccion-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.form-seccion-icono {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    flex-shrink: 0;
}
.form-seccion-label {
    display: block;
    font-size: 11px;
    color: #667eea;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.form-seccion-header h2 {
    font-size: 22px;
    color: #1a237e;
    margin: 0;
}
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 600px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* Campos */
.form-registro .campo {
    margin-bottom: 22px;
}
.form-registro .campo label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}
.requerido { color: #f44336; }
.form-registro .campo input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
    background: #fff;
}
.form-registro .campo input:hover {
    border-color: #c0c0c0;
}
.form-registro .campo input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}

/* Sección resumen */
.resumen-seccion {
    background: #fafbff;
    padding: 30px 45px;
    border-top: 1px solid #f0f0f0;
}
@media (max-width: 600px) {
    .resumen-seccion { padding: 25px 20px; }
}
.resumen-seccion h3 {
    font-size: 17px;
    color: #1a237e;
    margin-bottom: 20px;
}
.resumen-sorteo, .resumen-numeros {
    margin-bottom: 18px;
}
.resumen-label {
    display: block;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.resumen-nombre {
    font-size: 15px;
    color: #333;
    font-weight: bold;
}
.numeros-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.numero-badge {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(102,126,234,0.3);
}
.resumen-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px dashed #d0d0d0;
    margin-top: 20px;
    padding-top: 18px;
    font-size: 15px;
    color: #666;
}
.resumen-total strong {
    font-size: 26px;
    color: #2e7d32;
}
.aviso-reserva {
    display: flex;
    gap: 12px;
    background: #fff8e1;
    padding: 14px 16px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    align-items: flex-start;
    margin-top: 20px;
}
.aviso-icono {
    font-size: 22px;
    line-height: 1;
}
.aviso-reserva p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}
.aviso-reserva strong {
    color: #e65100;
}

/* Acciones */
.compra-acciones {
    padding: 25px 45px 35px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}
@media (max-width: 600px) {
    .compra-acciones { padding: 20px; }
}
.btn-confirmar {
    width: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(102,126,234,0.35);
    letter-spacing: 0.5px;
}
.btn-confirmar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.5);
}
.btn-volver {
    display: inline-block;
    margin-top: 16px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}
.btn-volver:hover { color: #667eea; }

/* ============================================================
   PÁGINA DE CONFIRMACIÓN
   ============================================================ */
.confirmacion-page {
    background: #f5f7fa;
    min-height: calc(100vh - 80px);
    padding: 40px 15px;
    margin: -20px -15px;
}
.confirmacion-wrapper {
    max-width: 750px;
    margin: 0 auto;
}
.exito-header {
    text-align: center;
    margin-bottom: 30px;
}
.exito-icono {
    font-size: 70px;
    animation: pulse 1s infinite alternate;
}
@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
.exito-header h1 {
    font-size: 32px;
    color: #2e7d32;
    margin: 15px 0 8px;
}
.exito-header p {
    color: #666;
    font-size: 16px;
}
.reserva-id-box {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(26,35,126,0.3);
}
.reserva-id-label {
    display: block;
    font-size: 13px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.reserva-id-valor {
    display: block;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
    margin-bottom: 8px;
}
.reserva-id-box small {
    font-size: 12px;
    opacity: 0.7;
}
.contador-box {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.contador-titulo {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
}
.contador-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.tiempo-bloque {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
    color: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 80px;
    box-shadow: 0 4px 10px rgba(26,35,126,0.3);
}
.tiempo-bloque span {
    display: block;
    font-size: 32px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    line-height: 1;
}
.tiempo-bloque small {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-top: 5px;
    text-transform: uppercase;
}
.separador {
    font-size: 32px;
    font-weight: bold;
    color: #1a237e;
}
.contador-aviso {
    font-size: 13px;
    color: #999;
    margin: 0;
}
.detalle-card, .pago-card, .comprobante-card {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.detalle-card h2, .pago-card h2, .comprobante-card h2 {
    font-size: 20px;
    color: #1a237e;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e0e0e0;
}
.detalle-fila {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.detalle-fila:last-child { border-bottom: none; }
.detalle-fila span { color: #666; font-size: 14px; }
.detalle-fila strong { color: #333; font-size: 15px; }
.detalle-total {
    border-top: 2px dashed #e0e0e0 !important;
    margin-top: 10px;
    padding-top: 15px !important;
}
.detalle-total strong {
    color: #2e7d32;
    font-size: 20px;
}
.detalle-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.numero-badge-chico {
    background: #e3f2fd;
    color: #0d47a1;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
}
.pago-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}
.metodos-pago {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .metodos-pago { grid-template-columns: 1fr; }
}
.metodo {
    background: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.metodo-icono { font-size: 32px; }
.metodo-info h3 {
    font-size: 15px;
    color: #1a237e;
    margin-bottom: 8px;
}
.metodo-info p {
    font-size: 13px;
    color: #555;
    margin: 3px 0;
    word-break: break-word;
}
.monto-exacto {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    padding: 15px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 5px solid #4caf50;
    flex-wrap: wrap;
    gap: 10px;
}
.monto-exacto span { font-size: 14px; color: #2e7d32; }
.monto-exacto strong { font-size: 24px; color: #1b5e20; }
.file-drop {
    display: block;
    border: 3px dashed #1976d2;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    margin-bottom: 20px;
    background: #f9fbff;
}
.file-drop:hover {
    background: #e3f2fd;
    border-color: #0d47a1;
}
.file-drop input[type="file"] {
    display: none;
}
.file-icono { font-size: 45px; margin-bottom: 10px; }
.file-drop-contenido p { color: #333; margin: 8px 0; }
.file-drop-contenido small { color: #999; font-size: 12px; }
.nombre-archivo {
    display: block;
    margin-top: 10px;
    color: #2e7d32;
    font-weight: bold;
    font-size: 13px;
}
.btn-subir {
    width: 100%;
    background: linear-gradient(135deg, #1976d2, #0d47a1);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-subir:hover { transform: translateY(-2px); }
.comprobante-recibido {
    background: #e8f5e9;
    border-left: 5px solid #4caf50;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}
.comprobante-check { font-size: 40px; }
.comprobante-recibido strong { display: block; color: #1b5e20; margin-bottom: 5px; font-size: 16px; }
.comprobante-recibido p { color: #2e7d32; font-size: 13px; margin: 0; }
.comprobante-recibido a { color: #1976d2; font-weight: bold; }
.whatsapp-card {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(37,211,102,0.3);
}
.whatsapp-card h3 { font-size: 18px; margin-bottom: 8px; }
.whatsapp-card p { font-size: 14px; opacity: 0.9; margin-bottom: 15px; }
.btn-whatsapp-grande {
    display: inline-block;
    background: #fff;
    color: #128C7E;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
}
.btn-whatsapp-grande:hover { transform: scale(1.05); }
.whatsapp-nota {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 12px;
}
.volver-inicio {
    text-align: center;
    padding: 15px 0;
}
.volver-inicio a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}
.volver-inicio a:hover { color: #1976d2; }

/* ============================================================
   REDISEÑO HOME - GRILLA Y PROGRESO
   ============================================================ */
.progreso-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 25px 30px;
    margin-bottom: 20px;
}
.progreso-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}
.progreso-header span {
    color: #666;
    font-size: 14px;
    font-weight: bold;
}
.progreso-header strong {
    color: #2e7d32;
    font-size: 18px;
}
.progreso-info {
    display: block;
    color: #999;
    font-size: 13px;
    margin-top: 8px;
}
.barra {
    background: #e0e0e0;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}
.relleno {
    height: 100%;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    transition: width 0.3s;
}
.grilla-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    padding-bottom: 10px;
}
.grilla-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 30px 35px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.grilla-icono {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 12px rgba(102,126,234,0.4);
    flex-shrink: 0;
}
.grilla-label {
    display: block;
    font-size: 11px;
    color: #667eea;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.grilla-header h2 {
    font-size: 22px;
    color: #1a237e;
    margin: 0;
}
.filtros-busqueda {
    display: flex;
    gap: 12px;
    padding: 20px 35px 10px;
    flex-wrap: wrap;
}
.buscador-wrapper {
    flex: 1;
    position: relative;
    min-width: 200px;
}
.buscador-icono {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
}
.buscador-wrapper input {
    width: 100%;
    padding: 13px 15px 13px 42px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}
.buscador-wrapper input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
}
.btn-aleatorio {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.btn-aleatorio:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(102,126,234,0.4);
}
.filtros-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 35px 20px;
}
.filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 20px;
    background: #f5f5f5;
    border: 1.5px solid #e0e0e0;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s;
    user-select: none;
}
.filtro-chip:hover {
    background: #eef0ff;
    border-color: #667eea;
}
.filtro-chip input {
    margin: 0;
    cursor: pointer;
    accent-color: #667eea;
}
.filtro-chip:has(input:checked) {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: #667eea;
}
.grilla-card #scroll-container {
    height: 500px;
    overflow-y: auto;
    background: #fafbff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px;
    margin: 0 20px;
    border-radius: 10px;
    position: relative;
}
.grilla-card #carrito {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 35px;
    gap: 15px;
    flex-wrap: wrap;
    border-top: none;
    margin-top: 0;
}
.carrito-info {
    display: flex;
    gap: 25px;
    font-size: 15px;
    color: #666;
    flex-wrap: wrap;
}
.carrito-info strong {
    color: #1a237e;
    font-size: 17px;
}
#total-carrito {
    color: #2e7d32 !important;
    font-size: 20px !important;
}
.grilla-card #btn-comprar {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(102,126,234,0.35);
}
.grilla-card #btn-comprar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102,126,234,0.5);
}
.grilla-card #btn-comprar:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* ============================================================
   INDICADOR DE PASOS - Estados
   ============================================================ */

/* Paso completado: check verde */
.step-completado {
    opacity: 1;
}
.step-completado .step-numero {
    background: linear-gradient(135deg, #4caf50, #2e7d32) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
    font-size: 16px;
}
.step-completado .step-texto {
    color: #2e7d32 !important;
}

/* Línea activa entre pasos */
.step-linea-activa {
    background: linear-gradient(90deg, #4caf50, #667eea) !important;
    height: 3px !important;
}

/* Paso en revisión (comprobante subido, esperando aprobación) */
.step-revision {
    opacity: 1;
}
.step-revision .step-numero {
    background: linear-gradient(135deg, #ff9800, #e65100) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5) !important;
    animation: pulseRevision 1.5s ease-in-out infinite;
    font-size: 16px;
}
.step-revision .step-texto {
    color: #e65100 !important;
}
@keyframes pulseRevision {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 6px 20px rgba(255, 152, 0, 0.8);
    }
}

/* Paso rechazado */
.step-rechazado {
    opacity: 1;
}
.step-rechazado .step-numero {
    background: linear-gradient(135deg, #f44336, #c62828) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4) !important;
    font-size: 16px;
}
.step-rechazado .step-texto {
    color: #c62828 !important;
}

/* Ajuste para la página de confirmación */
.confirmacion-page .steps-indicador {
    margin-bottom: 25px;
    padding-top: 10px;
}
@media (max-width: 500px) {
    .confirmacion-page .steps-indicador {
        gap: 8px;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    text-align: center;
    padding: 20px;
    background: #fff;
    margin-top: 30px;
    border-top: 1px solid #ddd;
}

/* ============================================================
   RESPONSIVE (Mobile-First)
   ============================================================ */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: stretch;
    }
    nav ul {
        justify-content: center;
    }
    #carrito {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    #btn-comprar {
        width: 100%;
    }
    .campo-busqueda {
        flex-direction: column;
    }
    .campo-busqueda button {
        width: 100%;
    }
    .venta-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .contacto-form-container {
        padding: 20px;
    }
    .contacto-card {
        padding: 20px;
    }
    .compra-page, .confirmacion-page {
        padding: 20px 10px;
    }
    .reserva-id-valor {
        font-size: 32px;
    }
    .tiempo-bloque {
        padding: 12px 15px;
        min-width: 65px;
    }
    .tiempo-bloque span {
        font-size: 24px;
    }
    .separador {
        font-size: 24px;
    }
    .exito-header h1 {
        font-size: 24px;
    }
    .exito-icono {
        font-size: 55px;
    }
    .detalle-card, .pago-card, .comprobante-card {
        padding: 20px;
    }
    /* Home responsive */
    .grilla-header {
        padding: 20px 20px 15px;
    }
    .grilla-header h2 {
        font-size: 18px;
    }
    .filtros-busqueda {
        padding: 15px 20px 5px;
    }
    .filtros-estado {
        padding: 10px 20px 15px;
    }
    .grilla-card #scroll-container {
        margin: 0 10px;
        padding: 8px;
    }
    .grilla-card #carrito {
        padding: 15px 20px;
    }
    .carrito-info {
        gap: 15px;
    }
    .grilla-card #btn-comprar {
        width: 100%;
    }
}