*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#041138;
    font-family:Arial;
    color:white;
}

/* =========================
LAYOUT
========================= */

.layout{
    display:flex;
    min-height:100vh;
}

/* =========================
SIDEBAR
========================= */

.sidebar{
    width:260px;
    background:#081845;
    padding:30px 20px;
    display:flex;
    flex-direction:column;
}

.logo{
    font-size:48px;
    font-weight:bold;
    color:#f5b041;
    margin-bottom:50px;
}

.sidebar a{
    color:white;
    text-decoration:none;
    padding:14px 15px;
    border-radius:10px;
    margin-bottom:10px;
    font-size:18px;
    transition:0.3s;
}

.sidebar a:hover{
    background:#10254d;
}

.logout{
    margin-top:auto;
    background:#ff5a5f;
    text-align:center;
    font-weight:bold;
}

/* =========================
CONTENIDO
========================= */

.contenido{
    flex:1;
    padding:40px;
}

.titulo{
    font-size:50px;
    margin-bottom:40px;
}

/* =========================
CARDS
========================= */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card{
    background:#10254d;
    padding:40px;
    border-radius:20px;
    min-height:140px;
    font-size:24px;
}

/* =========================
LOGIN
========================= */

.login-page{
    background:#041138;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.login-container{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.login-box{
    width:100%;
    max-width:420px;
    background:#0B1D4D;
    padding:50px;
    border-radius:25px;
    box-shadow:0 0 40px rgba(0,0,0,0.3);
}

.login-logo{
    font-size:52px;
    color:#f5b041;
    text-align:center;
    margin-bottom:10px;
}

.login-subtitle{
    text-align:center;
    margin-bottom:35px;
    color:#cfd8dc;
    font-size:16px;
}

.login-box input{
    width:100%;
    padding:16px;
    margin-bottom:18px;
    border:none;
    border-radius:12px;
    background:#10254d;
    color:white;
    font-size:16px;
}

.login-box input::placeholder{
    color:#b0bec5;
}

.login-box button{
    width:100%;
    padding:16px;
    background:#f5b041;
    border:none;
    border-radius:12px;
    color:#041138;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.login-box button:hover{
    opacity:0.9;
}

.error-box{
    margin-top:20px;
    background:#ff5a5f;
    padding:15px;
    border-radius:10px;
    text-align:center;
    font-weight:bold;
}

/* =========================
FORMULARIOS
========================= */

.form-box{
    background:#10254d;
    padding:30px;
    border-radius:20px;
    margin-bottom:30px;
}

.evento-form{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.evento-form input{
    padding:15px;
    border:none;
    border-radius:12px;
    background:#081845;
    color:white;
}

.evento-form button{
    background:#f5b041;
    border:none;
    border-radius:12px;
    font-weight:bold;
    cursor:pointer;
}

/* =========================
TABLAS
========================= */

.tabla-box{
    background:#10254d;
    border-radius:20px;
    overflow:hidden;
    width:100%;
}

table{
    width:100%;
    border-collapse:collapse;
}

thead{
    background:#1a2f6b;
}

th{
    padding:20px;
    text-align:left;
}

td{
    padding:20px;
    border-top:1px solid rgba(255,255,255,0.05);
}

.estado-activo{
    background:#27ae60;
    padding:8px 12px;
    border-radius:8px;
    font-size:14px;
}

.btn-editar{
    background:#3498db;
    color:white;
    padding:10px 14px;
    border-radius:8px;
    text-decoration:none;
    margin-right:8px;
    display:inline-block;
    min-width:90px;
    text-align:center;
}

.btn-eliminar{
    background:#e74c3c;
    color:white;
    padding:10px 14px;
    border-radius:8px;
    text-decoration:none;
    display:inline-block;
    min-width:90px;
    text-align:center;
}

/* ===================================== */
/* DASHBOARD LOGISTICO */
/* ===================================== */

.dashboard-grid{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}


/* ===================================== */
/* TARJETAS */
/* ===================================== */

.card-dashboard{

    background:#13295c;

    border-radius:18px;

    padding:30px;

    box-shadow:
    0 4px 15px rgba(0,0,0,0.25);

    transition:0.3s;

}


.card-dashboard:hover{

    transform:translateY(-4px);

}


.card-dashboard h2{

    color:#b8c7ce;

    font-size:18px;

    margin-bottom:15px;

}


.card-dashboard h1{

    color:#ffffff;

    font-size:42px;

    margin:0;

}


/* ===================================== */
/* BOTONES DASHBOARD */
/* ===================================== */

.btn-dashboard{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f0b040;

    color:#041138;

    text-decoration:none;

    font-weight:bold;

    border-radius:15px;

    height:70px;

    transition:0.3s;

}


.btn-dashboard:hover{

    background:#ffbf47;

    transform:translateY(-3px);

}

/* =========================
MEJORAS EVENTOS
========================= */

.evento-form textarea{
    padding:15px;
    border:none;
    border-radius:12px;
    background:#081845;
    color:white;
    min-height:120px;
    resize:none;
    width:100%;
}

.evento-form select{
    padding:15px;
    border:none;
    border-radius:12px;
    background:#081845;
    color:white;
    width:100%;
}

.evento-form button{
    padding:15px;
    min-height:55px;
}

.tabla-box{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

@media(max-width:900px){

    table{
        min-width:900px;
    }

}

/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

    .layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
    }

    .contenido{
        padding:20px;
    }

    .titulo{
        font-size:38px;
    }

}

@media(max-width:600px){

    .evento-form{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .titulo{
        font-size:32px;
    }

    .logo{
        font-size:40px;
    }

}

td{
    vertical-align:middle;
    white-space:nowrap;
}

.form-box-password{

    background:#10285c;

    padding:35px;

    border-radius:18px;

    max-width:600px;

    margin-top:20px;
}


.grupo-formulario{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;
}


.grupo-formulario label{

    color:white;

    margin-bottom:8px;

    font-weight:bold;
}


.grupo-formulario input{

    padding:14px;

    border:none;

    border-radius:10px;

    font-size:15px;
}

.btn-guardar{

    background:#d4af37;

    color:#ffffff;

    border:none;

    padding:14px 22px;

    border-radius:10px;

    font-weight:bold;

    font-size:15px;

    cursor:pointer;
    
    text-decoration:none;
    
    display:inline-block;

    transition:0.3s;
}


.btn-guardar:hover{

    background:#f1c95a;

    transform:translateY(-2px);
    
    .btn-guardar:hover{

    text-decoration:none;

    color:#fff;

}
}

.contenedor-editar-usuario{

    background:#10285c;

    padding:35px;

    border-radius:20px;

    margin-top:20px;
}


.grid-usuario{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;
}


.grupo-formulario{

    display:flex;

    flex-direction:column;
}


.grupo-formulario label{

    color:white;

    margin-bottom:8px;

    font-weight:bold;

    font-size:14px;
}


.grupo-formulario input,
.grupo-formulario select{

    padding:14px;

    border:none;

    border-radius:10px;

    font-size:15px;
}


.grupo-foto{

    align-items:flex-start;
}


.foto-preview{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #d4af37;

    margin-bottom:15px;
}


.contenedor-boton{

    grid-column:1/3;

    margin-top:10px;
}


.btn-guardar{

    background:#d4af37;

    color:#041138;

    border:none;

    padding:15px 25px;

    border-radius:12px;

    font-weight:bold;

    font-size:15px;

    cursor:pointer;

    transition:0.3s;
}


.btn-guardar:hover{

    background:#f1c95a;

    transform:translateY(-2px);
}

/* ===================================== */
/* CONTROL TICKETS */
/* ===================================== */

.grid-control{

    display:grid;

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

    gap:22px;

    align-items:end;
}


.grid-control .grupo-formulario{

    margin-bottom:0;
}


.grid-control label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:bold;

    color:white;
}


.grid-control input,
.grid-control select{

    width:100%;

    height:52px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#081845;

    color:white;

    font-size:15px;
}


.grid-control button{

    width:100%;

    height:52px;

    border:none;

    border-radius:12px;

    background:#f5b041;

    color:#041138;

    font-weight:bold;

    font-size:15px;

    cursor:pointer;

    transition:0.3s;
}


.grid-control button:hover{

    background:#ffbf47;

    transform:translateY(-2px);
}

/* ===================================== */
/* MAPA ASIENTOS */
/* ===================================== */

.asiento{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    cursor:pointer;

    transition:0.25s ease;

    user-select:none;

    border:3px solid transparent;

    box-shadow:
    0 0 12px rgba(0,0,0,0.35);

}


/* ===================================== */
/* SILLETERIA */
/* ===================================== */

.asiento.silla{

    width:42px;

    height:42px;

    font-size:10px;

    border-radius:10px;
}


/* ===================================== */
/* PALCOS */
/* ===================================== */

.asiento.palco{

    width:105px;

    height:72px;

    font-size:11px;

    border-radius:14px;
}


/* ===================================== */
/* MESAS */
/* ===================================== */

.asiento.mesa{

    width:88px;

    height:88px;

    font-size:11px;

    border-radius:50%;
}


/* ===================================== */
/* VIP */
/* ===================================== */

.asiento.vip{

    width:75px;

    height:75px;

    font-size:11px;

    border-radius:16px;
}

.modal-editor{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.55);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;
}

.modal-contenido{

    width:500px;

    background:#10254d;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 0 40px rgba(0,0,0,0.45);
}

.modal-titulo{

    text-align:center;

    color:white;

    margin-bottom:30px;

    font-size:32px;
}

.grupo-modal{

    display:flex;

    flex-direction:column;

    margin-bottom:18px;
}

.grupo-modal label{

    color:white;

    margin-bottom:8px;

    font-size:14px;

    font-weight:bold;
}

.grupo-modal input,
.grupo-modal select{

    height:52px;

    border:none;

    border-radius:14px;

    background:#081845;

    color:white;

    padding:14px;

    font-size:15px;
}

.input-color{

    padding:5px !important;

    cursor:pointer;
}

.grid-modal{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.acciones-modal{

    display:flex;

    gap:15px;

    margin-top:25px;
}

.btn-modal{

    flex:1;

    height:54px;

    border:none;

    border-radius:14px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

.btn-modal.guardar{

    background:#27ae60;

    color:white;
}

.btn-modal.cerrar{

    background:#e74c3c;

    color:white;
}

.btn-modal:hover{

    transform:translateY(-2px);
}

.btn-modal.eliminar{

    background:#c0392b;

    color:white;
}

/* =========================================
MODAL ELEMENTOS MAPA
========================================= */

.modal-overlay{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.65);

    display:none;
    align-items:center;
    justify-content:center;

    z-index:999999;

    backdrop-filter:blur(6px);

}

.modal-box{

    width:500px;
    background:#10235c;

    border-radius:24px;

    padding:35px;

    box-shadow:
    0 0 40px rgba(0,0,0,0.5);

    border:
    1px solid rgba(255,255,255,0.08);

}

.modal-title{

    color:white;
    font-size:30px;
    margin-bottom:30px;
    font-weight:800;
    text-align:center;

}

.modal-group{

    margin-bottom:18px;

}

.modal-label{

    display:block;
    color:#cfd8ff;
    margin-bottom:8px;
    font-size:14px;
    font-weight:bold;

}

.modal-input{

    width:100%;
    height:52px;

    border:none;

    border-radius:14px;

    padding:0 18px;

    background:#09163d;

    color:white;

    font-size:16px;

    outline:none;

}

.modal-color{

    width:100%;
    height:60px;

    border:none;

    border-radius:14px;

    background:#09163d;

    padding:5px;

    cursor:pointer;

}

.modal-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-bottom:25px;

}

.modal-actions{

    display:flex;
    gap:15px;

}

.btn-modal{

    flex:1;

    height:56px;

    border:none;

    border-radius:14px;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.2s;

}

.btn-guardar{

    background:#27ae60;

}

.btn-cerrar{

    background:#e74c3c;

}

.btn-eliminar{

    background:#922b21;

    color:white;

}

.btn-eliminar:hover{

    background:#c0392b;

}

/* =====================================
TOOLBAR EDITOR
===================================== */

.toolbar-editor{

    display:flex;

    gap:12px;

    margin-bottom:20px;

    flex-wrap:wrap;
}

.btn-tool{

    background:#10235c;

    color:white;

    border:none;

    padding:14px 22px;

    border-radius:14px;

    font-weight:bold;

    cursor:pointer;

    transition:0.2s;
}

.btn-tool:hover{

    background:#1b3275;

    transform:translateY(-2px);
}

/* =====================================
ELEMENTO SELECCIONADO
===================================== */

.elemento-activo{

    outline:4px solid #4da3ff;

    outline-offset:4px;

    box-shadow:
    0 0 25px rgba(77,163,255,0.7);

    z-index:99999 !important;

}

.resize-handle{
    
    opacity:0;
    
    pointer-events:none;
    
    transition:0.2s;

    position:absolute;

    width:18px;

    height:18px;

    right:-8px;

    bottom:-8px;

    background:#ffffff;

    border-radius:50%;

    border:3px solid #041138;

    cursor:nwse-resize;

    z-index:9999;

}

.elemento-activo{

    outline:3px solid #00d2ff;

    z-index:9999 !important;

}

.elemento:hover .resize-handle{

    opacity:1;

    pointer-events:auto;

}

/* ===================================== */
/* MODAL PUNTOS DE VENTA */
/* ===================================== */

.modal-overlay-puntos{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.65);

    display:none;

    justify-content:center;

    align-items:center;

    overflow-y:auto;

    padding:30px;

    z-index:999999;

    backdrop-filter:blur(4px);

}

.modal-box-puntos{

    width:700px;

    max-width:95%;

    max-height:90vh;

    overflow-y:auto;

    background:#10235c;

    border-radius:20px;

    padding:35px;

    box-shadow:
    0 0 40px rgba(0,0,0,.45);

}

/* Scroll bonito */

.modal-box-puntos::-webkit-scrollbar{

    width:10px;

}

.modal-box-puntos::-webkit-scrollbar-track{

    background:#081845;

    border-radius:20px;

}

.modal-box-puntos::-webkit-scrollbar-thumb{

    background:#3a5aa8;

    border-radius:20px;

}

.modal-box-puntos::-webkit-scrollbar-thumb:hover{

    background:#5377cf;

}

/* Responsive */

@media(max-height:700px){

    .modal-overlay-puntos{

        align-items:flex-start;

    }

    .modal-box-puntos{

        margin-top:25px;

        margin-bottom:25px;

    }

}

/*======================================
EVENTOS CENTRO LOGISTICO
======================================*/

.tabla-logistica-eventos{

    margin-top:35px;

    background:#182b63;

    border-radius:16px;

    padding:25px;

}

.titulo-tabla{

    color:#fff;

    margin-bottom:20px;

    font-size:24px;

    font-weight:bold;

}

.tabla-eventos{

    width:100%;

    border-collapse:collapse;

}

.tabla-eventos th{

    background:#223b7d;

    color:#fff;

    padding:14px;

    text-align:center;

}

.tabla-eventos td{

    padding:14px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

    color:#f2f2f2;

}

.tabla-eventos tr:hover{

    background:#21376f;

}

.btn-ver-logistica{

    display:inline-block;

    background:#2fae5b;

    color:#fff;

    padding:8px 18px;

    border-radius:8px;

    text-decoration:none;

    font-weight:bold;

    transition:.25s;

}

.btn-ver-logistica:hover{

    background:#28984f;

}

/* =======================================
MODAL ABONOS
======================================= */

.modal-header-puntos{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.modal-titulo-puntos{

    margin:0;

    color:#ffffff;

    font-size:30px;

    font-weight:bold;

}

.cerrar-modal{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#c9d4ff;

    font-size:30px;

    cursor:pointer;

    transition:.25s;

}

.cerrar-modal:hover{

    background:#20386f;

    color:#ffffff;

}

.grid-control textarea{

    width:100%;

    min-height:90px;

    padding:14px;

    border:none;

    border-radius:12px;

    background:#081845;

    color:white;

    font-size:15px;

    resize:vertical;

    outline:none;

}

.grid-control textarea::placeholder{

    color:#90a4d4;

}

.btn-calcular{

    background:#00797f;

    color:#ffffff;

    border:none;

    padding:15px 25px;

    border-radius:12px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-cancelar:hover{

    background:#3d63ad;

    transform:translateY(-2px);

}

.btn-cancelar{

    background:#2b4d8d;

    color:#ffffff;

    border:none;

    padding:15px 25px;

    border-radius:12px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-cancelar:hover{

    background:#3d63ad;

    transform:translateY(-2px);

}

.btn-cerrar-modal{

    background:#800000;

    color:#ffffff;

    border:none;

    padding:10px 18px;

    border-radius:10px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-cerrar-modal:hover{

    background:#3c64b3;

}

.btn-regresar-liq{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#c59400;

    color:#000000;

    text-decoration:none;

    border:none;

    padding:15px 25px;

    border-radius:12px;

    font-weight:bold;

    font-size:15px;

    cursor:pointer;

    transition:.25s;

}

.btn-regresar-liq:hover{

    background:#4b74c9;

    color:#000000;

    text-decoration:none;

    transform:translateY(-2px);

}

.btn-regresar-liq:visited{

    color:#000000;

    text-decoration:none;

}

/* =====================================
MENU RAPIDO LOGISTICA
===================================== */

.toolbar-logistica{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin:30px 0;

}

.btn-toolbar-logistica{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    height:52px;

    background:#d4af37;

    color:#041138;

    text-decoration:none;

    border-radius:12px;

    font-weight:bold;

    transition:.25s;

}

.btn-toolbar-logistica:hover{

    background:#efc24d;

    transform:translateY(-2px);

    color:#041138;

    text-decoration:none;

}

.header-modulo{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.header-modulo .titulo{

    margin:0;

}

/*====================================================*/
/* MODAL GLOBAL MIBOLETTO */
/*====================================================*/

.modal-mensaje{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);

    justify-content:center;
    align-items:center;

    z-index:999999;

    backdrop-filter:blur(4px);

}

.modal-mensaje-box{

    width:520px;
    max-width:92%;

    background:#ffffff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.40);

    animation:modalEntrada .25s ease;

}

@keyframes modalEntrada{

    from{

        transform:scale(.90);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.modal-icono{

    font-size:82px;

    margin-bottom:22px;

}

.modal-icono.error{

    color:#e53935;

}

.modal-icono.success{

    color:#2e7d32;

}

.modal-icono.warning{

    color:#f9a825;

}

.modal-icono.info{

    color:#1976d2;

}

#modalTitulo{

    font-size:34px;

    font-weight:bold;

    color:#1e293b;

    margin-bottom:20px;

}

#modalTexto{

    font-size:19px;

    line-height:1.8;

    color:#475569;

    margin-bottom:35px;

}

.btn-modal-ok{

    min-width:180px;

    height:54px;

    border:none;

    border-radius:12px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    color:white;

    background:#2563eb;

    transition:.25s;

}

.btn-modal-ok:hover{

    transform:translateY(-2px);

    opacity:.92;

}

/* =======================================================
   TARJETAS RESUMEN CXC
======================================================= */

.cards-resumen{

    display:flex;

    gap:20px;

    margin:25px 0;

    flex-wrap:wrap;

}

.card-resumen{

    flex:1;

    min-width:220px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:14px;

    color:#fff;

    font-weight:bold;

    box-shadow:0 8px 18px rgba(0,0,0,.25);

}

.card-resumen i{

    font-size:34px;

}

.card-resumen span{

    display:block;

    font-size:14px;

    opacity:.95;

}

.card-resumen h2{

    margin-top:6px;

    font-size:28px;

}

.card-pendiente{

    background:#d4af37;

    color:#14213d;

}

.card-pagada{

    background:#16a34a;

}

.card-saldo{

    background:#2563eb;

}

/*=========================================
ESTADOS CXC
=========================================*/

.estado-ok{

    background:#16a34a;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}

.estado-pendiente{

    background:#d4af37;

    color:#14213d;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}

/*=========================================
BOTON VER CXC
=========================================*/

.estado-info{

    display:inline-block;

    background:#2563eb;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    text-decoration:none;

    text-align:center;

    min-width:60px;

}

.estado-info:hover{

    background:#1d4ed8;

    color:#fff;

}