/* Estilos para el sistema de asientos */

/* Container principal */
.tm-seat-layout-container {
    background-color: #fff;
    margin:0 -10px;
    display: flex;

    div{
        flex:1
    }
}
.tm-seat-layout-container.organizer {
    background-color: #fff;
    margin:0 -10px;
    display: block;

    div{
        flex: none
    }
}
.tm-seat-item.seat.non-interactive.available {
    background: #757575;
    color: #757575;
}
.tm-seat-layout-title {
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

/* Herramientas de edición */
.tm-editor-tools {
    display: flex;
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
}

.tm-editor-tools-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
}

.tm-seat-tools {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tm-seat-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
}

.tm-seat-tool:hover {
    background-color: #f0f0f0;
}

.tm-seat-tool.active {
    background-color: #4c9aff;
    color: white;
    border-color: #3e8ff7;
}

.tm-seat-tool i {
    font-size: 16px;
}

/* Acciones para filas */
.tm-row-actions {
    display: flex;
    gap: 10px;
}

.tm-row-action {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tm-row-action:hover {
    background-color: #f0f0f0;
}

.tm-row-action:first-child {
    background-color: #4caf50;
    color: white;
    border-color: #43a047;
}

.tm-row-action:first-child:hover {
    background-color: #3d8b40;
}

.tm-row-action:last-child {
    background-color: #f44336;
    color: white;
    border-color: #e53935;
}

.tm-row-action:last-child:hover {
    background-color: #d32f2f;
}

/* Selector de pisos */
.tm-floor-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tm-floor-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tm-floor-button:hover {
    background-color: #f0f0f0;
}

.tm-floor-button.active {
    background-color: #4c9aff;
    color: white;
    border-color: #3e8ff7;
}

/* Indicador de guardado */
.tm-seat-save-indicator {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 5px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-left: auto;
}

.tm-seat-save-indicator.success {
    background-color: #e8f5e9;
    border-color: #a5d6a7;
    color: #388e3c;
}

.tm-seat-save-indicator.error {
    background-color: #ffebee;
    border-color: #ef9a9a;
    color: #d32f2f;
}

/* Grid del layout */
.tm-seat-layout-grid {
    background-color: #f8f9fa;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 5px;
    margin-bottom: 5px;
    overflow-x: auto;
}

/* Estilos específicos por tipo de vehículo */
.tm-seat-layout-grid.van {
    max-width: 210px;
}

.tm-seat-layout-grid.bus,
.tm-seat-layout-grid.double_decker {
    max-width: 220px;
}

.tm-seat-row {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    gap:2px
}

.tm-seat-item {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    border: 1px dashed #ccc;
    transition: all 0.2s;
}

/* Estilos por tipo de elemento */
.tm-seat-item.empty {
    background-color: transparent;
    border: 1px dashed #ccc;
    cursor: pointer;
}

.tm-seat-item.empty:hover {
    background-color: rgba(76, 154, 255, 0.1);
    border-color: #4c9aff;
}

.tm-seat-item.aisle {
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
}

/* Asientos normales */
.tm-seat-item.seat {
    background-color: #4caf50; /* Verde por defecto (disponible) */
    color: white;
    border: 1px solid #43a047;
    cursor: pointer;
}

/* Estados del asiento */
.tm-seat-item.seat.available {
    background-color: #4caf50;
    color: white;
}

.tm-seat-item.seat.disabled {
    background-color: #9e9e9e;
    border-color: #757575;
    text-decoration: line-through;
}

.tm-seat-item.seat.selected {
    background-color: #2196f3;
    border-color: #1976d2;
}

.tm-seat-item.seat.reserved {
    background-color: #f44336;
    border-color: #e53935;
    cursor: not-allowed;
}

.tm-seat-item.seat.temporary {
    background-color: #ff9800;
    border-color: #fb8c00;
    cursor: not-allowed;
}

/* Otros elementos */
.tm-seat-item.driver {
    background-color: #673ab7;
    color: white;
    border-color: #5e35b1;
}

.tm-seat-item.wc {
    background-color: #3f51b5;
    color: white;
    border-color: #3949ab;
}

.tm-seat-item.door {
    background-color: #607d8b;
    color: white;
    border-color: #546e7a;
}

.tm-seat-item.stairs {
    background-color: #ff5722; /* Gris azulado */
    color: white;
    border: 1px solid #ff5722
}
.tm-seat-item.stairs svg {
    width: 20px;
}
/* Iconos más grandes */
.tm-seat-item.driver i,
.tm-seat-item.wc i,
.tm-seat-item.door i,
.tm-seat-item.stairs i {
    font-size: 18px; /* Tamaño de icono más grande */
}

.tm-seat-number {
    font-size: 12px;
    font-weight: bold;
}

/* Leyenda */
.tm-seat-legend {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
}
.tm-legend-item i, .tm-legend-item div {
    color: #fff;
    fill: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tm-seat-layout-grid.van + div .wc,
.tm-seat-layout-grid.van + div .door,
.tm-seat-layout-grid.van + div .stairs{
    display: none;
}
 .tm-legend-item svg {
    color: #fff;
    fill: #fff;
    width: 20px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.tm-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.tm-legend-color.seat {
    background-color: #4caf50;
    border: 1px solid #43a047;
}

.tm-legend-color.driver {
    background-color: #673ab7;
    border: 1px solid #5e35b1;
}

.tm-legend-color.wc {
    background-color: #3f51b5;
    border: 1px solid #3949ab;
}

.tm-legend-color.door {
    background-color: #607d8b;
    border: 1px solid #546e7a;
}

.tm-legend-color.stairs {
    background-color: #ff5722;
    border: 1px solid #f4511e;
}

.tm-legend-color.available {
    background-color: #4caf50;
    border: 1px solid #43a047;
}

.tm-legend-color.selected {
    background-color: #2196f3;
    border: 1px solid #1976d2;
}

.tm-legend-color.reserved {
    background-color: #f44336;
    border: 1px solid #e53935;
}

.tm-legend-color.temporary {
    background-color: #ff9800;
    border: 1px solid #fb8c00;
}

.tm-legend-color.disabled {
    background-color: #9e9e9e;
    border: 1px solid #757575;
}

/* Panel de información */
.tm-seat-info-panel {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.tm-seat-selection-info {
    margin-bottom: 10px;
}

.tm-seat-price-total {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 16px;
}

.tm-seat-confirm-button {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.tm-seat-confirm-button:hover {
    background-color: #3d8b40;
}

.tm-seat-confirm-button:disabled {
    background-color: #9e9e9e;
    cursor: not-allowed;
}

/* Ayuda */
.tm-editor-help {
    background-color: #e8f5e9;
    border-radius: 6px;
    padding: 12px;
    font-size: 13px;
    color: #2e7d32;
}

.tm-editor-help p {
    margin: 5px 0;
}

.tm-editor-help i {
    margin-right: 5px;
}

/* Adaptaciones para móviles */
@media (max-width: 768px) {
    .tm-seat-tools {
        justify-content: center;
    }
    
    .tm-row-actions {
        justify-content: center;
    }
    
    .tm-floor-selector {
        justify-content: center;
    }
    
    .tm-seat-legend {
        justify-content: center;
    }
    
    .tm-seat-item {
        width: 34px;
        height: 34px;
    }
    
    .tm-row-action span {
        display: none;
    }
}

/* Elementos no interactivos (fila 0) */
.tm-seat-item.non-interactive {
    cursor: default !important;
    pointer-events: none !important;
    opacity: 0.85;
}

.tm-seat-item.non-interactive:hover {
    background-color: inherit;
    border-color: inherit;
    transform: none;
}

.tm-seat-item.non-interactive::after {
    display: none;
}

.tm-seat-item.empty.non-interactive {
    border-style: solid;
    border-width: 1px;
    border-color: #eaeaea;
    background-color: #f8f9fa;
}