.coach-planner-event-create-container, .gerente-planner-event-create-container, .kam-planner-event-create-container, .orsy-planner-event-create-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
	height: 30px;
}

@media (max-width: 900px) {
	.coach-planner-event-create-container, .gerente-planner-event-create-container, .kam-planner-event-create-container, .orsy-planner-event-create-container {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto;
		height: auto;
	}
}

#fk_vendedor_calendar + .select2-container, #fk_coach_calendar + .select2-container, #tipo_evento + .select2-container {
    width: 300px !important; /* O el ancho deseado */
}

#fk_vendedor + .select2-container {
    width: 300px !important; /* O el ancho deseado */
}

.coach-planner-eventype-container, .coach-planner-vendedor-container, .kam-planner-eventype-container, .kam-planner-vendedor-container, .orsy-planner-eventype-container, .orsy-planner-vendedor-container, .gerente-planner-eventype-container, .gerente-planner-coach-container {
    height: 30px;
}

.coach-planner-main-container, .kam-planner-main-container, .orsy-planner-main-container, .gerente-planner-main-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-gap: 20px;
}

p.coach-planner-title, p.kam-planner-title, p.orsy-planner-title, p.gerente-planner-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.calendar-acompanamiento-container {
    padding: 8px;
    background: var(--bs-orange);
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-homework-container {
    padding: 8px;
    background: var(--bs-pink);
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-s121-container {
    padding: 8px;
    background: var(--bs-blue);
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-reunion-container {
    padding: 8px;
    // background: var(--bs-yellow);
    background: yellow;
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-homeoffice-container {
    padding: 8px;
    // background: var(--bs-pink);
    background: pink;
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-incapacidad-container {
    padding: 8px;
    background: #FF6961;
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
	color: black;
}

.calendar-acompanamiento-container.gestionado {
    background: var(--verde-wurth);
	color: black;
}

.calendar-s121-container.gestionado {
    background: var(--verde-wurth);
	color: black;
	border: 3px solid black;
}

.calendar-acompanamiento-container.futuro {
    background: var(--verde-wurth-tx);
	color: black;
}

.calendar-s121-container.futuro {
    background: var(--verde-wurth-tx);
	color: black;
	border: 3px solid black;
}

.calendar-acompanamiento-container.cancelado {
	background: var(--gris-wurth-tx);
}

.calendar-s121-container.cancelado {
	background: var(--gris-wurth-tx);
	border: 3px solid black;
}

.calendar-acompanamiento-container.cancelado::before, .calendar-s121-container.cancelado::before {
	content: "X";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5rem;
	color: rgba(255, 0, 0, 0.5); /* Rojo suave para eventos cancelados */
	font-weight: bold;
	pointer-events: none;
	z-index: 0;
}

.calendar-acompanamiento-container.fallido {
    background: var(--rojo-wurth);
	color: white;
}

.calendar-s121-container.fallido {
    background: var(--rojo-wurth);
	color: white;
	border: 3px solid black;
}

.calendar-zona-container {
    padding: 8px;
    background: #7B68EE; /* Azul medio-violeta — visible y distinto del acompañamiento */
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
    color: white;
}

.calendar-zonavacante-container {
    padding: 8px;
    background: #20B2AA; /* Teal — distinguible de zona y acompañamiento */
    border-radius: 3px;
    overflow: hidden;
    width: -webkit-fill-available;
    color: white;
}

.calendar-zona-container.gestionado,
.calendar-zonavacante-container.gestionado {
    background: var(--verde-wurth);
    color: black;
}

.calendar-zona-container.futuro,
.calendar-zonavacante-container.futuro {
    background: var(--verde-wurth-tx);
    color: black;
}

.calendar-zona-container.cancelado,
.calendar-zonavacante-container.cancelado {
    background: var(--gris-wurth-tx);
}

.calendar-zona-container.cancelado::before,
.calendar-zonavacante-container.cancelado::before {
    content: "X";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    color: rgba(255, 0, 0, 0.5);
    font-weight: bold;
    pointer-events: none;
    z-index: 0;
}

.calendar-zona-container.fallido,
.calendar-zonavacante-container.fallido {
    background: var(--rojo-wurth);
    color: white;
}

.calendar-s121-container, .calendar-acompanamiento-container, .calendar-incapacidad-container, .calendar-reunion-container, .calendar-homeoffice-container, .calendar-zona-container, .calendar-zonavacante-container {
	height: 95px;
}

.calendar-zona-pendiente-vendedor {
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.85;
}

.calendar-acompanamiento-header-container, .calendar-s121-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

i.calendar-acompanamiento-follow.fa.fa-tasks, i.calendar-acompanamiento-delete-container.fa.fa-ban, i.calendar-acompanamiento-follow.fa.fa-eye, i.calendar-s121-follow.fa.fa-tasks, i.calendar-s121-delete-container.fa.fa-ban, i.calendar-s121-follow.fa.fa-eye {
    background: black;
    padding: 3px;
    color: white;
    border-radius: 3px;
}

.calendar-acompanamiento-icons-container, .calendar-s121-icons-container {
    display: flex;
    justify-content: space-between;
}

.tabs-evaluation-form-container {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: auto;
    font-size: 14px;
	padding: 5px 10px;
}

.tabs-evaluation-form-container ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.tabs-evaluation-form-container ul li {
    cursor: pointer;
    border: 1px solid #ccc;
    border-bottom: none;
    background: var(--rojo-wurth-tx);
    margin-right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    color: var(--gris-wurth);
    padding: 5px 10px;
}

.tabs-evaluation-form-container ul li.active {
    background: var(--rojo-wurth);
    font-weight: bold;
    color: white;
}

.evaluation-form-tab-content.active {
    display: block;
    font-size: 1vw;
}

div#compromisos.active {
    display: block;
}

.evaluation-form-tab-title-container {
    margin: 10px;
    font-size: 20px;
    font-weight: bold;
    color: var(--rojo-wurth);
}

.form-datos-header-container, .form-datos-daily-container, .form-datos-average-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/*
    Valores centrados en la grilla dia/promedio del motor generico de
    evaluaciones, para que queden alineados con los titulos de sus columnas.
    Va acotado a .form-datos-resultados-wrapper -- contenedor que solo crea
    evaluation_form_render.js.php -- porque los campos comparten clases con el
    formulario viejo y esta regla no debe cambiarle la apariencia a produccion.
*/
.form-datos-resultados-wrapper input {
    text-align: center;
}

.form-datos-header-container {
    background: var(--rojo-wurth);
    padding: 10px;
    color: white;
    font-weight: bold;
}

div#evaluation_form_tab_detail_resultados {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.form-datos-line-criteria-container {
    display: grid;
    grid-template-columns: 70% 30%;
    border: 1px solid rgb(200, 200, 200);
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

.form-datos-line-criteria-sentence-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.evaluation-form-tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    height: 100%;
    overflow: hidden;
}

ul#evaluation_form_tabs {
    overflow-x: auto;
}

.form-datos-line-criteria-qualify-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

input.form-datos-line-criteria-qualify {
    border: 1px solid var(--rojo-wurth-tx);
    text-align: center;
    width: 100px;
}

/* Motor generico de evaluaciones. Va acotado a .motor-evaluacion porque estos
contenedores los comparte el formulario legado, que quedo afinado con el modelo
de caja de abajo tal como esta -- aqui se corrige solo para el motor nuevo.

Sin border-box, cada 'height: 100%' de la cadena (tab-content, detail-container)
SUMA su padding y su borde por encima del 100%, y esos ~64px acumulados quedan
por debajo del area visible: es lo que se tragaba el semaforo. */
.motor-evaluacion .evaluation-form-tab-content,
.motor-evaluacion .evaluation-form-tab-detail-container,
.motor-evaluacion .evaluation-form-tab-detail {
    box-sizing: border-box;
}

/* Radios de escala_1_10 (Evaluacion general). Son items de una rejilla de 20
columnas, asi que por defecto se ESTIRAN a lo ancho y alto de su celda (~56px) y
el navegador agranda el circulo para llenarla; encima el tema le aplica
transform: scale(1.25). Se les fija tamano y se los pega al inicio de su celda,
que es donde queda el numero que les corresponde. */
.motor-evaluacion .radio-evalua-general input[type="radio"] {
    width: 16px;
    height: 16px;
    justify-self: start;
    align-self: center;
    transform: none;
    margin: 0 0 0 4px;
}

/* Secciones con semaforo (escala_1_5/escala_1_10): las preguntas quedan en su
propio bloque con scroll y el semaforo fuera de el, para que no se esconda al
bajar -- ver pintarCamposFormularioEvaluacion() en evaluation_form_render.js.php. */
.motor-evaluacion .evaluation-form-tab-detail.con-termometro {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* 'flex: 0 1 auto' (no crecer, si encoger): con pocos criterios el bloque mide
lo que mide su contenido y el semaforo queda justo debajo, sin un hueco blanco;
con muchos, encoge al espacio disponible y saca su propio scroll, dejando el
semaforo siempre visible. Con 'flex: 1 1 auto' crecia siempre y separaba el
semaforo del contenido en secciones de una sola fila (ej. Evaluacion general). */
.motor-evaluacion .evaluation-form-tab-detail.con-termometro .evaluation-form-tab-criterios-scroll {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.motor-evaluacion .evaluation-form-tab-detail.con-termometro .evaluation-form-tab-termometer-container {
    flex: 0 0 auto;
    margin-top: 10px;
}

.evaluation-form-tab-termometer-container {
    height: 20px;
    background: linear-gradient(to right, red, yellow, green);
    position: relative;
    border-radius: 10px;
    margin: 10px 300px 0px 300px;
}

.evaluation-form-tab-termometer-indicador {
	width: 10px;
	height: 30px;
	background: black;
	position: absolute;
	top: -5px;
	border-radius: 5px;
	transition: left 0.3s ease-in-out;
}

.evaluation-form-tab-content:not(#compromisos) .evaluation-form-tab-detail-container {
    height: 100%;
    overflow: auto;
}

.evaluation-form-tab-data-content {
    display: grid;
    grid-template-rows: 1fr 40px;
    height: 100%;
    grid-gap: 10px;
}

p.evaluation-form-tab-termometer-nota {
    text-align: center;
}

.evaluation-form-tab-detail .evaluation-container {
    display: grid;
    grid-template-columns: 10% 80% 10%;
}

.evaluation-form-tab-detail  .radio-evalua-general {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
}

.evaluacion-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    height: calc(100% - 40px);
}

.line-objetivo {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-gap: 10px;
}

.evaluation-form-tab-detail-container {
    height: 100%;
}

div#evaluation_form_tab_detail_compromisos {
    height: 100%;
}

div#compromisos .campo {
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: clamp(12px, 1vw, 20px);
}
	
div#evaluation_form_tab_contents {
    width: calc(100% - 20px);
    height: calc(100% - 10px);
    /* border: 1px solid blue; */
    overflow: auto;
}

.campo-general {
    padding: 5px;
    display: grid;
    grid-template-columns: 35% 65%;
}

.campo-general > label {
	font-weight: bold;
}

input#fecha_evaluacion {
    width: fit-content;
}

.campo-general[dato="fecha_evaluacion"]{
    margin-top: 20px;
}

.seller-followup-sign-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px dotted;
    padding: 10px;
}

.firma_coach-firma-container, .firma_gerente-firma-container, .firma_kam-firma-container, .firma_orsy-firma-container, .firma_seller-firma-container, .firma_ingeniero-firma-container {
    display: grid;
    grid-template-rows: 20% 80%;
    grid-gap: 10px;
}

.firma_coach-firma-detail-container, .firma_gerente-firma-detail-container, .firma_kam-firma-detail-container, .firma_orsy-firma-detail-container, .firma_seller-firma-detail-container, .firma_ingeniero-firma-detail-container {
    display: grid;
    grid-template-columns: 20% 80%;
}

div#preview_firma_coach, div#preview_firma_gerente, div#preview_firma_kam, div#preview_firma_orsy, div#preview_firma_seller, div#preview_firma_gerente, div#preview_firma_ingeniero {
    height: 100%;
    border-bottom: 1px solid;
}

.evaluation-form-tab-detail-container {
    height: 100%;
    overflow: auto;
    border: 1px solid rgb(200, 200, 200);
    padding: 10px;
    border-radius: 5px;
}

div#compromisos {
    display: grid;
    grid-template-rows: 15% 85%;
	display: none;
}

.seller-followup-sign-container .upload-images-sign-container {
    width: 60vw;
    height: 40vh;
    max-width: 650px;
    max-height: 400px;
}

/* Antes era una lista de ids fijos (uno por cada firma_<rol> que armaba la
   pantalla vieja); se cambia por la clase 'signature-pad' -- crearFirma()
   (innovad.js.php) se la pone a todo canvas que crea sin importar el id, asi
   que cubre tanto estos ids historicos como cualquier idFirma nuevo del
   motor generico de evaluaciones (firma_evaluador, firma_evaluado, etc.). */
canvas.signature-pad {
    border: 1px solid var(--rojo-wurth);
    border-radius: 10px;
}

.coach-planner-event-campo[dato="tipo_evento"], .kam-planner-event-campo[dato="tipo_evento"], .orsy-planner-event-campo[dato="tipo_evento"], .gerente-planner-event-campo[dato="tipo_evento"] {
    display: grid;
    grid-template-columns: auto auto;
}

.coach-planner-event-campo[dato="fk_vendedor"], .kam-planner-event-campo[dato="fk_vendedor"], .orsy-planner-event-campo[dato="fk_vendedor"], .gerente-planner-event-campo[dato="fk_coach"] {
    display: grid;
    grid-template-columns: auto auto;
}

.coach-planner-event-campo[dato="fecha_inicio"], .kam-planner-event-campo[dato="fecha_inicio"], .orsy-planner-event-campo[dato="fecha_inicio"], .gerente-planner-event-campo[dato="fecha_inicio"] {
    display: grid;
    grid-template-columns: auto auto;
}

.coach-planner-event-campo[dato="fecha_fin"], .kam-planner-event-campo[dato="fecha_fin"], .orsy-planner-event-campo[dato="fecha_fin"], .gerente-planner-event-campo[dato="fecha_fin"] {
    display: grid;
    grid-template-columns: auto auto;
}

input#fecha_inicio, input#fecha_fin {
    height: 30px;
}

.evaluation-form-tab-item.deshabilitada {
    background: var(--gris-wurth-tx);
    cursor: not-allowed;
}

.coach-planner-event-button-container, .kam-planner-event-button-container, .orsy-planner-event-button-container, .gerente-planner-event-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-evalua-general > label {
	display: flex;
    justify-content: flex-end;
}

// .evaluation-form-tab-termometer-nota {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // position: relative;
    // width: 100%;
// }

.evaluation-form-tab-termometer-nota::before {
    content: "Muy Bajo";
    font-size: 20px;
    color: red;
    position: absolute;
    left: -100px; /* Más a la izquierda */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
	font-weight: bold;
}

.evaluation-form-tab-termometer-nota::after {
    content: "Elevado";
    font-size: 20px;
    color: green;
    position: absolute;
    right: -80px; /* Más a la derecha */
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
	font-weight: bold;
}

input#visitas_dia, input#pedidos_dia, input#lineas_dia, input#ref_dia, input#cn_dia, input#cr_dia, input#venta_dia, input#recaudo_dia {
    width: 100px;
    border: 1px solid var(--rojo-wurth-tx);
	margin: 5px;
}

input#visitas_prom, input#pedidos_prom, input#lineas_prom, input#ref_prom, input#cn_prom, input#cr_prom, input#venta_prom, input#recaudo_prom {
    width: 100px;
    border: 1px solid rgb(200, 200, 200);
	margin: 5px;
}

.event-requirements-li-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
}

.evaluation-form-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.evaluation-form-main-container {
    width: 90vw;
    height: 70vh;
    overflow: auto;
    margin: 0px;
}

textarea.calendar-acompanamiento-cancel-comment {
    width: 100%;
}

.gerente-planner-event-check-acompanante {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.gerente-planner-event-check-coach-container, .gerente-planner-event-check-vendedor-container, .gerente-planner-event-check-solo-mios-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

input.gerente-planner-event-check-coach-radio, input.gerente-planner-event-check-vendedor-radio, input.gerente-planner-event-check-solo-mios {
    margin: 0px 5px;
}

.current-user-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
}

div#previewContent {
    width: 60vw;
}

.campana-wrapper {
	position: relative;
	display: inline-block;
}

.badge-notificacion {
	position: absolute;
	top: -4px;
	right: -4px;
	background-color: red;
	color: white;
	font-size: 0.65vw; /* o 10px */
	padding: 2px 6px;
	border-radius: 50%;
	min-width: 16px;
	text-align: center;
	line-height: 1;
	display: inline-block;
}

.icon-estandar {
    padding: 9px;
    border: 0.1px solid var(--rojo-wurth);
    border-radius: 5px;
    font-size: 1vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

i.fa.fa-star {
    position: absolute;
    top: 5px;
    right: -170px;
}

.calendar-acompanamiento-follow-container {
    position: relative;
}

.calendar-acompanamiento-container.calendar-other-user {
    opacity: 0.5;
    border-left: 5px solid #555; /* línea lateral gris oscuro */
}

.event-requirements-objetivo-container {
    padding: 10px;
    display: flex;
    justify-content: center;
}

label.event-requirements-objetivo-label {
    padding: 5px;
    font-weight: bold;
}

textarea#event_requirements_objetivo {
    border-radius: 5px;
    padding: 5px;
}

// .s121 {
    // width: 80% !important;
// }

.s121-introduccion-items-container {
    padding: 10px;
}

.s121-introduccion-items-introduccion-container, .s121-introduccion-items-top-container, .s121-introduccion-items-flop-container {
    padding: 10px;
}

textarea#introduccion, textarea#top, textarea#flop {
    width: 100%;
}

span.s121-introduccion-items-introduccion-label, span.s121-introduccion-items-top-label, span.s121-introduccion-items-flop-label {
    font-weight: bold;
}

.fila-incumplida {
    background: var(--rojo-wurth-tx) !Important;
}

.compromiso-para-cumplir {
    border: 2px solid var(--verde-wurth) !Important;
    border-radius: 5px !Important;
}

.compromiso-para-incumplir {
    border: 2px solid var(--rojo-wurth) !Important;
    border-radius: 5px !Important;
}


/*
    Las clases 'seleccion-compromiso-*' son las genericas del motor nuevo de
    evaluaciones (evaluation_form_render.js.php). Se suman a las listas de
    selectores existentes en vez de duplicar las declaraciones: alla hay una
    variante por elemento (kpis/societe/product) porque el formulario viejo
    escribe una seccion por cada uno, mientras que el motor nuevo usa una sola
    implementacion generica para los tres.
*/
.s121-kpis-add-item-container, .s121-societe-add-item-container, .s121-product-add-item-container,
.seleccion-compromiso-add-container {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgb(220,220,220);
}

p.s121-kpis-items-desc, p.s121-societe-items-desc, p.s121-product-items-desc,
p.seleccion-compromiso-desc {
    text-align: center;
}

.s121-kpis-add-item-container, .s121-societe-add-item-container, .s121-product-add-item-container,
.seleccion-compromiso-add-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#fk_kpi + .select2-container, #fk_societe + .select2-container, #fk_product + .select2-container,
.campo-seleccion-compromiso + .select2-container {
    width: 400px !important; /* O el ancho deseado */
}

.s121-kpis-search-container, .s121-societe-search-container, .s121-product-search-container,
.seleccion-compromiso-search-container {
    height: 30px;
}

.s121-kpis-result-container, .s121-societe-result-container, .s121-product-result-container,
.seleccion-compromiso-result-container {
    width: 300px;
    border: 1px solid rgb(220,220,220);
    border-radius: 10px;
    padding: 10px 20px;
    margin: 8px;
}

.s121-kpis-list-items-container, .s121-societe-list-items-container, .s121-product-list-items-container,
.seleccion-compromiso-list-container {
    padding: 10px;
    border: 1px solid rgb(220,220,220);
    margin-top: 10px;
    border-radius: 10px;
}

.s121-kpis-result-table th, .s121-societe-result-table th, .s121-product-result-table th,
.seleccion-compromiso-preview-table th {
	text-align: center;
}

i#add_kpi, i#add_societe, i#add_product,
i.seleccion-compromiso-add-boton {
    font-size: 1.5em;
}

.s121-kpis-compromise-table tr, .s121-societe-compromise-table tr, .s121-product-compromise-table tr,
.seleccion-compromiso-table tr {
	text-align: center;
}

/*
    'table-layout: fixed' es lo que hace que las columnas respeten los anchos
    declarados en el encabezado (40/45/15). Con el valor por defecto (auto) esos
    anchos son solo una sugerencia y el navegador redimensiona segun el
    contenido, dejando las filas comprimidas a la izquierda y desalineadas
    respecto del encabezado.
*/
.seleccion-compromiso-table {
    width: 100%;
    table-layout: fixed;
}

/*
    Campos de la tabla de compromisos del motor nuevo. Equivale a la lista de
    ids fijos (kpi1_criterio, societe2_compromiso, ...) que usa el formulario
    viejo: alla los campos existen de antemano con id numerado, aca las filas se
    crean dinamicamente y se identifican por 'data-code'.
*/
.seleccion-compromiso-table textarea,
.seleccion-compromiso-table input {
    width: 90%;
    border-radius: 10px;
}

/*
    El elemento y su icono de borrar comparten celda: se le deja menos ancho al
    campo para que el icono quepa a su lado y no salte a la linea siguiente.
*/
.seleccion-compromiso-table input.seleccion-compromiso-elemento {
    width: 80%;
}

input#kpi1_criterio, textarea#kpi1_compromiso, input#kpi2_criterio, textarea#kpi2_compromiso, input#societe1_criterio, textarea#societe1_compromiso, input#societe2_criterio, textarea#societe2_compromiso, input#societe3_criterio, textarea#societe3_compromiso, input#product1_criterio, textarea#product1_compromiso, input#product2_criterio, textarea#product2_compromiso, input#product3_criterio, textarea#product3_compromiso {
    width: 90%;
    border-radius: 10px;
}

textarea#comments_update_compromiso {
    width: 100%;
    border-radius: 10px;
}

.evaluation-form-tab-detail-signature-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

textarea#conclusiones {
    width: 100%;
    height: 150px;
    border: 1px solid rgb(180,180,180);
    border-radius: 10px;
	padding: 10px;
}

.evaluation-form-tab-detail-signature-container {
    padding: 20px;
    border: 1px solid rgb(180,180,180);
    border-radius: 10px;
}

.evaluation-form-tab-detail-signature-container {
    padding: 20px;
    border: 1px solid rgb(180,180,180);
    border-radius: 10px;
}

.field-faltante {
	border: 2px solid var(--rojo-wurth) !Important;
}

i.calendar-s121-follow-get-sign.fa.fa-signature {
    background: black;
    padding: 3px;
    color: white;
    border-radius: 3px;
}

.homework-container {
    width: 800px;
    height: 400px;
}

textarea#work_plan {
    width: 100%;
    height: 100%;
}

.homework-workplan {
    width: 100%;
    height: 90%;
}

.homework-title {
    font-weight: bold;
}