input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Exclusivo para la "card" de prioridad y personalizar */
/* Aqui ocurre el quiebre de la fila */
@media (max-width: 1199.95px) {

    /* Por alguna razon ocurre antes */
    #priorix {
        width: initial;
    }

    .subjectContainer {
        height: initial;
        overflow: initial;
    }
}

@media (min-width: 1200px) {
    #priorix {
        width: 450px;
    }

    .subjectContainer {
        height: 360px;
        overflow: auto;

    }
}

/* General */
body {
    min-height: 100vh;
    /*
    overflow: hidden;*/
}

hr {
    margin-left: 0;
    margin-right: 0;
}

.card-sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.card-sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.priorix-result {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

header {
    min-height: 56px;
}

.canvas {
        background: none !important; /* Borra el cuadro gris */
        box-shadow: none !important; /* Borra sombras si las hubiera */
        border: none !important;     /* Borra bordes */
        display: inline-block;
        margin: 0 auto;
}

.color-description {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 25px;
}

.non-approved {
    fill: white;
}


#forward svg,
#back svg {
    user-select: none;
}

.sem {
    transition: 0.3s;
}

.toast {
    z-index: -1;
}

@media(hover: hover) {

    g.sem:hover rect {
        fill: #c1c1c1;
    }

    g.year:hover rect.bars {
        fill: #474747;
    }

    .subject:hover .non-approved {
        opacity: 30%;
        fill: #007bff;
    }

    .subject .non-approved {
        transition: 0.3s
    }
}

.bars {
    fill: grey;
    transition: 0.3s;
}

.overlay {
    /*position: fixed; !* Sit on top of the parent content*!
    !* display: none; Hidden by default *!
    width: 100%;  !*Full width (cover the whole page)*!
    min-height: 100vh; !*Full height !*(cover the whole page)*!
    top: 0;
    left: 0;
    filter: opacity(20%);
    z-index: 1;*/
    position: fixed;
    min-height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    -webkit-backdrop-filter: blur(50px) contrast(120%);
    backdrop-filter: blur(50px) contrast(120%);
    background-color: rgba(255, 255, 255, 0.2);
    /* Black background with opacity */
    transition: 0.5s;
}

.overlay-content {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 6;
    /* Disable horizontal scroll */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    overflow-y: auto;
}

.overlay-content h1,
.overlay-content h5 {
    opacity: .6;
}

.sector {
    filter: brightness(100%);
    color: black;
    transition: 0.2s;
}

.sector:hover {
    filter: brightness(85%);
    color: black;

}

sector:hover .text-white {
    filter: brightness(85%);
}

@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {

    .overlay,
    .card-sticky-top,
    .card-sticky-bottom {
        background: rgba(255, 255, 255, 0.95);
    }

    .overlay-content h3,
    .overlay-content h5 {
        opacity: initial;
    }
}
/* Dependency visualization */
/* Nuevo CSS para Requires (Prerrequisitos - Rojo) */
.requires-ramo {
    /* La sombra es el efecto visual clave y es el más independiente del estado */
    filter: drop-shadow(0 0 8px #dc3545); 
    /* Opcional: bajar un poco la opacidad del ramo entero */
    /* opacity: 0.9; */ 
}

/* Opcional: Si necesitas un borde más fuerte, afecta al primer rectángulo (el fondo de categoría) */
.requires-ramo > rect:first-of-type {
    stroke: #dc3545 !important; 
    stroke-width: 3 !important;
}


/* Nuevo CSS para Opens (Desbloquea - Verde) */
.opens-ramo {
    /* La sombra es el efecto visual clave y es el más independiente del estado */
    filter: drop-shadow(0 0 8px #28a745);
    /* Opcional: bajar un poco la opacidad del ramo entero */
    /* opacity: 0.9; */ 
}

/* Opcional: Si necesitas un borde más fuerte, afecta al primer rectángulo (el fondo de categoría) */
.opens-ramo > rect:first-of-type {
    stroke: #28a745 !important; 
    stroke-width: 3 !important;
}

/* Estilos necesarios para el contador de créditos seleccionados */
#credit-counter-container {
    padding: 10px;
    border-radius: 5px;
    background-color: #f0f0f0; /* Fondo normal (gris claro) */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s;
    /* Puedes añadir más estilos de posición o tipografía aquí */
}

/* Estilo para el estado de advertencia (fondo rojo) */
#credit-counter-container.exceeded {
    background-color: #ffcccc; /* Fondo rojo claro */
    color: #cc0000; /* Texto en rojo oscuro */
    border: 2px solid #cc0000;
}

/* Ajustes para la nueva barra horizontal */
.bg-light.border-bottom span {
    font-size: 0.9rem;
}

.malla-stage {
    height: calc(100vh - 150px); /* Ajusta el alto para que quepa el header y la nueva barra */
    overflow: auto;
}

/* Ocultar la sidebar antigua si queda algún residuo */
.malla-sidebar {
    display: none !important;
}

/* Hacer los botones más compactos para que quepan en una línea */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.toolbar-malla {
        position: sticky;
        top: 0;
        z-index: 1020;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    /* Ajuste para que la malla use el resto del alto */
.malla-stage {
        height: auto !important;
        overflow: visible !important;
        background: transparent !important; /* Quita fondos heredados */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra horizontalmente */
}

.malla-container-scroll {
        width: 100%;
        padding: 0;
        overflow: visible !important;
}

.color-description {
        gap: 15px;
        padding: 20px;
        background: rgba(0,0,0,0.03);
        border-radius: 8px;
        margin: 20px;
}

    /* Estilo para los botones en pantallas pequeñas */
@media (max-width: 768px) {
        .toolbar-malla .border-right { border-right: none !important; border-bottom: 1px solid #dee2e6; margin-bottom: 10px; padding-bottom: 10px; }
}

.malla-stage, 
.malla-container-scroll, 
.canvas,
.card {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
}

rect {
    rx: 0 !important;
    ry: 0 !important;
    border-radius: 0 !important;
}