/* Tokens del projecte per a colors recurrents (la paleta Bootstrap/URV viu a custom.css). */
:root {
	--text-strong: #495057;    /* gris fosc de text en xips/badges */
	--chip-bg: #e9ecef;        /* fons gris de xips/badges */
	--border-strong: var(--border-strong);  /* vores fortes (graella del calendari) */
	--urv-accent: #970000;     /* vermell d'èmfasi (xips de rúbrica) */
	--primary-dark: var(--primary-dark);
	--success-dark: var(--success-dark);
	--danger-dark: var(--danger-dark);
	--secondary-dark: var(--secondary-dark);
	--warning-dark: var(--warning-dark);
}

/* corrige el tamaño por defecto de 16px */
html {
	font-size: 12px;
	font-family: "Poppins", Montserrat, "Noto Sans", "Open Sans", Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif, "Font Awesome 5 Free"; 
}
 
body {
	font-family: "Poppins", Montserrat, "Noto Sans", "Open Sans", Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif, "Font Awesome 5 Free";
}


body { 
	font-size: 1em; 
	font-style: normal;
} 

.tab0, tab0 { padding-left: 0.5em; }
.tab1, tab1 { padding-left: 1em; }
.tab2, tab2 { padding-left: 2em; }
.tab3, tab3 { padding-left: 3em; }
.tab4, tab4 { padding-left: 4em; }
.tab5, tab5 { padding-left: 5em; }

footer {
	border-top: 1px solid var(--gray-dark, --gray);
}

table {
	background-color: white;
}

td ul {
	margin-bottom: 0;
}

.th-inner {
	overflow-wrap: break-word;
	white-space: normal !important;
}

/* ESTILO DE LOS BOTONES */
.btn-urv { color: #fff; background-color: var(--urv); background-image: none; }
.btn-urv:not(.disabled):hover { color: #e6e6e6; background-color: var(--urvdark1); background-image: none; }
.btn-outline-urv { color: var(--urv); background-color: #fff; }
.btn-outline-urv:hover { color: #fff; background-color: var(--urv); }

/* Selected pill (ensenyamentPills toggle): filled URV like the active filter buttons. */
.btn-outline-urv.active { color: #fff; background-color: var(--urv); }

/* Teaching badge: grey chip shared by the materia lists and the public TFG list. */
.badge-ensenyament { font-size: 1em; padding: 0.4em 0.7em; background-color: var(--chip-bg); color: var(--text-strong); }

/* Utilitats que substitueixen estils inline repetits (vegeu FRONTEND_REVIEW_PLAN.md §4.1) */
.icon-lg { font-size: 1.5em; }
.icon-info { color: dodgerblue; }
.icon-success { color: limegreen; }
.icon-danger { color: red; }
.max-w-800 { max-width: 800px; }
.alert-float { position: fixed; bottom: 40px; left: 20px; z-index: 1000; }

/* Email-template form: pull the inputs in close to the labels. The label columns
   are sized to the text (~130px) instead of Bootstrap's wide col-sm-2, and the
   adjacent field column grows to fill the rest, so each input starts right after
   its label. sm breakpoint up; stacks normally on xs. */
@media (min-width: 576px) {
    #emailTemplateForm > .row > .col-sm-2:first-child,
    #emailTemplateForm > .row > .col-form-label.col-sm-2:first-child {
        flex: 0 0 130px;
        max-width: 130px;
    }
    #emailTemplateForm > .row > .col-sm-2:first-child + .col-sm-10 {
        flex: 0 0 calc(100% - 130px);
        max-width: calc(100% - 130px);
    }
}

/* Email-template "Activat" checkbox (Bootstrap 4): scale the native control up so
   its on/off state reads clearly. Flex row so the help text sits after it; the
   input is laid out statically (not the BS4 absolute default) to align inline. */
#emailTemplateForm .activat-toggle { padding-left: 0; }
#emailTemplateForm .activat-toggle .form-check-input {
    position: static;
    margin-left: 0.5rem;
    margin-top: 0;
    transform: scale(1.8);
    transform-origin: left center;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Email-template list (/coord/emails) badges. Outline style: white background,
   a colored 2px border and matching colored font (per-badge color set inline by
   coordEmailList.js). Larger than a default Bootstrap badge for readability.
   --------------------------------------------------------------------------- */
.email-badge {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.35em 0.7em;
    border-radius: 0.35rem;
    background-color: #fff;
    border: 2px solid var(--text-strong);
    color: var(--text-strong);
    white-space: nowrap;
}

.btn-primary { color: #fff; background-color: var(--primary); background-image: none; }
.btn-primary:not(.disabled):hover { color: #e6e6e6; background-color: var(--primary-dark); background-image: none; }
.btn-outline-primary { color: var(--primary); background-color: #fff; }
.btn-outline-primary:hover { color: #fff; background-color: var(--primary); }

.btn-success { color: #fff; background-color: var(--success); background-image: none; }
.btn-success:not(.disabled):hover { color: #e6e6e6; background-color: var(--success-dark); background-image: none; }
.btn-outline-success { color: var(--success); background-color: #fff; }
.btn-outline-success:hover { color: #fff; background-color: var(--success); }

.btn-danger { color: #fff; background-color: var(--danger); background-image: none; }
.btn-danger:not(.disabled):hover { color: #e6e6e6; background-color: var(--danger-dark); background-image: none; }
.btn-outline-danger { color: var(--danger); background-color: #fff; }
.btn-outline-danger:hover { color: #fff; background-color: var(--danger); }

.btn-secondary { color: #fff; background-color: var(--secondary); background-image: none; }
.btn-secondary:not(.disabled):hover { color: #e6e6e6; background-color: var(--secondary-dark); background-image: none; }
.btn-outline-secondary { color: var(--secondary); background-color: #fff; }
.btn-outline-secondary:hover { color: #fff; background-color: var(--secondary); }

.btn-warning { color: #fff; background-color: var(--warning); background-image: none; }
.btn-warning:not(.disabled):hover { color: #e6e6e6; background-color: var(--warning-dark); background-image: none; }
.btn-outline-warning { color: var(--warning); background-color: #fff; }
.btn-outline-warning:hover { color: #fff; background-color: var(--warning); }

.btn-outline-success.disabled { color: #fff; background-color: var(--success); }
.btn-outline-warning.disabled {	color: #fff; background-color: var(--warning); }
.btn-outline-danger.disabled { color: #fff; background-color: var(--danger); }
.btn-outline-primary.disabled { color: #fff; background-color: var(--primary); }
.btn-outline-secondary.disabled { color: #fff; background-color: var(--secondary); }
.btn-outline-urv.disabled { color: #fff; background-color: var(--urv); }

.go-back-btn:not(.btn) { margin-left: -3em; font-size: 1.25em; color: var(--secondary)}
.go-back-btn:not(btn):hover { color: var(--urv) }

.btn-outline-success.validate-btn {
	color: #fff;
	background-color: var(--success);
}

.btn-outline-success.validate-btn:hover {
	color: var(--success);
	background-color: #fff;
}

a.disabled, a[disabled] {
	border-radius: 100em;
}

a.padding-red {
	padding-left: 0.45em;
	padding-right: 0.45em;
}

.pagination-detail {
	display: none;
}

.fixed-table-loading {
	align-items: start !important;
}

.loading-wrap {
	margin-top: 1em;
}

.animation-wrap {
	display: none !important;
}

.table-row-error {
	background-color: rgba(239, 225, 2, 0.34) !important;
}
.table-row-error:hover {
	background-color: rgba(239, 225, 2, 0.52) !important;
}

.dropdown-menu.table-dropdown {
	display: none;
	position: absolute;
	width: 16em;
	left: revert;
}

.table-dropdown input[type="checkbox"] {
	accent-color: var(--urv);
}

/* ESTILO URV EN RADIO Y CHECKBOX */
input[type='radio'] {
	accent-color: var(--urv);
}

.checkbox-container {
	display: flex;
	align-items: center;
}

.checkbox-container input[type="checkbox"] {
	width: 1.5em;
	height: 1.5em;
	accent-color: var(--urv);
	margin-right: 1.25em;
}

.checkbox-container label {
	margin: 0;
}

.click-pointer {
	cursor: pointer;
}

label {
	display: flex;
	align-items: center;
}

label span {
	margin-left: 0.7em;
}

.no-wrap {
	white-space: nowrap;
}

.custom-alert-success {
	background-color: #1f993a; /* Cambia el color de fondo */
	color: #ffffff;           /* Cambia el color del texto */
}

.custom-alert-danger {
	background-color: #b21f2d; /* Cambia el color de fondo */
	color: #ffffff;            /* Cambia el color del texto */
}

.alert li {
	font-weight: 600;
	font-size: small;
}

.select2-container .select2-results__option--highlighted {
	background-color: var(--urv) !important; /* Cambia el color al corporativo */
	color: white !important; /* Cambia el color del texto a blanco para mejor contraste */
}

.select2-results li:empty {
	height: 2em;
}

.alert button.close {
	color: white;
}

button.close, button.close :hover {
	opacity: 100%;
}

button.close p { transform: scale(1.5); }

.sticky {
	position: fixed;
	top: 4em;
	width: 30%;
	z-index: 1000;
	right: 35%;
}

.urv-section label {
	font-weight: 500;
	color: var(--black);
}

.urv-section .col-sm-2 {
	align-content: center;
}

.urv-section {
	margin-top: 2.5em;
	border-top: 3px solid var(--urv);
	background: var(--light);
	border-radius: .25rem;
	padding: 1rem;
}

.row.section-header {
	margin-top: -2.85em;
}

.row.section-header h4 {
	display: inline-flex;
	padding-right: 0.3em;
}

.section-header h4 {
	color: var(--urv);
	background-color: white;
	margin-left: 1.5em;
	padding-left: 0.25em;
}

.border-urv {
	border: 2px solid var(--urv);
}

.table-toolbar h5 {
	margin-top: 1em;
}

td ul {
	padding-left: 10%;
}

.min-cell-width {
	width: 4em;
}

.tab-menu > a {
	min-width: 10em;
}

.input-error {
	border-color: red;
	background-color: #ffe6e6;
}

/* Oculta la flecha de desplegable en los selects deshabilitados */
select[disabled] + .select2-container--default .select2-selection--single .select2-selection__arrow {
	display: none;
}

/* COLORES DE FONDOS PARA LAS REVISIONES */
.bg-added { background-color: rgba(68, 223, 15, 0.4); }
.bg-deleted { background-color: rgba(255, 34, 0, 0.3); }
.bg-modified { background-color: rgba(255, 204, 22, 0.5); }

.btn-rev-nav {
	border-radius: 2em;
	width: 2.5em;
	height: 2.5em;
}

#goUpButton {
	position: fixed;
	bottom: -1em;
	left: 50%;
	border-radius: 50%;
	transform: translateX(-50%);
	width: 6em;
	height: 6em;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Fondo negro con opacidad */
	z-index: 999; /* Nos aseguramos de que está por encima del contenido */
	display: none; /* Oculto por defecto */
}

.required::after {
   content: "*";
   color: var(--urv);
}


 /***PARA EL TRIANGULO A LA DERECHA DEL BC --> clip-path: polygon(0% 0%, 100% 50%, 100% 100%);*/

.breadcrumb {
	background-color: white;
	font-size: 1.25em;
	margin: 1.25em 0 1em 0;
	padding: 0;
}

.breadcrumb-item a, .breadcrumb-item.active {
}

.breadcrumb-item.active {
}

.breadcrumb-item+.breadcrumb-item::before {
	padding-right: 0.75em;
	color: black;
	content: ">";
	padding-left: 0.25em;
}

/*
	ESTILOS PARA EL CALENDARIO SEMANAL CON LOS HORARIOS DE ASSIGNATURAS/PROFESORES
 */

.calendar {
	display: flex;
	flex-direction: row;
	width: 100%;
	border: 2px solid var(--border-strong);
	border-right: none;
}
.time-column {
	width: 7em;
	border-right: 2px solid var(--border-strong);
}
.hour, .column-cell {
	border-bottom: 1px solid #ccc;
	text-align: center;
	align-content: center;
	background-color: white;
}
.time-column > .hour:first-child {
	border-bottom: 2px solid var(--border-strong);
}
.day-column {
	flex: 1;
	position: relative;
	border-right: 2px solid var(--border-strong);
	display: flex;
	flex-direction: column;
}

.day-column > .column-cell:first-child {
	border-bottom: 2px solid var(--border-strong);
}
.day-column > .column-cell:last-child {
	border-bottom: none;
}
.grup-cell {
	position: absolute;
	padding: 5px;
	box-sizing: border-box;
	text-align: center;
	align-content: center;
	overflow: hidden;
}
.grup-cell:hover, .discarted-grup-cell:hover {
	filter: brightness(0.8);
}
.grup-content {
	display: block;
	font-weight: bold;
	text-align: center;
	align-content: center;
}
.grup-content span {
	display: block;
	font-weight: bold;
}
.grup-content span:nth-child(2) {
	font-size: 0.9em;
}
.grup-content span:nth-child(3) {
	font-weight: normal;
	font-size: 0.7em;
	margin-top: 0.8em;
}

.grup-checkbox {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.5em;
	height: 1.5em;
	align-content: center;
	justify-content: center;
	color: white;
}

.discarted-grups {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 2px solid var(--border-strong);
	background-color: white;
	margin-bottom: 2em;
}

.discarted-grups-title {
	border-bottom: 2px solid var(--border-strong);
	text-align: center;
	color: var(--urv);
	margin-bottom: 0;
	padding: 0.5em 0 0.5em 0;
}

.discarted-grup-row {
	position: relative;
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #ccc;
	gap: 0.5%;
}

.discarted-grup-cell {
	position: absolute;
	height: inherit;
	text-align: center;
	align-content: center;
	margin-top: 0;
	width: 16.67%;
	font-weight: bold;
	padding: 5px;
	overflow: hidden;
	border: 2px solid white;
}

.cell-check-urv::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f058"; /* Código Unicode para el icono "user" de Font Awesome */
	color: var(--urv);
	position: absolute;
	top: 0;
	left: 0;
	margin: 0.25em;
}


/* JORDI */
.section-urv {
    margin-bottom: 40px;
}

/* Mida de lletra més gran per als ensenyaments (badges) de la taula de coordinadors */
#taulaCoordinador .badge {
    font-size: 1.15em;
    padding: 0.4em 0.6em;
}