/* Estilos para la sección de selección de sectores */
.sector-selection-container {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    
    /*flex-direction: column; /* ✅ Asegura que los elementos se apilen en columna */
    /*align-items: center; /* ✅ Centra los elementos horizontalmente */
    /*justify-self: center; /* ✅ (Opcional) Centrar verticalmente */
    /*height: auto;*/ 
}

.sector-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.349);
}

.sector-subtitle {
    color: #e0e0e0;
    text-align: center;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

/* Grid para los sectores - SOLUCIÓN FORZADA para 5 en la primera fila y 6 en la segunda */
.sector-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    /* Estas propiedades ayudan al centrado */
    align-items: center;
    justify-content: center;
}

/* Primera fila: 5 elementos */
.sector-grid-row-1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 0.3rem;
}

/* Segunda fila: 6 elementos */
.sector-grid-row-2 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

/* Estilo base para los botones de sector */
.sector-button {
    background-color: #1d201d;
    color: #e8e8e8;
    padding: 0.75rem 0.25rem; /* Reduced padding */
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 6.5rem !important; /* Forzar altura fija */
    min-height: 6.5rem;
    max-height: 6.5rem;
    width: 5rem; /*100% seria Ajustado para ser responsive */
    max-width: 5rem;
    margin: 0 auto;
    overflow: hidden; /* Add this to prevent content overflow */
    box-sizing: border-box; /* Add this to include padding in width/height calculation */
    gap: 0.25rem;
}

.sector-button.available {
    cursor: pointer;
    border-color: rgba(46, 125, 50, 0.3);
}

.sector-button.available:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.3);
    background-color: #232623;
    border-color: rgba(46, 125, 50, 0.5);
}

/* Estado seleccionado para botones disponibles */
.sector-button.selected {
    background-color: #2e7d32;
    border-color: #4CAF50;
    height: 5rem !important; /* Mantener altura al seleccionar */
    transform: translateY(-0.125rem);
    box-shadow: 0 0.625rem 2rem rgba(0, 0, 0, 0.3);
}

.sector-button.unavailable {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(70%);
}

/* Estilo para el icono del sector */
.sector-icon {
    width: 1.5rem; /* Reduced from 1.5rem */
    height: 1.5rem; /* Reduced from 1.5rem */
    object-fit: contain;
    margin-bottom: 0.3rem; /* Reduced from 0.5rem */
    transition: transform 0.2s ease;
    filter: brightness(0) invert(1);
}

.sector-button.available:hover .sector-icon,
.sector-button.selected .sector-icon {
    transform: scale(1.05);
}

/* Estilo para el nombre del sector */
.sector-name {
    font-size: 0.7rem; /* Reduced from 0.7rem */
    font-weight: 500;
    text-align: center;
    margin: 0.1rem 0; /* Reduced from 0.25rem */
    color: #ffffff;
    width: 100%;
    white-space: normal; /* Cambiado de nowrap a normal */
    word-wrap: break-word; /* Añadido para romper palabras largas */
    overflow: visible; /* Cambiado de hidden a visible */
    line-height: 1.1; /* Añadido para mejor espaciado entre líneas */
    padding: 0 0.25rem; /* Añadido padding lateral */
}

/* Estilo para la fecha de creación */
.creation-date {
    font-size: 0.6rem; /* Reduced from 0.7rem */
    color: #aaaaaa;
    margin-top: 0.1rem;
    text-align: center;
    width: 100%;
    white-space: normal; /* Cambiado de nowrap a normal */
    word-wrap: break-word; /* Añadido para romper palabras largas */
    overflow: visible; /* Cambiado de hidden a visible */
    line-height: 1.1; /* Añadido para mejor espaciado entre líneas */
    padding: 0 0.25rem; /* Añadido padding lateral */
}

/* Indicador de disponibilidad */
.availability-indicator {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3);
}

.available-indicator {
    background-color: #00ff0d;
    box-shadow: 0 0 0.35rem rgba(46, 125, 50, 0.5);
}

.unavailable-indicator {
    background-color: #ff0000;
}


/* Estilo para sectores seleccionados - Mayor especificidad y !important para asegurar prioridad */
.sector-button.selected,
.sector-button.available.selected,
.sector-button.available.selected:hover {
    background-color: #2e7d32 !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0.25rem 1rem rgba(46, 125, 50, 0.4) !important;
    color: rgb(0, 0, 0) !important;
}

/* Aseguramos que el texto también tenga buen contraste cuando está seleccionado */
.sector-button.selected .sector-name,
.sector-button.available.selected:hover .sector-name {
    color: rgb(0, 0, 0) !important;
    font-weight: bold !important;
}

.sector-button.selected .creation-date,
.sector-button.available.selected:hover .creation-date {
    color: rgb(0, 0, 0) !important;
}
/* Ajustamos el filtro del icono SVG cuando está seleccionado */
.sector-button.selected .sector-icon,
.sector-button.available.selected:hover .sector-icon {
    filter: brightness(0) !important;
    transform: scale(1.05);
}
/* Animación para los botones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sector-button {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Media queries para responsividad */
@media (max-width: 40rem) {
    .sector-grid-row-1,
    .sector-grid-row-2 {
        gap: 0.5rem;
    }
    
    .sector-button {
        height: 6rem;
        padding: 0.5rem;
        max-width: 6rem;
    }
    
    .sector-icon {
        width: 2rem;
        height: 2rem;
    }
    
    .sector-name {
        font-size: 0.7rem;
    }
}

@media (max-width: 30rem) {
    .sector-grid-row-1 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sector-grid-row-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
    }
    
    .sector-button {
        max-width: 5.5rem;
    }
}

@media (max-width: 20rem) {
    .sector-grid-row-1,
    .sector-grid-row-2 {
        grid-template-columns: 1fr;
    }
}