/**
 * Estilos personalizados para el mapa de asientos
 * Orden de prioridad: Bloqueados > Seleccionados > Disponibles > Hover
 * 
 * @package Eventin
 * @since 1.0.0
 */

/* ================================================
   1. ASIENTOS BLOQUEADOS MANUALMENTE (MÁXIMA PRIORIDAD)
   ================================================ */

/* ADMIN: Asientos bloqueados manualmente (reservas de protocolo) - NARANJA */
/* Solo aplicar naranja cuando el usuario es admin (body tiene clase etn-admin-seat-plan) */
body.etn-admin-seat-plan .seats-item.circle[data-manually-blocked="true"],
body.etn-admin-seat-plan .seats-item.circle.manually-blocked,
body.etn-admin-seat-plan .seats-item[data-manually-blocked="true"],
body.etn-admin-seat-plan .seats-item.manually-blocked {
    fill: #ff8c00 !important; /* Naranja oscuro */
    stroke: #ff8c00 !important;
    opacity: 0.8 !important;
}

body.etn-admin-seat-plan .seats-item.circle[data-manually-blocked="true"] svg circle,
body.etn-admin-seat-plan .seats-item.circle.manually-blocked svg circle,
body.etn-admin-seat-plan .seats-item[data-manually-blocked="true"] svg circle,
body.etn-admin-seat-plan .seats-item.manually-blocked svg circle {
    fill: #ff8c00 !important; /* Naranja oscuro */
    stroke: #ff8c00 !important;
    opacity: 0.8 !important;
}

body.etn-admin-seat-plan .seats-item.circle[data-manually-blocked="true"] svg,
body.etn-admin-seat-plan .seats-item.circle.manually-blocked svg,
body.etn-admin-seat-plan .seats-item[data-manually-blocked="true"] svg,
body.etn-admin-seat-plan .seats-item.manually-blocked svg {
    fill: #ff8c00 !important;
    stroke: #ff8c00 !important;
}

/* Selectores con contenedores específicos para ADMIN */
body.etn-admin-seat-plan .tt-seatsmap-wrapper .seats-item.circle[data-manually-blocked="true"] svg circle,
body.etn-admin-seat-plan .tt-seatsmap-wrapper .seats-item.circle.manually-blocked svg circle,
body.etn-admin-seat-plan #etn-seat-plan .seats-item.circle[data-manually-blocked="true"] svg circle,
body.etn-admin-seat-plan #etn-seat-plan .seats-item.circle.manually-blocked svg circle,
body.etn-admin-seat-plan .wrap-seat-plan-form .seats-item.circle[data-manually-blocked="true"] svg circle,
body.etn-admin-seat-plan .wrap-seat-plan-form .seats-item.circle.manually-blocked svg circle {
    fill: #ff8c00 !important; /* Naranja oscuro */
    stroke: #ff8c00 !important;
    opacity: 0.8 !important;
}

body.etn-admin-seat-plan .tt-seatsmap-wrapper .seats-item.circle[data-manually-blocked="true"] svg,
body.etn-admin-seat-plan .tt-seatsmap-wrapper .seats-item.circle.manually-blocked svg,
body.etn-admin-seat-plan #etn-seat-plan .seats-item.circle[data-manually-blocked="true"] svg,
body.etn-admin-seat-plan #etn-seat-plan .seats-item.circle.manually-blocked svg,
body.etn-admin-seat-plan .wrap-seat-plan-form .seats-item.circle[data-manually-blocked="true"] svg,
body.etn-admin-seat-plan .wrap-seat-plan-form .seats-item.circle.manually-blocked svg {
    fill: #ff8c00 !important;
    stroke: #ff8c00 !important;
}

/* Hover para ADMIN - mantener naranja */
body.etn-admin-seat-plan .seats-item.circle[data-manually-blocked="true"]:hover svg circle,
body.etn-admin-seat-plan .seats-item.circle.manually-blocked:hover svg circle,
body.etn-admin-seat-plan .seats-item[data-manually-blocked="true"]:hover svg circle,
body.etn-admin-seat-plan .seats-item.manually-blocked:hover svg circle {
    fill: #ff8c00 !important;
    stroke: #ff8c00 !important;
    opacity: 0.9 !important;
}

/* CLIENTE: Asientos bloqueados manualmente - GRIS (como los bloqueados por venta) */
/* Aplicar gris cuando NO es admin (para que no se note que son reservas de protocolo) */
body:not(.etn-admin-seat-plan) .seats-item.circle[data-manually-blocked="true"] svg circle,
body:not(.etn-admin-seat-plan) .seats-item.circle.manually-blocked svg circle,
body:not(.etn-admin-seat-plan) .seats-item[data-manually-blocked="true"] svg circle,
body:not(.etn-admin-seat-plan) .seats-item.manually-blocked svg circle {
    fill: #6c757d !important; /* Gris - igual que los bloqueados por venta */
    stroke: #6c757d !important;
    opacity: 0.5 !important;
}

body:not(.etn-admin-seat-plan) .tt-seatsmap-wrapper .seats-item.circle[data-manually-blocked="true"] svg circle,
body:not(.etn-admin-seat-plan) .tt-seatsmap-wrapper .seats-item.circle.manually-blocked svg circle,
body:not(.etn-admin-seat-plan) #etn-seat-plan .seats-item.circle[data-manually-blocked="true"] svg circle,
body:not(.etn-admin-seat-plan) #etn-seat-plan .seats-item.circle.manually-blocked svg circle,
body:not(.etn-admin-seat-plan) .wrap-seat-plan-form .seats-item.circle[data-manually-blocked="true"] svg circle,
body:not(.etn-admin-seat-plan) .wrap-seat-plan-form .seats-item.circle.manually-blocked svg circle {
    fill: #6c757d !important; /* Gris */
    stroke: #6c757d !important;
    opacity: 0.5 !important;
}

/* ================================================
   2. ASIENTOS BLOQUEADOS POR VENTA - GRIS
   ================================================ */

/* Bloqueados detectados por SVG con opacity 0.5 y fill gris (NO manualmente bloqueados) */
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="opacity: 0.5"] circle,
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="opacity:0.5"] circle,
.seats-item:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="opacity: 0.5"] circle,
.seats-item:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="opacity:0.5"] circle,
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="cursor: not-allowed"] circle,
.seats-item:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="cursor: not-allowed"] circle,
.seats-item:not([data-manually-blocked="true"]):not(.manually-blocked) svg[style*="192, 192, 192"] circle {
    fill: #6c757d !important; /* Gris */
    stroke: #6c757d !important;
}

/* Bloqueados por venta en hover - mantener gris */
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked):hover svg[style*="opacity: 0.5"] circle,
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked):hover svg[style*="cursor: not-allowed"] circle,
.seats-item.circle:not([data-manually-blocked="true"]):not(.manually-blocked):hover svg[style*="fill: rgb(192, 192, 192)"] circle {
    fill: #6c757d !important;
    stroke: #6c757d !important;
}

/* ================================================
   3. ASIENTOS SELECCIONADOS - BLANCO CON BORDE ROJO Y CHECKMARK
   ================================================ */

/* Seleccionados detectados por scale(1.1) - fondo blanco, borde rojo */
.seats-item.circle[style*="scale(1.1)"] svg circle {
    fill: white !important;
    stroke: #dd3333 !important;
    stroke-width: 9 !important;
}

/* Checkmark (path) siempre visible en seleccionados */
.seats-item.circle[style*="scale(1.1)"] svg path {
    stroke: #dd3333 !important;
    stroke-width: 6 !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
}

/* Seleccionados en hover - mantener blanco (NO cambiar a rojo) */
.seats-item.circle[style*="scale(1.1)"]:hover svg circle {
    fill: #dd3333 !important;
    stroke: #dd3333 !important;
    stroke-width: 2 !important;
}

.seats-item.circle[style*="scale(1.1)"]:hover svg path {
    stroke: #dd3333 !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ================================================
   4. ASIENTOS DISPONIBLES - VERDE (estado normal)
   ================================================ */

/* Disponibles - verde completo (solo si NO están seleccionados ni bloqueados) */
/* IMPORTANTE: Debe excluir explícitamente los asientos bloqueados manualmente */
.seats-item.circle:not([style*="scale(1.1)"]):not([data-manually-blocked="true"]):not(.manually-blocked) svg:not([style*="opacity: 0.5"]):not([style*="opacity:0.5"]):not([style*="cursor: not-allowed"]):not([style*="cursor:not-allowed"]):not([style*="fill: rgb(192, 192, 192)"]) circle {
    fill: rgb(129, 215, 66) !important; /* Verde completo */
    stroke: rgb(129, 215, 66) !important;
}

/* Contenedores adicionales - también excluir bloqueados manualmente */
.tt-seatsmap-wrapper .seats-item.circle:not([style*="scale(1.1)"]):not([data-manually-blocked="true"]):not(.manually-blocked) svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle,
#etn-seat-plan .seats-item.circle:not([style*="scale(1.1)"]):not([data-manually-blocked="true"]):not(.manually-blocked) svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle,
.wrap-seat-plan-form .seats-item.circle:not([style*="scale(1.1)"]):not([data-manually-blocked="true"]):not(.manually-blocked) svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle {
    fill: rgb(129, 215, 66) !important; /* Verde completo */
    stroke: rgb(129, 215, 66) !important;
}

/* ================================================
   5. HOVER - ROJO COMPLETO (sobrescribe disponibles en hover)
   ================================================ */

/* IMPORTANTE: Hover DEBE ir DESPUÉS de los estilos de disponibles para sobrescribirlos correctamente */

/* Hover en disponibles - ROJO COMPLETO (fondo y borde rojos) */
.seats-item.circle:not([style*="scale(1.1)"]):hover svg:not([style*="opacity: 0.5"]):not([style*="opacity:0.5"]):not([style*="cursor: not-allowed"]):not([style*="cursor:not-allowed"]):not([style*="fill: rgb(192, 192, 192)"]) circle {
    fill: #dc3545 !important; /* Rojo - fondo COMPLETO */
    stroke: #dc3545 !important; /* Rojo - borde */
}

/* Hover para contenedores específicos */
.tt-seatsmap-wrapper .seats-item.circle:not([style*="scale(1.1)"]):hover svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle,
#etn-seat-plan .seats-item.circle:not([style*="scale(1.1)"]):hover svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle,
.wrap-seat-plan-form .seats-item.circle:not([style*="scale(1.1)"]):hover svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle {
    fill: #dc3545 !important; /* Rojo - fondo COMPLETO */
    stroke: #dc3545 !important; /* Rojo - borde */
}

/* Selector adicional - detectar círculos verdes en hover y convertirlos a rojo */
.seats-item.circle:not([style*="scale(1.1)"]):hover svg circle[fill="rgb(129, 215, 66)"],
.seats-item.circle:not([style*="scale(1.1)"]):hover svg circle[fill="#81d742"] {
    fill: #dc3545 !important; /* Rojo - fondo COMPLETO */
    stroke: #dc3545 !important; /* Rojo - borde */
}

/* Selector genérico de hover - aplicar a CUALQUIER círculo en hover (excepto seleccionados y bloqueados) */
.seats-item.circle:not([style*="scale(1.1)"]):not([style*="opacity: 0.5"]):hover svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) circle:not([fill="white"]) {
    fill: #dc3545 !important; /* Rojo - fondo COMPLETO */
    stroke: #dc3545 !important; /* Rojo - borde */
}

/* ================================================
   ESTILOS GLOBALES
   ================================================ */

/* Sobrescribir estilo global svg { fill: #1c1c24; } solo para disponibles */
.seats-item.circle:not([style*="scale(1.1)"]) svg:not([style*="opacity: 0.5"]):not([style*="cursor: not-allowed"]) {
    fill: rgb(129, 215, 66) !important;
}

/* Background transparente para el contenedor */
.seats-item.circle {
    background-color: transparent !important;
}

/* ================================================
   ZOOM INICIAL DEL MAPA DE ASIENTOS
   ================================================ */

/* NOTA: El zoom inicial se establece desde JavaScript (front-end.js)
   para permitir que el zoom in/out funcione correctamente.
   Si necesitas cambiar el zoom inicial, modifica el valor en front-end.js */

/* Zoom inicial opcional (sin !important para permitir que el zoom funcione) */
.tt-seatmap-inner {
    transform: scale(0.45);
    transform-origin: top left;
}

/* ================================================
   NOTIFICACIONES DE BLOQUEO DE ASIENTOS
   ================================================ */

.etn-seat-blocking-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    max-width: 350px;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    font-weight: 500;
}

.etn-seat-blocking-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.etn-seat-blocking-notification-success {
    background-color: #4caf50;
    color: white;
    border-left: 4px solid #2e7d32;
}

.etn-seat-blocking-notification-error {
    background-color: #f44336;
    color: white;
    border-left: 4px solid #c62828;
}

.etn-seat-blocking-notification-warning {
    background-color: #ff9800;
    color: white;
    border-left: 4px solid #f57c00;
}

.etn-seat-blocking-notification-info {
    background-color: #2196f3;
    color: white;
    border-left: 4px solid #1565c0;
}

/* ================================================
   6. MODAL DE INFORMACIÓN - VISIBILIDAD REDUCIDA
   ================================================ */

#etn-vr-info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-in;
}

#etn-vr-info-modal.show {
    display: flex !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#etn-vr-info-modal > div {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

#etn-vr-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #999;
    padding: 5px 10px;
    line-height: 1;
    transition: color 0.2s;
}

#etn-vr-modal-close:hover {
    color: #333;
}

#etn-vr-info-modal h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 22px;
    font-weight: 600;
}

#etn-vr-info-modal p {
    color: #666;
    line-height: 1.7;
    margin: 15px 0;
    font-size: 15px;
}

#etn-vr-info-modal p strong {
    color: #333;
    font-weight: 600;
}

#etn-vr-info-modal > div > div {
    margin-top: 25px;
    text-align: right;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#etn-vr-modal-cancel,
#etn-vr-modal-continue {
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
}

#etn-vr-modal-cancel {
    background: #f5f5f5;
    color: #333;
    margin-right: 10px;
}

#etn-vr-modal-cancel:hover {
    background: #e8e8e8;
}

#etn-vr-modal-continue {
    background: #0073aa;
    color: white;
}

#etn-vr-modal-continue:hover {
    background: #005a87;
}