/* Reset y base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

/* Widget flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    text-decoration: none;
    animation: pulse-whatsapp 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7);
    }
    100% {
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    }
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 26px;
        bottom: 20px;
        right: 20px;
    }
}



html {

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

}



:root {

    /* Colores basados en el logo de Amnesia */

    --amnesia-purple: #8B4A9C;

    --amnesia-pink: #E91E63;

    --amnesia-blue: #2196F3;

    --amnesia-gradient: linear-gradient(135deg, #8B4A9C 0%, #E91E63 50%, #2196F3 100%);

    --amnesia-gradient-hover: linear-gradient(135deg, #7B3A8C 0%, #D91E53 50%, #1186E3 100%);

    --amnesia-dark: #2D1B3D;

    --amnesia-light: #F8F4FF;

    --text-primary: #2D1B3D;

    --text-secondary: #666;

    --white: #ffffff;

    --shadow-soft: 0 8px 32px rgba(139, 74, 156, 0.15);

    --shadow-hover: 0 16px 48px rgba(139, 74, 156, 0.25);

    

    /* Colores de fondo */

    --bg-primary: #ffffff;

    --bg-secondary: #F8F4FF;

    --bg-card: #ffffff;

    --border-color: rgba(139, 74, 156, 0.2);

    --input-bg: #ffffff;

    --input-border: rgba(139, 74, 156, 0.2);

}



/* Modo Oscuro */

@media (prefers-color-scheme: dark) {

    :root {

        /* Colores base oscuros */

        --amnesia-dark: #E8D5F0;

        --amnesia-light: #1a1a2e;

        --text-primary: #E8D5F0;

        --text-secondary: #B8A5C0;

        --white: #16213e;

        

        /* Fondos oscuros */

        --bg-primary: #0f0f1e;

        --bg-secondary: #1a1a2e;

        --bg-card: #16213e;

        --border-color: rgba(139, 74, 156, 0.3);

        --input-bg: #1a1a2e;

        --input-border: rgba(139, 74, 156, 0.4);

        

        /* Sombras ajustadas para modo oscuro */

        --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);

        --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6);

    }

    

    body {

        background: var(--bg-primary);

        color: var(--text-primary);

    }

    

    /* Tarjetas en modo oscuro */

    .evento-card,

    .card,

    .evento-detalle,

    .proceso-reserva,

    .seccion-datos,

    .evento-resumen-card {

        background: var(--bg-card);

        border-color: var(--border-color);

    }

    

    /* Inputs y selects en modo oscuro */

    .form-input,

    .form-select,

    .form-textarea,

    input[type="text"],

    input[type="email"],

    input[type="tel"],

    input[type="date"],

    input[type="number"],

    select,

    textarea {

        background: var(--input-bg);

        color: var(--text-primary);

        border-color: var(--input-border);

    }

    

    .form-input:focus,

    .form-select:focus,

    .form-textarea:focus {

        background: var(--input-bg);

        border-color: var(--amnesia-purple);

    }

    

    /* Botones en modo oscuro */

    .btn-secondary {

        background: var(--bg-card);

        color: var(--text-primary);

        border-color: var(--border-color);

    }

    

    .btn-secondary:hover {

        background: var(--bg-secondary);

    }

    

    /* Header y Footer */

    .header {

        background: var(--bg-card);

        border-bottom-color: var(--border-color);

    }

    

    .footer {

        background: var(--bg-card);

        border-top-color: var(--border-color);

    }

    

    /* Navegación */

    .nav a {

        color: var(--text-primary);

    }

    

    .nav a:hover {

        color: var(--amnesia-pink);

    }

    

    /* Tabs */

    .tab-button {

        background: var(--bg-secondary);

        color: var(--text-secondary);

    }

    

    .tab-button.active {

        background: var(--bg-card);

        color: var(--text-primary);

    }

    

    /* Modal */

    .modal-content {

        background: var(--bg-card);

        color: var(--text-primary);

    }

    

    /* Alerts */

    .alert-info {

        background: rgba(33, 150, 243, 0.15);

        border-color: rgba(33, 150, 243, 0.3);

        color: #64B5F6;

    }

    

    .alert-warning {

        background: rgba(255, 152, 0, 0.15);

        border-color: rgba(255, 152, 0, 0.3);

        color: #FFB74D;

    }

    

    .alert-success {

        background: rgba(76, 175, 80, 0.15);

        border-color: rgba(76, 175, 80, 0.3);

        color: #81C784;

    }

    

    .alert-error {

        background: rgba(244, 67, 54, 0.15);

        border-color: rgba(244, 67, 54, 0.3);

        color: #E57373;

    }

    

    /* Resumen de reserva */

    .resumen-item {

        border-bottom-color: var(--border-color);

    }

    

    /* Descripción de eventos */

    .evento-descripcion,

    .slide-descripcion {

        color: var(--text-secondary);

    }

    

    /* Form help text */

    .form-help {

        color: var(--text-secondary);

    }

    

    /* Select disabled */

    select:disabled {

        background-color: var(--bg-secondary);

        opacity: 0.6;

    }

    

    /* Tablas en admin */

    table {

        background: var(--bg-card);

        color: var(--text-primary);

    }

    

    thead {

        background: var(--bg-secondary);

    }

    

    tbody tr {

        border-bottom-color: var(--border-color);

    }

    

    tbody tr:hover {

        background: var(--bg-secondary);

    }

    

    /* Código */

    code {

        background: var(--bg-secondary);

        color: var(--amnesia-blue);

    }

    

    /* Scrollbar en modo oscuro */

    ::-webkit-scrollbar-track {

        background: var(--bg-secondary);

    }

    

    ::-webkit-scrollbar-thumb {

        background: rgba(139, 74, 156, 0.4);

    }

    

    ::-webkit-scrollbar-thumb:hover {

        background: rgba(139, 74, 156, 0.6);

    }

}



body {

    font-family: 'Roboto', sans-serif;

    line-height: 1.6;

    color: var(--text-primary);

    background: var(--bg-primary);

    min-height: 100vh;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    position: relative;

}



/* Gradiente solo en modo claro */

@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {

    body {

        background: linear-gradient(135deg, #f8f4ff 0%, #fff8fc 50%, #f4f8ff 100%);

    }

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    width: 100%;

}



/* Header *//* Header */

.header {

    background: var(--amnesia-gradient);

    color: white;

    padding: 1.5rem 0;

    box-shadow: var(--shadow-soft);

    position: relative;

    overflow: hidden;

}



.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 2.2rem;

    font-weight: 700;

    position: relative;

    z-index: 1;

    text-shadow: 0 2px 4px rgba(0,0,0,0.3);

    font-family: 'Roboto', sans-serif;

    letter-spacing: 1px;

}



.logo a {

    color: white;

    text-decoration: none;

    background: linear-gradient(45deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    transition: all 0.3s ease;

}



.logo a:hover {

    transform: scale(1.05);

    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));

}



.nav {

    display: flex;

    gap: 2rem;

}



.nav-link {

    color: white;

    text-decoration: none;

    font-weight: 500;

    transition: opacity 0.3s;

}



.nav-link:hover,

.nav-link.active {

    opacity: 0.8;

}



/* Main content */

.main {

    min-height: calc(100vh - 120px);

    padding: 2rem 0;

    overflow-x: hidden;

}



/* Secciones principales */

.eventos,

.slider-destacados {

    width: 100%;

    max-width: 100%;

}



.section-title {

    font-size: 2.5rem;

    margin-bottom: 3rem;

    text-align: center;

    background: var(--amnesia-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-weight: 700;

    position: relative;

    letter-spacing: 1px;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 4px;

    background: var(--amnesia-gradient);

    border-radius: 2px;

}



/* Slider de eventos destacados */

.slider-destacados {

    margin-bottom: 4rem;

    margin-left: 0;

    margin-right: 0;

}



.slider-container {

    position: relative;

    background: var(--white);

    border-radius: 25px;

    overflow: hidden;

    box-shadow: var(--shadow-hover);

    height: 500px;

    border: 2px solid transparent;

    background-clip: padding-box;

    margin: 0;

    width: 100%;

}



.slider-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: var(--amnesia-gradient);

    border-radius: 25px;

    padding: 2px;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    z-index: -1;

}



.slider-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.slider-track {

    position: relative;

    width: 100%;

    height: 100%;

}



.slider-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.8s ease, visibility 0.8s ease;

    z-index: 1;

}



.slider-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;

}



.slide-imagen {

    flex: 1;

    position: relative;

    overflow: hidden;

}



.img-slide {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.img-placeholder-slide {

    width: 100%;

    height: 100%;

    background: var(--amnesia-gradient);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 6rem;

    color: white;

    position: relative;

}



.slide-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, 

        rgba(139, 74, 156, 0.2) 0%, 

        rgba(233, 30, 99, 0.1) 50%, 

        rgba(33, 150, 243, 0.2) 100%);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.slider-slide:hover .slide-overlay {

    opacity: 1;

}



.slider-slide:hover .img-slide {

    transform: scale(1.05);

}



.slide-content {

    flex: 1;

    display: flex;

    align-items: center;

    position: relative;

}



.slide-info {

    padding: 3rem;

    width: 100%;

    position: relative;

    z-index: 10;

}



.slide-titulo {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 1rem;

    line-height: 1.2;

    background: var(--amnesia-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.slide-fecha {

    font-size: 1.2rem;

    color: var(--text-secondary);

    margin-bottom: 1rem;

    font-weight: 500;

}



.slide-descripcion {

    font-size: 1.1rem;

    color: var(--text-secondary);

    margin-bottom: 1.5rem;

    line-height: 1.6;

    max-width: 90%;

}



.slide-precio {

    font-size: 1.3rem;

    font-weight: 600;

    color: var(--amnesia-purple);

    margin-bottom: 2rem;

}



.btn-slide {

    padding: 1rem 2rem;

    font-size: 1.1rem;

    font-weight: 600;

    border-radius: 50px;

    text-transform: uppercase;

    letter-spacing: 1px;

    position: relative;

    overflow: hidden;

    z-index: 1;

}



/* Controles del slider */

.slider-controls {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    display: flex;

    justify-content: space-between;

    padding: 0 2rem;

    z-index: 20;

    pointer-events: none;

}



.slider-btn {

    background: rgba(255, 255, 255, 0.9);

    border: none;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    color: var(--amnesia-purple);

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: var(--shadow-soft);

    pointer-events: all;

    backdrop-filter: blur(10px);

}



.slider-btn:hover {

    background: white;

    transform: scale(1.1);

    box-shadow: var(--shadow-hover);

}



.slider-btn:active {

    transform: scale(0.95);

}



/* Indicadores */

.slider-indicators {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 1rem;

    z-index: 20;

}



.indicator {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, 0.5);

    background: transparent;

    cursor: pointer;

    transition: all 0.3s ease;

    backdrop-filter: blur(10px);

}



.indicator.active {

    background: white;

    border-color: white;

    transform: scale(1.2);

}



.indicator:hover {

    border-color: white;

    transform: scale(1.1);

}



/* Grilla de eventos regulares */

.eventos-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.2rem;

    width: 100%;

}



.evento-card {

    background: var(--white);

    border-radius: 15px;

    overflow: hidden;

    box-shadow: var(--shadow-soft);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

    border: 1px solid rgba(139, 74, 156, 0.1);

    height: 100%;

    display: flex;

    flex-direction: column;

}



.evento-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--amnesia-gradient);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.evento-card:hover {

    transform: translateY(-5px) scale(1.02);

    box-shadow: var(--shadow-hover);

}



.evento-card:hover::before {

    opacity: 1;

}



.evento-imagen {

    position: relative;

    height: 180px;

    overflow: hidden;

    flex-shrink: 0;

}



.img-evento {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.img-placeholder {

    width: 100%;

    height: 100%;

    background: var(--amnesia-gradient);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    color: white;

    position: relative;

    overflow: hidden;

}



.evento-card:hover .img-evento {

    transform: scale(1.05);

}



.precio-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background: var(--amnesia-gradient);

    color: white;

    padding: 0.4rem 0.8rem;

    border-radius: 20px;

    font-weight: 700;

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 15px rgba(139, 74, 156, 0.4);

    font-size: 0.85rem;

    letter-spacing: 0.5px;

    animation: pulse-price 2s infinite;

    z-index: 10;

}



@keyframes pulse-price {

    0%, 100% { transform: scale(1); }

    50% { transform: scale(1.05); }

}



/* Estilos para eventos destacados en la lista */

.evento-card.destacado-badge {

    border: 2px solid rgba(139, 74, 156, 0.3);

    box-shadow: var(--shadow-hover);

}



.evento-card.destacado-badge::before {

    opacity: 1;

    height: 6px;

}



.destacado-label {

    position: absolute;

    top: 10px;

    left: 10px;

    background: var(--amnesia-gradient);

    color: white;

    padding: 0.35rem 0.7rem;

    border-radius: 15px;

    font-weight: 600;

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    z-index: 10;

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 15px rgba(139, 74, 156, 0.4);

    animation: pulse-destacado 3s infinite;

}



@keyframes pulse-destacado {

    0%, 100% { 

        transform: scale(1);

        box-shadow: 0 4px 15px rgba(139, 74, 156, 0.4);

    }

    50% { 

        transform: scale(1.05);

        box-shadow: 0 8px 25px rgba(139, 74, 156, 0.6);

    }

}



.evento-info {

    padding: 1rem;

    position: relative;

    z-index: 5;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.evento-titulo {

    font-size: 1rem;

    font-weight: 600;

    margin-bottom: 0.7rem;

    color: #333;

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.evento-meta {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

    margin-bottom: 0.7rem;

    font-size: 0.85rem;

    color: #666;

}



.evento-descripcion {

    color: #666;

    font-size: 0.85rem;

    line-height: 1.5;

    margin-bottom: 0.7rem;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.evento-actions {

    margin-top: auto;

    position: relative;

    z-index: 10;

}



.evento-actions .btn {

    position: relative;

    z-index: 10;

    padding: 0.6rem 1rem;

    font-size: 0.85rem;

}



/* Página de detalle de evento */

.evento-detalle {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

    margin-bottom: 1.5rem;

}



.evento-detalle-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    align-items: stretch;

}



/* Cuando no hay imagen, contenido a ancho completo */

.evento-detalle-header.sin-imagen {

    grid-template-columns: 1fr;

}



.evento-detalle-header.sin-imagen .evento-detalle-info {

    max-width: 900px;

    margin: 0 auto;

}



.evento-detalle-imagen {

    position: relative;

    min-height: 350px;

    max-height: 500px;

    overflow: hidden;

}



.img-detalle {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.img-placeholder-detalle {

    width: 100%;

    height: 100%;

    background: var(--amnesia-gradient);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 5rem;

    color: white;

    position: relative;

    overflow: hidden;

}



.img-placeholder-detalle::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="detail-pattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><text x="15" y="22" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.1)" text-anchor="middle">🎪</text></pattern></defs><rect width="100" height="100" fill="url(%23detail-pattern)"/></svg>');

}



.evento-detalle-info {

    padding: 1.2rem 1.5rem 0.8rem 1.5rem;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

}



.evento-titulo-principal {

    font-size: 1.8rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    line-height: 1.2;

    color: #333;

    line-height: 1.2;

}



.evento-meta-principal {

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    margin-bottom: 0.5rem;

}



.meta-item {

    display: flex;

    align-items: center;

    gap: 0.4rem;

    font-size: 0.9rem;

}



.meta-icon {

    font-size: 1rem;

    width: 20px;

}



.evento-descripcion-completa {

    margin-bottom: 0;

    margin-top: 0.3rem;

    font-size: 0.85rem;

    line-height: 1.2;

    color: #555;

}



/* Promoción destacada */

.promocion-destacada {

    background: linear-gradient(135deg, #fff5e6 0%, #ffe6e6 100%);

    border-left: 5px solid #ff9800;

    border-radius: 12px;

    padding: 1rem;

    margin: 0.8rem 0;

    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.2);

    animation: pulsePromo 2s ease-in-out infinite;

}



.promocion-destacada h3 {

    font-size: 1.1rem;

    margin-bottom: 0.5rem;

    color: #ff9800;

}



.promocion-destacada p {

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.3;

}



@keyframes pulsePromo {

    0%, 100% {

        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.2);

    }

    50% {

        box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);

    }

}



.promocion-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 1rem;

}



.promocion-header i {

    color: #ff9800;

    font-size: 1.5rem;

}



.promocion-header h3 {

    margin: 0;

    color: #e65100;

    font-size: 1.3rem;

    font-weight: 700;

}



.promocion-detalles {

    color: #555;

    font-size: 1rem;

    line-height: 1.6;

    padding-left: 2.25rem;

}



.promocion-detalles strong {

    color: #e65100;

}



/* Alertas */

.alert {

    padding: 1rem;

    border-radius: 8px;

    margin: 1rem 0;

}



.alert-success {

    background-color: #d4edda;

    border: 1px solid #c3e6cb;

    color: #155724;

}



.alert-warning {

    background-color: #fff3cd;

    border: 1px solid #ffeaa7;

    color: #856404;

}



.tipo-reserva-info {

    margin-bottom: 2rem;

}



/* Formularios */

.formulario-reserva {

    background: var(--white);

    padding: 2rem;

    margin-top: 1rem;

    border-radius: 25px;

    box-shadow: var(--shadow-hover);

    position: relative;

    border: 1px solid rgba(139, 74, 156, 0.1);

}



.formulario-reserva h2 {

    margin-top: 0;

    margin-bottom: 1rem;

    font-size: 1.8rem;

}



.formulario-reserva::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 6px;

    background: var(--amnesia-gradient);

    border-radius: 25px 25px 0 0;

}



.form {

    max-width: 800px;

    margin: 0 auto;

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-bottom: 1rem;

}



.form-group {

    margin-bottom: 1rem;

}



.form-label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 500;

    color: #333;

}



.form-input,

.form-select,

.form-textarea {

    width: 100%;

    padding: 0.75rem 1rem;

    border: 1.5px solid rgba(139, 74, 156, 0.15);

    border-radius: 10px;

    font-size: 0.95rem;

    transition: all 0.3s ease;

    background: var(--white);

    font-family: 'Roboto', sans-serif;

}



.form-input:focus,

.form-select:focus,

.form-textarea:focus {

    outline: none;

    border-color: var(--amnesia-purple);

    box-shadow: 0 0 0 3px rgba(139, 74, 156, 0.08);

    transform: translateY(-1px);

}



.form-label {

    display: block;

    margin-bottom: 0.5rem;

    font-weight: 600;

    color: var(--amnesia-dark);

    font-size: 0.9rem;

    letter-spacing: 0.2px;

}



.form-help {

    display: block;

    margin-top: 0.4rem;

    font-size: 0.8rem;

    color: var(--text-secondary);

    font-style: italic;

    line-height: 1.3;

}



.form-textarea {

    resize: vertical;

    min-height: 100px;

}



/* Resumen de reserva */

.resumen-reserva {

    background: linear-gradient(135deg, var(--amnesia-light) 0%, rgba(255, 248, 252, 0.8) 100%);

    padding: 2rem;

    border-radius: 20px;

    margin: 2rem 0;

    border-left: 6px solid var(--amnesia-gradient);

    position: relative;

    box-shadow: 0 4px 20px rgba(139, 74, 156, 0.1);

}



.resumen-reserva::before {

    content: '🎵';

    position: absolute;

    top: 1rem;

    right: 1rem;

    font-size: 1.5rem;

    opacity: 0.3;

}



.resumen-reserva h3 {

    margin-bottom: 1rem;

    color: #333;

}



.resumen-item {

    display: flex;

    justify-content: space-between;

    padding: 0.5rem 0;

    border-bottom: 1px solid #e9ecef;

}



.resumen-item:last-child {

    border-bottom: none;

}



.form-actions {

    text-align: center;

    margin: 2rem 0;

}



.form-note {

    text-align: center;

    color: #666;

    margin-top: 1rem;

}



/* Botones */

.btn {

    display: inline-block;

    padding: 1rem 2rem;

    border: none;

    border-radius: 50px;

    font-size: 1rem;

    font-weight: 600;

    text-decoration: none;

    text-align: center;

    cursor: pointer;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

    overflow: hidden;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    font-size: 0.9rem;

}



.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

    transition: left 0.5s;

}



.btn:hover::before {

    left: 100%;

}



.btn-primary {

    background: var(--amnesia-gradient);

    color: white;

    box-shadow: var(--shadow-soft);

}



.btn-primary:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: var(--shadow-hover);

    background: var(--amnesia-gradient-hover);

}



.btn-outline {

    background: transparent;

    color: var(--amnesia-purple);

    border: 2px solid var(--amnesia-purple);

    position: relative;

}



.btn-outline:hover {

    background: var(--amnesia-gradient);

    color: white;

    border-color: transparent;

    transform: translateY(-2px);

}



.btn-large {

    padding: 1rem 2rem;

    font-size: 1.1rem;

}



/* Página de confirmación */

.confirmacion-container {

    max-width: 800px;

    margin: 0 auto;

    background: white;

    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.1);

    overflow: hidden;

}



.confirmacion-header {

    text-align: center;

    padding: 4rem 2rem 3rem;

    background: var(--amnesia-gradient);

    color: white;

    position: relative;

    overflow: hidden;

}



.confirmacion-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="celebration" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><text x="12.5" y="18" font-family="Arial" font-size="16" fill="rgba(255,255,255,0.1)" text-anchor="middle">🎉</text></pattern></defs><rect width="100" height="100" fill="url(%23celebration)"/></svg>');

    pointer-events: none;

}



.icono-exito,

.icono-pendiente {

    font-size: 4rem;

    margin-bottom: 1rem;

}



.confirmacion-titulo {

    font-size: 2.5rem;

    margin-bottom: 0.5rem;

    font-weight: 700;

}



.confirmacion-subtitulo {

    font-size: 1.2rem;

    opacity: 0.9;

}



.reserva-detalles {

    padding: 2rem;

}



.reserva-detalles h2 {

    margin-bottom: 1.5rem;

    color: #333;

    font-size: 1.5rem;

}



.detalle-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 0;

    border-bottom: 1px solid #e9ecef;

}



.detalle-item:last-child {

    border-bottom: none;

}



.detalle-label {

    font-weight: 500;

    color: #666;

}



.detalle-valor {

    font-weight: 500;

    text-align: right;

}



.precio-total {

    font-size: 1.2rem;

    color: #667eea;

    font-weight: 700;

}



/* Estados */

.estado-aprobado {

    color: #28a745;

    font-weight: 600;

}



.estado-pendiente {

    color: #ffc107;

    font-weight: 600;

}



.estado-rechazado {

    color: #dc3545;

    font-weight: 600;

}



.estado-cancelado {

    color: #6c757d;

    font-weight: 600;

}



.info-adicional {

    padding: 0 2rem 2rem;

}



.confirmacion-acciones {

    padding: 2rem;

    text-align: center;

    background: #f8f9fa;

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



/* Sin eventos */

.no-eventos {

    text-align: center;

    padding: 3rem;

    color: #666;

}



/* Footer */

.footer {

    background: var(--amnesia-dark);

    color: white;

    text-align: center;

    padding: 3rem 0;

    margin-top: 4rem;

    position: relative;

    overflow: hidden;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--amnesia-gradient);

}



/* Asegurar layout desktop */

@media (min-width: 769px) {

    .evento-detalle-header {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0;

    }

    

    .evento-detalle-imagen {

        min-height: 400px;

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    html, body {

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        height: auto;

        min-height: 100vh;

        position: relative;

    }

    

    body {

        touch-action: pan-y;

    }

    

    .container {

        padding: 0 15px;

    }

    

    .header .container {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

    

    .nav {

        gap: 1rem;

        flex-wrap: wrap;

        justify-content: center;

    }

    

    .section-title {

        font-size: 1.8rem;

        margin-bottom: 2rem;

    }

    

    /* Slider responsive */

    .slider-container {

        height: 450px;

        border-radius: 15px;

    }

    

    .slider-slide {

        flex-direction: column;

    }

    

    .slide-imagen {

        height: 55%;

        flex-shrink: 0;

    }

    

    .slide-content {

        height: 45%;

        overflow-y: auto;

    }

    

    .slide-info {

        padding: 1.2rem;

    }

    

    .slide-titulo {

        font-size: 1.5rem;

        margin-bottom: 0.8rem;

    }

    

    .slide-fecha {

        font-size: 0.95rem;

        margin-bottom: 0.8rem;

    }

    

    .slide-descripcion {

        font-size: 0.9rem;

        max-width: 100%;

        margin-bottom: 1rem;

        display: -webkit-box;

        -webkit-line-clamp: 3;

        line-clamp: 3;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }

    

    .slide-precio {

        font-size: 1.1rem;

        margin-bottom: 1rem;

    }

    

    .btn-slide {

        padding: 0.8rem 1.5rem;

        font-size: 0.9rem;

    }

    

    .slider-btn {

        width: 45px;

        height: 45px;

        font-size: 1.1rem;

    }

    

    .slider-controls {

        padding: 0 0.8rem;

    }

    

    .slider-indicators {

        bottom: 1.5rem;

    }

    

    .evento-detalle-header {

        grid-template-columns: 1fr;

        display: flex;

        flex-direction: column;

    }

    

    .evento-detalle-imagen {

        min-height: 250px;

        max-height: 300px;

        width: 100%;

    }

    

    .evento-detalle-info {

        padding: 1rem;

        min-height: auto;

        max-height: none;

    }

    

    .pasos-indicador-mini {

        font-size: 0.7rem;

        gap: 0.2rem;

    }

    

    .paso-num {

        width: 16px;

        height: 16px;

        font-size: 0.65rem;

    }

    

    .paso-label {

        font-size: 0.7rem;

    }

    

    .paso-linea-mini {

        width: 15px;

    }

    

    .evento-titulo-principal {

        font-size: 1.5rem;

        margin-bottom: 0.4rem;

    }

    

    .evento-meta-principal {

        gap: 0.3rem;

        margin-bottom: 0.6rem;

    }

    

    .meta-item {

        font-size: 0.85rem;

        gap: 0.3rem;

    }

    

    .evento-descripcion-completa {

        font-size: 0.85rem;

        line-height: 1.3;

    }

    

    .eventos-grid {

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

        gap: 1rem;

    }

    

    .form-row {

        grid-template-columns: 1fr;

        gap: 0.8rem;

        margin-bottom: 0.8rem;

    }

    

    .form-group {

        margin-bottom: 0.8rem;

    }

    

    .confirmacion-header {

        padding: 2rem 1rem 1rem;

    }

    

    .confirmacion-titulo {

        font-size: 2rem;

    }

    

    .reserva-detalles,

    .info-adicional {

        padding: 1.5rem;

    }

    

    .detalle-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    .detalle-valor {

        text-align: left;

    }

    

    .confirmacion-acciones {

        flex-direction: column;

    }

}



@media (max-width: 480px) {

    .main {

        padding: 1rem 0;

    }

    

    /* Slider en móviles pequeños */

    .slider-container {

        height: 500px;

        border-radius: 15px;

        margin: 0;

    }

    

    .slider-slide {

        flex-direction: column;

    }

    

    .slide-imagen {

        height: 50%;

    }

    

    .slide-content {

        height: 50%;

    }

    

    .slide-info {

        padding: 1rem;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        height: 100%;

    }

    

    .slide-titulo {

        font-size: 1.3rem;

        margin-bottom: 0.5rem;

        line-height: 1.3;

    }

    

    .slide-fecha {

        font-size: 0.85rem;

        margin-bottom: 0.5rem;

    }

    

    .slide-descripcion {

        font-size: 0.85rem;

        margin-bottom: 0.8rem;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }

    

    .slide-precio {

        font-size: 1rem;

        margin-bottom: 0.8rem;

    }

    

    .btn-slide {

        padding: 0.7rem 1.2rem;

        font-size: 0.85rem;

        margin-top: auto;

    }

    

    .slider-btn {

        width: 40px;

        height: 40px;

        font-size: 1rem;

    }

    

    .slider-controls {

        padding: 0 0.5rem;

    }

    

    .indicator {

        width: 10px;

        height: 10px;

    }

    

    .slider-indicators {

        bottom: 1rem;

        gap: 0.6rem;

    }

    

    /* Grilla en móviles pequeños - una sola columna */

    .eventos-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .evento-info {

        padding: 1rem;

    }

    

    .formulario-reserva {

        padding: 1.5rem;

    }

    

    .btn {

        width: 100%;

        margin: 0.5rem 0;

    }

    

    .confirmacion-acciones {

        padding: 1.5rem;

    }

}



/* Animaciones */

@keyframes fadeIn {

    from { opacity: 0; transform: translateY(30px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-50px); }

    to { opacity: 1; transform: translateX(0); }

}



@keyframes slideInRight {

    from { opacity: 0; transform: translateX(50px); }

    to { opacity: 1; transform: translateX(0); }

}



@keyframes bounceIn {

    0% { opacity: 0; transform: scale(0.3); }

    50% { opacity: 1; transform: scale(1.05); }

    70% { transform: scale(0.9); }

    100% { opacity: 1; transform: scale(1); }

}



@keyframes gradientShift {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

}



.evento-card,

.evento-destacado,

.formulario-reserva,

.confirmacion-container {

    animation: fadeIn 0.8s ease-out;

}



.evento-card:nth-child(even) {

    animation: slideInLeft 0.8s ease-out;

}



.evento-card:nth-child(odd) {

    animation: slideInRight 0.8s ease-out;

}



.section-title {

    animation: bounceIn 1s ease-out;

}



/* Efecto de brillo en hover */

.evento-card::after {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);

    transform: rotate(45deg);

    transition: all 0.5s;

    opacity: 0;

    pointer-events: none;

    z-index: 1;

}



.evento-card:hover::after {

    opacity: 1;

    animation: shine 0.5s ease-in-out;

}



@keyframes shine {

    0% { transform: translateX(-100%) rotate(45deg); }

    100% { transform: translateX(100%) rotate(45deg); }

}



/* Estilos para el flujo de reserva de múltiples pasos */



/* Resumen del evento en la parte superior */

.evento-resumen {

    background: var(--white);

    border-radius: 15px;

    padding: 1.5rem;

    margin-bottom: 2rem;

    box-shadow: var(--shadow-soft);

    border-left: 5px solid var(--amnesia-gradient);

}



.evento-resumen-content h2 {

    margin-bottom: 1rem;

    color: var(--amnesia-dark);

}



.evento-resumen-meta {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

}



.evento-resumen-meta span {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;

    color: var(--text-secondary);

}



/* Sección de reserva en evento.php */

.seccion-reserva {

    margin-top: 3rem;

    padding: 2rem 0;

    border-top: 1px solid rgba(139, 74, 156, 0.1);

}



.reserva-info {

    display: grid;

    gap: 2rem;

    margin-bottom: 2rem;

}



.evento-resumen-card {

    background: linear-gradient(135deg, rgba(139, 74, 156, 0.05), rgba(233, 30, 99, 0.05));

    border: 1px solid rgba(139, 74, 156, 0.1);

    border-radius: 15px;

    padding: 1.5rem;

}



.evento-resumen-card h3 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    font-size: 1.2rem;

    font-weight: 600;

}



.proceso-reserva {

    background: white;

    border: 1px solid rgba(139, 74, 156, 0.1);

    border-radius: 15px;

    padding: 1.5rem;

}



.proceso-reserva h4 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    font-size: 1.1rem;

    font-weight: 600;

}



.pasos-preview {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

    position: relative;

}



.pasos-preview::before {

    content: '';

    position: absolute;

    top: 20px;

    left: 30px;

    right: 30px;

    height: 2px;

    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));

    z-index: 1;

}



.paso-preview {

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    z-index: 2;

}



.paso-preview .paso-numero {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 0.9rem;

    margin-bottom: 0.5rem;

}



.paso-preview .paso-texto {

    font-size: 0.85rem;

    color: var(--text-color);

    text-align: center;

    font-weight: 500;

}



.proceso-descripcion {

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin: 0;

    text-align: center;

}



.tipo-reserva-recordatorio {

    margin: 1.5rem 0;

}



.cta-reserva {

    text-align: center;

    padding: 2rem 0;

}



.btn-reservar {

    font-size: 1.2rem;

    padding: 1rem 2rem;

    min-width: 250px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    box-shadow: 0 8px 25px rgba(139, 74, 156, 0.3);

    transition: all 0.3s ease;

}



.btn-reservar:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(139, 74, 156, 0.4);

}



.cta-note {

    margin-top: 1rem;

    color: var(--text-secondary);

    font-style: italic;

}



/* Formulario de Reserva Directo */

.reserva-container {

    max-width: 700px;

    margin: 0 auto;

}



.tipo-reserva-info {

    margin-bottom: 2rem;

}



.formulario-reserva-directo {

    background: white;

    border-radius: 20px;

    padding: 2.5rem;

    box-shadow: var(--shadow-soft);

    border: 1px solid rgba(139, 74, 156, 0.1);

}



.form-reserva {

    width: 100%;

}



.form-intro {

    text-align: center;

    margin-bottom: 2rem;

    padding: 1.5rem;

    background: linear-gradient(135deg, rgba(139, 74, 156, 0.05), rgba(233, 30, 99, 0.05));

    border-radius: 15px;

}



.form-intro p {

    margin: 0;

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.6;

}



.form-group {

    margin-bottom: 1.2rem;

}



.form-group label {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    color: var(--text-primary);

    margin-bottom: 0.5rem;

    font-size: 0.95rem;

    font-size: 1rem;

}



.form-group label .icon {

    font-size: 1.2rem;

}



.form-group label .required {

    color: #E91E63;

}



.form-control {

    width: 100%;

    padding: 1rem 1.2rem;

    border: 2px solid #e0e0e0;

    border-radius: 12px;

    font-size: 1rem;

    transition: all 0.3s ease;

    font-family: 'Roboto', sans-serif;

    background-color: #fff;

    color: #333;

}



.form-control:focus {

    outline: none;

    border-color: var(--amnesia-purple);

    box-shadow: 0 0 0 3px rgba(139, 74, 156, 0.1);

    background-color: #fafafa;

}



.form-control::placeholder {

    color: #999;

    font-style: italic;

    opacity: 0.8;

}



.form-control:hover:not(:focus) {

    border-color: #ccc;

}



.form-help {

    display: block;

    margin-top: 0.4rem;

    color: var(--text-secondary);

    font-size: 0.8rem;

    line-height: 1.3;

}



.email-status {

    font-size: 0.9rem;

    font-weight: 500;

    transition: all 0.3s ease;

}



.email-status span {

    display: inline-block;

    padding: 0.3rem 0.6rem;

    border-radius: 4px;

    background-color: rgba(0, 0, 0, 0.05);

}



.form-actions {

    margin-top: 2rem;

}



.form-actions .btn {

    width: 100%;

    padding: 1.2rem;

    font-size: 1.1rem;

    font-weight: 600;

    background: var(--amnesia-gradient);

    border: none;

    border-radius: 12px;

    color: white;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 8px 25px rgba(139, 74, 156, 0.3);

}



.form-actions .btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 35px rgba(139, 74, 156, 0.4);

}



.form-footer {

    margin-top: 1.5rem;

    text-align: center;

}



.form-footer p {

    margin: 0;

    color: var(--text-secondary);

}



.contacto-alternativo {

    margin-top: 3rem;

    padding: 2rem;

    background: linear-gradient(135deg, rgba(139, 74, 156, 0.03), rgba(233, 30, 99, 0.03));

    border-radius: 15px;

    text-align: center;

}



.contacto-alternativo p {

    margin-bottom: 1rem;

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.contacto-alternativo .btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



/* Indicador de pasos */

.pasos-indicador {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 3rem;

    padding: 2rem 0;

}



.paso {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    min-width: 120px;

}



.paso-numero {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #e9ecef;

    color: #6c757d;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.2rem;

    transition: all 0.3s ease;

}



.paso.activo .paso-numero {

    background: var(--amnesia-gradient);

    color: white;

    transform: scale(1.1);

}



.paso.completado .paso-numero {

    background: #28a745;

    color: white;

}



.paso-texto {

    font-size: 0.9rem;

    font-weight: 500;

    color: var(--text-secondary);

    text-align: center;

}



.paso.activo .paso-texto {

    color: var(--amnesia-purple);

    font-weight: 600;

}



/* Stepper Minimalista */

.pasos-indicador-mini {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.3rem;

    padding: 0.5rem 0;

    margin: 0.5rem 0;

    font-size: 0.8rem;

}



.paso-mini {

    display: flex;

    align-items: center;

    gap: 0.2rem;

}



.paso-num {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 0.7rem;

    background: #e0e0e0;

    color: #666;

    transition: all 0.2s ease;

}



.paso-mini.activo .paso-num {

    background: var(--amnesia-purple);

    color: white;

}



.paso-mini.completado .paso-num {

    background: #28a745;

    color: white;

    font-size: 0.65rem;

}



.paso-mini.completado .paso-num::before {

    content: '✓';

}



.paso-label {

    font-size: 0.75rem;

    color: #999;

    font-weight: 400;

}



.paso-mini.activo .paso-label {

    color: var(--amnesia-purple);

    font-weight: 600;

}



.paso-mini.completado .paso-label {

    color: #28a745;

}



.paso-linea-mini {

    width: 25px;

    height: 1px;

    background: #e0e0e0;

    margin: 0 0.2rem;

}



.paso-linea-mini.completada {

    background: #28a745;

}



.paso-linea {

    flex: 1;

    height: 3px;

    background: #e9ecef;

    margin: 0 1rem;

    position: relative;

    top: -12px;

}



.paso-linea.completada {

    background: #28a745;

}



/* Sección de verificación de email */

.email-verificacion {

    display: flex;

    align-items: flex-start;

    gap: 2rem;

    margin: 2rem 0;

}



.email-icon {

    font-size: 4rem;

    line-height: 1;

}



.email-content {

    flex: 1;

}



.email-content h3 {

    margin-bottom: 1rem;

    color: var(--amnesia-dark);

    font-size: 1.5rem;

}



.email-content p {

    margin-bottom: 2rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



.email-input {

    font-size: 1.1rem !important;

    padding: 1.2rem 1.5rem !important;

}



.email-status {

    margin-top: 0.5rem;

    font-size: 0.9rem;

}



/* Cliente encontrado/nuevo */

.cliente-encontrado,

.cliente-nuevo {

    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);

    border-radius: 15px;

    padding: 2rem;

    margin-bottom: 2rem;

    border-left: 5px solid #28a745;

    position: relative;

    overflow: hidden;

}



.cliente-nuevo {

    background: linear-gradient(135deg, #cce7ff 0%, #b3d9ff 100%);

    border-left-color: var(--amnesia-blue);

}



.cliente-encontrado::before,

.cliente-nuevo::before {

    content: '';

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 100px;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" font-size="30" text-anchor="middle" fill="rgba(255,255,255,0.3)">👋</text></svg>');

    background-repeat: no-repeat;

    background-position: center;

}



.cliente-nuevo::before {

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" font-size="30" text-anchor="middle" fill="rgba(255,255,255,0.3)">🎉</text></svg>');

    background-repeat: no-repeat;

    background-position: center;

}



.cliente-encontrado-header h2,

.cliente-nuevo-header h2 {

    margin-bottom: 0.5rem;

    color: var(--amnesia-dark);

}



.cliente-encontrado-header p,

.cliente-nuevo-header p {

    color: var(--text-secondary);

    margin: 0;

}



/* Secciones de datos */

.seccion-datos {

    background: var(--amnesia-light);

    border-radius: 12px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(139, 74, 156, 0.08);

}



.seccion-datos h3 {

    margin: 0 0 1.2rem 0;

    color: var(--amnesia-dark);

    font-size: 1.1rem;

    font-weight: 600;

    border-bottom: 1px solid rgba(139, 74, 156, 0.15);

    padding-bottom: 0.6rem;

    background: var(--amnesia-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Alertas específicas */

.alert-info {

    background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);

    border-left: 4px solid #17a2b8;

    color: #0c5460;

}



.alert-info h4 {

    margin-bottom: 1rem;

    color: #0c5460;

}



.alert-info ul {

    margin: 0;

    padding-left: 1.5rem;

}



.alert-info li {

    margin-bottom: 0.5rem;

}



/* Responsive para pasos */

@media (max-width: 768px) {

    .pasos-indicador {

        flex-direction: column;

        gap: 1rem;

    }

    

    .paso-linea {

        display: none;

    }

    

    .email-verificacion {

        flex-direction: column;

        text-align: center;

        gap: 1rem;

    }

    

    .evento-resumen-meta {

        flex-direction: column;

        gap: 1rem;

    }

    

    .pasos-preview {

        flex-direction: column;

        gap: 1rem;

    }

    

    .pasos-preview::before {

        display: none;

    }

    

    .btn-reservar {

        font-size: 1.1rem;

        padding: 0.875rem 1.5rem;

        min-width: 200px;

    }

    

    .proceso-reserva,

    .evento-resumen-card {

        padding: 1rem;

    }

    

    .seccion-datos {

        padding: 1.2rem;

        margin-bottom: 1rem;

    }

    

    .seccion-datos h3 {

        font-size: 1rem;

        margin-bottom: 1rem;

    }

}



/* Scrollbar personalizada */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1;

}



::-webkit-scrollbar-thumb {

    background: #c1c1c1;

    border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

    background: #a8a8a8;

}



/* Estilos para descripciones con saltos de línea */

.slide-descripcion,

.evento-descripcion,

.evento-descripcion-completa {

    white-space: pre-line;

    line-height: 1.2;

}



.evento-descripcion p,

.evento-descripcion-completa p,

.slide-descripcion p {

    white-space: pre-line;

    line-height: 1.2;

    margin-bottom: 0.15rem;

    margin-top: 0;

}



/* Estilos para formato WhatsApp */

.evento-descripcion strong,

.evento-descripcion-completa strong,

.slide-descripcion strong {

    color: var(--amnesia-purple);

    font-weight: 700;

}



.evento-descripcion em,

.evento-descripcion-completa em,

.slide-descripcion em {

    font-style: italic;

    color: var(--amnesia-pink);

}



.evento-descripcion del,

.evento-descripcion-completa del,

.slide-descripcion del {

    text-decoration: line-through;

    opacity: 0.7;

}



.evento-descripcion code,

.evento-descripcion-completa code,

.slide-descripcion code {

    background: #f4f4f4;

    padding: 2px 6px;

    border-radius: 3px;

    font-family: 'Courier New', monospace;

    font-size: 0.9em;

    color: var(--amnesia-blue);

}



/* Feedback de carga de ubicaciones */

#ubicacion-feedback {

    margin-top: 0.4rem;

    font-size: 0.85rem;

    line-height: 1.4;

}



#ubicacion-feedback .ubicacion-loading {

    color: var(--amnesia-purple);

    font-weight: 500;

    animation: pulse 1.5s ease-in-out infinite;

}



#ubicacion-feedback .ubicacion-success {

    color: #28a745;

    font-weight: 500;

}



#ubicacion-feedback .ubicacion-error {

    color: #dc3545;

    font-weight: 500;

}



@keyframes pulse {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0.5;

    }

}



/* Select deshabilitado con estilo especial */

select:disabled {

    background-color: #f5f5f5;

    cursor: not-allowed;

    opacity: 0.7;

}
/* ============================================
   ESTILOS PARA IMPRESIÓN
   ============================================ */
@media print {
    /* Ocultar elementos que no deben imprimirse */
    .header,
    .footer,
    .nav,
    .nav-link,
    .confirmacion-acciones,
    button,
    .btn,
    script {
        display: none !important;
    }
    
    /* Reset de página */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    body {
        background: white !important;
        color: #000 !important;
        margin: 0;
        padding: 10px;
        font-size: 10pt;
    }
    
    .main {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    .confirmacion-container {
        display: block !important;
        visibility: visible !important;
        background: white !important;
    }
    
    /* Header de confirmación */
    .confirmacion-header {
        display: block !important;
        visibility: visible !important;
        text-align: center;
        margin-bottom: 8px;
        page-break-after: avoid;
        background: #8B4A9C !important;
        color: white !important;
        padding: 8px 12px !important;
        border: 2px solid #8B4A9C !important;
    }
    
    .icono-exito,
    .icono-pendiente {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 14pt;
        background: white !important;
        color: #8B4A9C !important;
        width: 28px;
        height: 28px;
        line-height: 28px;
        margin: 0 6px 0 0;
        border-radius: 50%;
        vertical-align: middle;
    }
    
    .confirmacion-titulo {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 12pt;
        color: white !important;
        margin: 0;
        vertical-align: middle;
    }
    
    .confirmacion-subtitulo {
        display: none !important;
    }
    
    /* Detalles de la reserva */
    .reserva-detalles {
        display: block !important;
        visibility: visible !important;
        background: white !important;
        border: 2px solid #8B4A9C !important;
        padding: 12px !important;
        margin: 8px 0 !important;
        page-break-inside: avoid;
    }
    
    .reserva-detalles h2 {
        display: block !important;
        visibility: visible !important;
        color: #8B4A9C !important;
        font-size: 13pt;
        margin-bottom: 8px;
        border-bottom: 2px solid #8B4A9C;
        padding-bottom: 5px;
    }
    
    .detalle-item {
        display: flex !important;
        visibility: visible !important;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid #ddd;
        page-break-inside: avoid;
    }
    
    .detalle-item:last-child {
        border-bottom: none;
    }
    
    .detalle-label {
        display: inline-block !important;
        visibility: visible !important;
        font-weight: bold;
        color: #333 !important;
        font-size: 9pt;
        width: 50%;
    }
    
    .detalle-valor {
        display: inline-block !important;
        visibility: visible !important;
        color: #000 !important;
        text-align: right;
        font-size: 9pt;
        width: 50%;
    }
    
    .precio-total {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 11pt !important;
        font-weight: bold;
        color: #8B4A9C !important;
    }
    
    /* Estados */
    .estado-aprobado,
    .estado-pendiente,
    .estado-rechazado,
    .estado-cancelado {
        display: inline-block !important;
        visibility: visible !important;
        font-weight: bold;
    }
    
    .estado-aprobado {
        color: #28a745 !important;
    }
    
    .estado-pendiente {
        color: #ffc107 !important;
    }
    
    .estado-rechazado {
        color: #dc3545 !important;
    }
    
    .estado-cancelado {
        color: #6c757d !important;
    }
    
    /* Información adicional */
    .info-adicional {
        display: block !important;
        visibility: visible !important;
        background: #f5f5f5 !important;
        border: 1px solid #8B4A9C !important;
        padding: 10px !important;
        margin: 8px 0 !important;
        page-break-inside: avoid;
    }
    
    .alert {
        display: block !important;
        visibility: visible !important;
    }
    
    .alert h3 {
        display: block !important;
        visibility: visible !important;
        color: #8B4A9C !important;
        font-size: 10pt;
        margin-bottom: 6px;
    }
    
    .alert ul {
        display: block !important;
        visibility: visible !important;
        list-style-position: inside;
        margin: 0;
        padding: 0;
    }
    
    .alert ul li {
        display: list-item !important;
        visibility: visible !important;
        margin-bottom: 3px;
        color: #333 !important;
        font-size: 8pt;
        line-height: 1.3;
    }
    
    .alert-success {
        border-left: 3px solid #28a745 !important;
    }
    
    .alert-warning {
        border-left: 3px solid #ffc107 !important;
    }
    
    /* Footer de impresión con línea superior */
    .info-adicional::after {
        content: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━";
        display: block;
        text-align: center;
        margin-top: 12px;
        color: #8B4A9C !important;
        font-size: 7pt;
    }
    
    .confirmacion-container::after {
        content: "Amnesia Pub & Music - Vive la música, vive la experiencia";
        display: block !important;
        visibility: visible !important;
        text-align: center;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 2px solid #8B4A9C;
        color: #8B4A9C !important;
        font-size: 8pt;
        font-weight: bold;
    }
    
    /* Prevenir saltos de página en lugares inconvenientes */
    h2, h3 {
        page-break-after: avoid;
    }
    
    /* Ajuste de márgenes de página */
    @page {
        margin: 1cm;
        size: A4 portrait;
    }
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    color: white !important;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    white-space: nowrap;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%) !important;
}

.btn-whatsapp:active {
    transform: translateY(0);
}