/* per iphones  */
html,
body {
    height: 100%;
    /* Or min-height: 100% */
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    min-height: 100vh;
    /* Ensure body takes at least full viewport height */
    display: flex;
    /* Or flow content normally without flex if not needed */
    flex-direction: column;
    /* If using flexbox */
    padding-bottom: 2em;
    /*touch-action: none;*/
    /* ens asseguram de que funcioni bé el pencil */
    font-family: 'Inter', system-ui, sans-serif;
}


a {
    color: #4F46E5;
}

textarea {
    border-radius: 12px;
}


.bg-body-tertiary {
    --bs-bg-opacity: 1;
    /*background-color: rgba(var(--bs-body-bg), var(--bs-bg-opacity)) !important;*/
    background-color: var(--bs-body-bg) !important;
}

/* en proves */
.scrollable-container {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------
    Captura d'imatge a l'input
*/
/* contenedor de la imatge de la càmara a l'input */
#image-container {
    resize: vertical;
    overflow: hidden;
    min-height: 200px;
    max-height: 80vh;
    border: 2px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    position: relative;
}

/* imatge capturada amb al càmara a l'input */
#captured-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

/* ------------------------------------
Pen per escriure
*/

/* Make canvas fill its parent div */
#pen-canvas {
    width: 99%;
    height: 100%;
    display: block;
    background-color: black;
    cursor: crosshair;
}

/* Resizable container */
#pen-canvasContainer {
    position: relative;
    border: 2px solid #ccc;
    min-height: 200px;
    resize: vertical;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Resize handle styling */
#pen-canvasContainer::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: linear-gradient(-45deg,
            transparent 0%,
            transparent 40%,
            #ccc 40%,
            #ccc 60%,
            transparent 60%);
    cursor: nw-resize;
    pointer-events: none;
}

.exercici li {
    list-style-type: none;
    margin-bottom: 0.5em;
}

/* SVGs  */

/* marges dalt i baix per separar els lis */
li:has(span.math-inline) {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* marge esquerra per separa-lo una mica del número del li
li span.math-inline {
    margin-left: 0.5em;
    }*/

span.math-inline svg {
    margin-top: 0.2em;
    margin-left: 0.5em;
}

p span.math-inline svg {
    margin-top: 0em;
    margin-left: 0em;
}

span.math-display {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* fa que el menú no tardi en desapareixer */
#navbarText {
    transition: none;
}



/* wrapper del textarea perquè s'adapti a l'altura del contingut */
.textarea-wrapper {
    display: grid;
}

.textarea-wrapper::after {
    content: attr(data-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
    grid-area: 1 / 1 / 2 / 2;
    padding: 0.375rem 0.75rem;
    /* mismo padding que form-control */
    font: inherit;
    min-height: 60px;
}

.textarea-wrapper textarea {
    grid-area: 1 / 1 / 2 / 2;
    resize: none;
    overflow: hidden;
    min-height: 60px;
}


/* respostes de la IA */
div.respuesta {
    background-color: var(--bs-gray-800);
    padding: 1em;
    border-radius: 0.50rem;
    margin-bottom: 1em;
    margin-bottom: 1em;
    scroll-margin-top: 100px;
    /* compensa el navbar fixed-top */
}


div.primera_respuesta {
    background-color: var(--bs-gray-800);
    padding: 1em;
    border-radius: 0.50rem;
    margin-bottom: 1em;
    margin-top: 2em;
    scroll-margin-top: 100px;
    /* compensa el navbar fixed-top */
}

div.respuesta>* {
    animation: fadeSlideIn 0.4s ease-out;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* clasificació dels exercicis per dificultat a tema */

/* Opción 1: Badges pill con colores semáforo */
.badge-ejercicio {
    --bs-badge-color: #fff;
    color: var(--bs-badge-color);
    font-size: 0.9rem;
    padding: 0.4em 0.8em;
    margin: 0.2em 0.2em;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.badge-ejercicio:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.badge-outline-success {
    background-color: transparent;
    border: 1.5px solid #198754;
    color: #198754;
}

.badge-outline-warning {
    background-color: transparent;
    border: 1.5px solid #fd7e14;
    color: #fd7e14;
}

.badge-outline-danger {
    background-color: transparent;
    border: 1.5px solid #dc3545;
    color: #dc3545;
}

.completado {
    position: relative;
}

.completado::after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -8px;
    font-size: 0.7rem;
    color: #198754;
}

.bg-nivel-1 {
    background-color: #198754 !important;
}

.bg-nivel-2 {
    background-color: #fd7e14 !important;
}

.bg-nivel-3 {
    background-color: #dc3545 !important;
}