/* ========= EXTRA CSS 2025 ========== */
/* Variables globales */
:root {
    --sieval-bg-wh-1: url('../img/bg/bg-wh-1.jpeg');
    --sieval-bg-wh-2: url('../img/bg/bg-wh-2.jpeg');
    --sieval-bg-wh-3: url('../img/banner_sieval_2025_claro.webp');
}
/* ========== GENERAL ========== */
.crs-pnt{ cursor: pointer; }
.form-control, select.form-control {
    border: 1px solid #4D7D9A;
    border-radius: 0.25em;
}
.form-control:hover, .form-control:active, .form-control:focus {
    border: 1px solid #205D81;
    border-radius: 0.25em;
}
.modal-body{
    background:#fcfcfc;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    font-size: 1.2em;
    padding: 0.2em;
}
ul.ul-palabras-clave li.palabra-clave{
  list-style: none;
  float: left;
  margin-right: 5px;
  margin-top: 5px;
  padding: 0.2em 0.5em;
  border-radius: 0.25em;
}
.pil-mot:nth-child(5n+1),
ul.ul-palabras-clave li.palabra-clave:nth-child(5n+1),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+1) {
  background: #C27A97;
}
.pil-mot:nth-child(5n+2),
ul.ul-palabras-clave li.palabra-clave:nth-child(5n+2),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+2) {
  background: #9DCBA7;
}
.pil-mot:nth-child(5n+3),
ul.ul-palabras-clave li.palabra-clave:nth-child(5n+3),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+3) {
  background: #DCA37D;
}
.pil-mot:nth-child(5n+4),
ul.ul-palabras-clave li.palabra-clave:nth-child(5n+4),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+4) {
  background: #AE985E;
}
.pil-mot:nth-child(5n+5),
ul.ul-palabras-clave li.palabra-clave:nth-child(5n+0),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+0) {
  background: #799EB3;
}
.select2-container{
  border: 1px solid #205D81;
  border-radius: 0.25em;
}
/* ========== ROUNDED CORNERS ========== */
.rounded-0 { border-radius: 0; }
.rounded-1 { border-radius: 0.125rem; }
.rounded-2 { border-radius: 0.25rem; }
.rounded-3 { border-radius: 0.375rem; }
.br-t { border-top-right-radius: 0.375rem; border-top-left-radius: 0.375rem; }
.br-r { border-bottom-right-radius: 0.375rem; border-top-right-radius: 0.375rem; }
.br-l { border-bottom-left-radius: 0.375rem; border-top-left-radius: 0.375rem; }
.br-b { border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
/* ========== BADGES ========== */
.badge{
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: #fff;
}
.badge-verde-5 { background-color: #5BA86C; border-color: #333; }
.badge-danger { background-color: #A02321; border-color: #eee; }
/** Badges de modalidades **/
.badge-mod-1 { background-color: #95a3af; border-color: #6D8294; color:#4A667C; }
.badge-mod-2 { background-color: #4B966E; border-color: #0F5A32; color:#003C1C; }
/** Badges de estatus de trabajos **/
.badge-tst-1, .badge-registrado { background-color: #D2DFE6; border-color: #4D7D9A; color:#205D81; }
.badge-tst-2, .badge-eliminado { background-color: #e49984; border-color: #E5A823; color:#a81f00; }
.badge-tst-3, .badge-pruebas { background-color: #EBD3DC; border-color: #992151; color:#61001A; }
.badge-tst-4, .badge-aceptado { background-color: #8dd087; border-color: #2a6004; color:#047a43; }
.badge-tst-5, .badge-rechazado { background-color: #f45e23; border-color: #e52323; color:#a80800; }
.badge-tst-6, .badge-enviado { background-color: #9DCBA7; border-color: #205D81; color:#205D81; }
.badge-tst-7, .badge-aprobado-met { background-color: #799EB3; border-color: #205D81; color:#205D81; }
.badge-tst-8, .badge-rechazado-met { background-color: #DCA37D; border-color: #E5A823; color:#A87300; }
.badge-tst-9, .badge-revision { background-color: #e5a519; border-color: #E5A823; color:#796332; }
.badge-tst-10, .badge-incompleto { background-color: #e7e468; border-color: #A87300; color:#28251f; }
.badge-tst-11, .badge-evaluando { background-color: #a1a3b3; border-color: #48367d; color:#48367d; }
.badge-tst-12, .badge-evaluado { background-color: #3a7329; border-color: #06510a; color:#fff; }
.badge-tst-13, .badge-enCorreccion { background-color: #377faf; border-color: #dfd6c1; color:#0a1056; }

.badge-success { background-color: #5BA86C; border-color: #333; }
.badge-danger { background-color: #A02321; border-color: #eee; }
/* ========== WIDTH ========== */
.w-5{ width: 5%; }
.w-10{ width: 10%; }
.w-15{ width: 15%; }
.w-20{ width: 20%; }
.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-35{ width: 35%; }
.w-40{ width: 40%; }
.w-45{ width: 45%; }
.w-50{ width: 50%; }
.w-55{ width: 55%; }
.w-60{ width: 60%; }
.w-65{ width: 65%; }
.w-70{ width: 70%; }
.w-75{ width: 75%; }
.w-80{ width: 80%; }
.w-85{ width: 85%; }
.w-90{ width: 90%; }
.w-95{ width: 95%; }
.w-100{ width: 100%; }

.wd-5 { width: 5px; }
.wd-10 { width: 10px; }
.wd-15 { width: 15px; }
.wd-20 { width: 20px; }
.wd-25 { width: 25px; }
.wd-30 { width: 30px; }
.wd-35 { width: 35px; }
.wd-40 { width: 40px; }
.wd-45 { width: 45px; }
.wd-50 { width: 50px; }
.wd-55 { width: 55px; }
.wd-60 { width: 60px; }
.wd-65 { width: 65px; }
.wd-70 { width: 70px; }
.wd-75 { width: 75px; }
.wd-80 { width: 80px; }
.wd-85 { width: 85px; }
.wd-90 { width: 90px; }
.wd-95 { width: 95px; }
.wd-100 { width: 100px; }
.wd-110 { width: 110px; }
.wd-120 { width: 120px; }
.wd-130 { width: 130px; }
.wd-140 { width: 140px; }
.wd-150 { width: 150px; }
.wd-200 { width: 200px; }
.wd-210 { width: 210px; }
.wd-250 { width: 250px; }
.wd-300 { width: 300px; }
.wd-350 { width: 350px; }
.wd-400 { width: 400px; }
.wd-450 { width: 450px; }
.wd-500 { width: 500px; }
.wd-600 { width: 600px; }
.wd-700 { width: 700px; }
.wd-800 { width: 800px; }
.wd-900 { width: 900px; }
.wd-1000 { width: 1000px; }
.wd-1100 { width: 1100px; }
.wd-1200 { width: 1200px; }
.wd-1300 { width: 1300px; }
.wd-1400 { width: 1400px; }
.wd-1500 { width: 1500px; }
.wd-1600 { width: 1600px; }
.wd-1700 { width: 1700px; }
.wd-1800 { width: 1800px; }
.wd-1900 { width: 1900px; }
.wd-2000 { width: 2000px; }
.mx-wd-100 { max-width: 100px; }
.mx-wd-200 { max-width: 200px; }
.mx-wd-300 { max-width: 300px; }
.mx-wd-400 { max-width: 400px; }
.mx-wd-500 { max-width: 500px; }
.mx-wd-600 { max-width: 600px; }
.mx-wd-700 { max-width: 700px; }
.mx-wd-800 { max-width: 800px; }
.mx-wd-900 { max-width: 900px; }
.mx-wd-1000 { max-width: 1000px; }
.mx-wd-1100 { max-width: 1100px; }
.mx-w-100 { max-width: 100%;}

/* ========== MARGIN ========== */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* tracking */
.tracking-tighter { letter-spacing: -0.05em;}
.tracking-tight { letter-spacing: -0.025em;}
.tracking-normal { letter-spacing: 0em;}
.tracking-wide { letter-spacing: 0.025em;}
.tracking-wider { letter-spacing: 0.05em;}
.tracking-widest { letter-spacing: 0.1em; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

.v-center {
  display: flex;
  align-items: center;  
}
.tx-right{ text-align: right; }
.tx-left{ text-align: left; }
.tx-justify{ text-align: justify; }
/** Tipografía **/
.tx-100{ font-weight: 100; }
.tx-200{ font-weight: 200; }
.tx-300{ font-weight: 300; }
.tx-400{ font-weight: 400; }
.tx-500{ font-weight: 500; }
.tx-600{ font-weight: 600; }
.tx-700{ font-weight: 700; }
.tx-800{ font-weight: 800; }
.tx-900{ font-weight: 900; }
.tx-4 {  font-size: 4px; }
.tx-6 {  font-size: 6px; }
.tx-8 {  font-size: 8px; }
.tx-10 {  font-size: 10px; }
.tx-12 {  font-size: 12px; }
.tx-14 {  font-size: 14px; }
.tx-16 {  font-size: 16px; }
.tx-18 {  font-size: 18px; }
.tx-20 {  font-size: 20px; }
.tx-22 {  font-size: 22px; }
.tx-24 {  font-size: 24px; }
.tx-26 {  font-size: 26px; }
.tx-28 {  font-size: 28px; }
.tx-30 {  font-size: 30px; }
.tx-32 {  font-size: 32px; }
.tx-34 {  font-size: 34px; }
.tx-36 {  font-size: 36px; }
.tx-black { color: #111; }
.tx-end { text-align: end; }
.tx-center { text-align: center; }
.tx-justify { text-align: justify; }
.tx-left, .tx-start { text-align: left; }
.tx-danger { color: #dc3545; }
/* ========== FONDOS ========== */
/* azulp */
.bg-azulp-5 { background-color: #205D81; }
.bg-azulp-4 { background-color: #4D7D9A; }
.bg-azulp-3 { background-color: #799EB3; }
.bg-azulp-2 { background-color: #A6BECD; }
.bg-azulp-1 { background-color: #D2DFE6; }

/* azul 2024 */
.bg-azul-1, .btn-azul-1 { background-color: #26A4BA; }
.bg-azul-2, .btn-azul-2 { background-color: #1A8FAA; }
.bg-azul-3, .btn-azul-3 { background-color: #1B7585; }
.bg-azul-4, .btn-azul-4 { background-color: #1B7585; }

/* vinot */
.bg-vinot-5 { background-color: #992151; }
.bg-vinot-4 { background-color: #AD4D74; }
.bg-vinot-3 { background-color: #C27A97; }
.bg-vinot-2 { background-color: #D6A6B9; }
.bg-vinot-1 { background-color: #EBD3DC; }

/* mostaz */
.bg-mostaz-5 { background-color: #E5A823; }
.bg-mostaz-4 { background-color: #EAB94F; }
.bg-mostaz-3 { background-color: #EFCB7B; }
.bg-mostaz-2 { background-color: #F5DCA7; }
.bg-mostaz-1 { background-color: #FAEED3; }

/* verde */
.bg-verde-5 { background-color: #5BA86C; }
.bg-verde-4 { background-color: #7CB989; }
.bg-verde-3 { background-color: #9DCBA7; }
.bg-verde-2 { background-color: #BDDCC4; }
.bg-verde-1 { background-color: #DEEEE2; }

/* naranj */
.bg-naranj-5 { background-color: #C56527; }
.bg-naranj-4 { background-color: #D18452; }
.bg-naranj-3 { background-color: #DCA37D; }
.bg-naranj-2 { background-color: #E8C1A9; }
.bg-naranj-1 { background-color: #F3E0D4; }

/* oro */
.bg-oro-1, .btn-oro-1 { background-color: #AE985E; }
.bg-oro-2, .btn-oro-2 { background-color: #A68B5B; }
.bg-oro-3, .btn-oro-3 { background-color: #8E7A4F; }
.bg-oro-4, .btn-oro-4 { background-color: #7D6A44; }

/* blanco */
.bg-white-1 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white-2 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white-3 { background-color: rgba(255, 255, 255, 0.3); }
.bg-white-4 { background-color: rgba(255, 255, 255, 0.4); }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white-6 { background-color: rgba(255, 255, 255, 0.6); }
.bg-white-7 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white-8 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white-9  { background-color: rgba(255, 255, 255, 0.9); }

.bg-wh-1 { background-image: url('../img/bg/bg-wh-1.jpeg'); }
.bg-wh-2 { background-image: url('../img/bg/bg-wh-2.jpeg'); }
.bg-wh-3 { background-image: var(--sieval-bg-wh-3); }
.bg-bl-1 { background-image: url('../img/bg/bg-blue-1.png'); }
.bg-bl-2 { background-image: url('../img/bg/bg-blue-2.png'); }
.bg-bl-3 { background-image: url('../img/bg/bg-blue-3.jpeg'); }


.bg-counter { background-image: url('../img/bg/bg-counter.webp'); background-size: cover; background-position: center; }
/* ========== TEXTO ========== */
/* azulp */
.tx-azulp-5 { color: #205D81; }
.tx-azulp-4 { color: #4D7D9A; }
.tx-azulp-3 { color: #799EB3; }
.tx-azulp-2 { color: #A6BECD; }
.tx-azulp-1 { color: #D2DFE6; }

/* vinot */
.tx-vinot-5 { color: #992151; }
.tx-vinot-4 { color: #AD4D74; }
.tx-vinot-3 { color: #C27A97; }
.tx-vinot-2 { color: #D6A6B9; }
.tx-vinot-1 { color: #EBD3DC; }

/* mostaz */
.tx-mostaz-5 { color: #E5A823; }
.tx-mostaz-4 { color: #EAB94F; }
.tx-mostaz-3 { color: #EFCB7B; }
.tx-mostaz-2 { color: #F5DCA7; }
.tx-mostaz-1 { color: #FAEED3; }

/* verde */
.tx-verde-5 { color: #5BA86C; }
.tx-verde-4 { color: #7CB989; }
.tx-verde-3 { color: #9DCBA7; }
.tx-verde-2 { color: #BDDCC4; }
.tx-verde-1 { color: #DEEEE2; }

/* naranj */
.tx-naranj-5 { color: #C56527; }
.tx-naranj-4 { color: #D18452; }
.tx-naranj-3 { color: #DCA37D; }
.tx-naranj-2 { color: #E8C1A9; }
.tx-naranj-1 { color: #F3E0D4; }

/* rojo */
.tx-rojo-5 { color: #A02321; }

/* gray 100-900 */
.tx-gray-100 { color: #f8f9fa; }
.tx-gray-200 { color: #e9ecef; }
.tx-gray-300 { color: #dee2e6; }
.tx-gray-400 { color: #ced4da; }
.tx-gray-500 { color: #adb5bd; }
.tx-gray-600 { color: #6c757d; }
.tx-gray-700 { color: #495057; }
.tx-gray-800 { color: #343a40; }
.tx-gray-900 { color: #212529; }

/* ========== BORDES ========== */
/* azulp */
.bd-azulp-5 { border-color: #205D81; }
.bd-azulp-4 { border-color: #4D7D9A; }
.bd-azulp-3 { border-color: #799EB3; }
.bd-azulp-2 { border-color: #A6BECD; }
.bd-azulp-1 { border-color: #D2DFE6; }

/* vinot */
.bd-vinot-5 { border-color: #992151; }
.bd-vinot-4 { border-color: #AD4D74; }
.bd-vinot-3 { border-color: #C27A97; }
.bd-vinot-2 { border-color: #D6A6B9; }
.bd-vinot-1 { border-color: #EBD3DC; }

/* mostaz */
.bd-mostaz-5 { border-color: #E5A823; }
.bd-mostaz-4 { border-color: #EAB94F; }
.bd-mostaz-3 { border-color: #EFCB7B; }
.bd-mostaz-2 { border-color: #F5DCA7; }
.bd-mostaz-1 { border-color: #FAEED3; }

/* verde */
.bd-verde-5 { border-color: #5BA86C; }
.bd-verde-4 { border-color: #7CB989; }
.bd-verde-3 { border-color: #9DCBA7; }
.bd-verde-2 { border-color: #BDDCC4; }
.bd-verde-1 { border-color: #DEEEE2; }

/* naranj */
.bd-naranj-5 { border-color: #C56527; }
.bd-naranj-4 { border-color: #D18452; }
.bd-naranj-3 { border-color: #DCA37D; }
.bd-naranj-2 { border-color: #E8C1A9; }
.bd-naranj-1 { border-color: #F3E0D4; }

/* bd-gray 100-900 */
.bd-gray-100 { border-color: #f8f9fa; }
.bd-gray-200 { border-color: #e9ecef; }
.bd-gray-300 { border-color: #dee2e6; }
.bd-gray-400 { border-color: #ced4da; }
.bd-gray-500 { border-color: #adb5bd; }
.bd-gray-600 { border-color: #6c757d; }
.bd-gray-700 { border-color: #495057; }
.bd-gray-800 { border-color: #343a40; }
.bd-gray-900 { border-color: #212529; }

/* ========== BOTONES ========== */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: 400; 
    border-radius: 0.25rem;
    border-bottom-width: 5px;
    border-left-width: 2px;
    border-color: transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all .2s ease-in-out;
    font-family: Arial, Helvetica, sans-serif;
}
.btn-link {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0.125rem 0.25rem;
    color: #666;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
.btn-estado {
    border: none;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.btn-activos {
    border: none;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.btn-activo {
    background-color: #28a745; /* Verde */
}

.btn-inactivo {
    background-color: #dc3545; /* Rojo */
}
/* ========== AZULP ========== */
.btn-azulp-5 { background-color: #205D81; border-color: #205D81; color: #fff; }
.btn-azulp-5:hover { background-color: #1a4a67; border-color: #13374d; }

.btn-azulp-4 { background-color: #4D7D9A; border-color: #4D7D9A; color: #fff; }
.btn-azulp-4:hover { background-color: #3e647a; border-color: #2e4b5b; }

.btn-azulp-3 { background-color: #799EB3; border-color: #799EB3; color: #fff; }
.btn-azulp-3:hover { background-color: #628092; border-color: #4a6170; }

.btn-azulp-2 { background-color: #A6BECD; border-color: #A6BECD; color: #222; }
.btn-azulp-2:hover { background-color: #87a1b2; border-color: #667c89; }

.btn-azulp-1 { background-color: #D2DFE6; border-color: #D2DFE6; color: #222; }
.btn-azulp-1:hover { background-color: #b9cdd9; border-color: #8aa5b7; }

/* ========== VINOT ========== */
.btn-vinot-5 { background-color: #992151; border-color: #992151; color: #fff; }
.btn-vinot-5:hover { background-color: #7a1a41; border-color: #5c1431; }

.btn-vinot-4 { background-color: #AD4D74; border-color: #AD4D74; color: #fff; }
.btn-vinot-4:hover { background-color: #8a3e5d; border-color: #682e46; }

.btn-vinot-3 { background-color: #C27A97; border-color: #C27A97; color: #fff; }
.btn-vinot-3:hover { background-color: #9b6279; border-color: #74495b; }

.btn-vinot-2 { background-color: #D6A6B9; border-color: #D6A6B9; color: #222; }
.btn-vinot-2:hover { background-color: #b38798; border-color: #886473; }

.btn-vinot-1 { background-color: #EBD3DC; border-color: #EBD3DC; color: #222; }
.btn-vinot-1:hover { background-color: #d6b0be; border-color: #b27c91; }

.btn-vinot-1 i{
    color:#992151;
}

/* ========== MOSTAZ ========== */
.btn-mostaz-5 { background-color: #E5A823; border-color: #E5A823; color: #222; }
.btn-mostaz-5:hover { background-color: #b8851c; border-color: #8a6215; }

.btn-mostaz-4 { background-color: #EAB94F; border-color: #EAB94F; color: #222; }
.btn-mostaz-4:hover { background-color: #bb933f; border-color: #8c6e2f; }

.btn-mostaz-3 { background-color: #EFCB7B; border-color: #EFCB7B; color: #222; }
.btn-mostaz-3:hover { background-color: #bfa262; border-color: #8f7a4a; }

.btn-mostaz-2 { background-color: #F5DCA7; border-color: #F5DCA7; color: #222; }
.btn-mostaz-2:hover { background-color: #c4b086; border-color: #938465; }

.btn-mostaz-1 { background-color: #FAEED3; border-color: #FAEED3; color: #222; }
.btn-mostaz-1:hover { background-color: #f2d6a3; border-color: #d6a94d; }

/* ========== VERDE ========== */
.btn-verde-5 { background-color: #5BA86C; border-color: #5BA86C; color: #fff; }
.btn-verde-5:hover { background-color: #488756; border-color: #366540; }

.btn-verde-4 { background-color: #7CB989; border-color: #7CB989; color: #fff; }
.btn-verde-4:hover { background-color: #63946d; border-color: #4a6f52; }

.btn-verde-3 { background-color: #9DCBA7; border-color: #9DCBA7; color: #222; }
.btn-verde-3:hover { background-color: #7e9f86; border-color: #5f7564; }

.btn-verde-2 { background-color: #BDDCC4; border-color: #BDDCC4; color: #222; }
.btn-verde-2:hover { background-color: #97b09d; border-color: #708376; }

.btn-verde-1 { background-color: #DEEEE2; border-color: #DEEEE2; color: #222; }
.btn-verde-1:hover { background-color: #c2decc; border-color: #96bfa6; }

/* ========== NARANJ ========== */
.btn-naranj-5 { background-color: #C56527; border-color: #C56527; color: #fff; }
.btn-naranj-5:hover { background-color: #9e501f; border-color: #763b17; }

.btn-naranj-4 { background-color: #D18452; border-color: #D18452; color: #fff; }
.btn-naranj-4:hover { background-color: #a76a42; border-color: #7d4f31; }

.btn-naranj-3 { background-color: #DCA37D; border-color: #DCA37D; color: #222; }
.btn-naranj-3:hover { background-color: #b08264; border-color: #84504b; }

.btn-naranj-2 { background-color: #E8C1A9; border-color: #E8C1A9; color: #222; }
.btn-naranj-2:hover { background-color: #ba9a87; border-color: #8c7365; }

.btn-naranj-1 { background-color: #F3E0D4; border-color: #F3E0D4; color: #222; }
.btn-naranj-1:hover { background-color: #e7c1a9; border-color: #c98a5d; }
/* ========== BASE TABLE ========== */
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table th, .table td {
    padding: .5rem .75rem;
    border: 1px solid var(--tbl-border, #ddd);
    vertical-align: top;
    /* Wrapping de texto */
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.table thead th {
    background-color: var(--tbl-head-bg, #f0f0f0);
    color: var(--tbl-head-fg, #222);
}
.table-striped tr:nth-child(odd) td {
    background-color: var(--tbl-stripe, #0000000f);
}
@media screen and (max-width: 768px) {
  table.responsive {
    border: 0;
  }
  table.responsive thead {
    display: none;
  }
  table.responsive tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0.5rem;
  }
  table.responsive td {
    display: block;
    text-align: left;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid #eee;
  }
  table.responsive td:last-child {
    border-bottom: 0;
  }
  table.responsive td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 0.3rem;
    color: #333;
  }
}
/* ========== AZULP (#205D81) ========== */
.table-azulp-5 {
    --tbl-accent: #205D81;         
    --tbl-head-bg: #205D81;        
    --tbl-head-fg: #ffffff;
    --tbl-border: #205D8133;       
    --tbl-stripe: #205D8166;       
}
.table-azulp-1 {
    --tbl-accent: #D2DFE6;         
    --tbl-head-bg: #205D81;        
    --tbl-head-fg: #ffffff;
    --tbl-border: #205D8133;
    --tbl-stripe: #205D8166;
}

/* ========== VINOT (#992151) ========== */
.table-vinot-5 {
    --tbl-accent: #992151;
    --tbl-head-bg: #992151;
    --tbl-head-fg: #ffffff;
    --tbl-border: #99215133;
    --tbl-stripe: #99215166;
}
.table-vinot-1 {
    --tbl-accent: #EBD3DC;
    --tbl-head-bg: #992151;
    --tbl-head-fg: #ffffff;
    --tbl-border: #99215133;
    --tbl-stripe: #99215166;
}

/* ========== MOSTAZ (#E5A823) ========== */
.table-mostaz-5 {
    --tbl-accent: #E5A823;
    --tbl-head-bg: #E5A823;
    --tbl-head-fg: #222222;        /* mejor legibilidad sobre amarillo */
    --tbl-border: #E5A82333;
    --tbl-stripe: #E5A82366;
}
.table-mostaz-1 {
    --tbl-accent: #FAEED3;
    --tbl-head-bg: #E5A823;
    --tbl-head-fg: #222222;
    --tbl-border: #E5A82333;
    --tbl-stripe: #E5A82366;
}

/* ========== VERDE (#5BA86C) ========== */
.table-verde-5 {
    --tbl-accent: #5BA86C;
    --tbl-head-bg: #5BA86C;
    --tbl-head-fg: #ffffff;
    --tbl-border: #5BA86C33;
    --tbl-stripe: #5BA86C66;
}
.table-verde-1 {
    --tbl-accent: #DEEEE2;
    --tbl-head-bg: #5BA86C;
    --tbl-head-fg: #ffffff;
    --tbl-border: #5BA86C33;
    --tbl-stripe: #5BA86C66;
}

/* ========== NARANJ (#C56527) ========== */
.table-naranj-5 {
    --tbl-accent: #C56527;
    --tbl-head-bg: #C56527;
    --tbl-head-fg: #ffffff;
    --tbl-border: #C5652733;
    --tbl-stripe: #C5652766;
}
.table-naranj-1 {
    --tbl-accent: #F3E0D4;
    --tbl-head-bg: #C56527;
    --tbl-head-fg: #ffffff;
    --tbl-border: #C5652733;
    --tbl-stripe: #C5652766;
}
/* ========== GRAY (#6c757d) ========== */
.table-gray-5 {
    --tbl-accent: #6c757d;
    --tbl-head-bg: #e1e5e8;
    --tbl-head-fg: #515969;
    --tbl-border: #6c757d33;
    --tbl-stripe: #6c757d66;
}

/* ========== HEIGHT ========== */
.h-auto { height: auto; }

/* Porcentajes */
.h-5 { height: 5%; }
.h-10 { height: 10%; }
.h-15 { height: 15%; }
.h-20 { height: 20%; }
.h-25 { height: 25%; }
.h-30 { height: 30%; }
.h-35 { height: 35%; }
.h-40 { height: 40%; }
.h-45 { height: 45%; }
.h-50 { height: 50%; }
.h-55 { height: 55%; }
.h-60 { height: 60%; }
.h-65 { height: 65%; }
.h-70 { height: 70%; }
.h-75 { height: 75%; }
.h-80 { height: 80%; }
.h-85 { height: 85%; }
.h-90 { height: 90%; }
.h-95 { height: 95%; }
.h-100 { height: 100%; }

/* Píxeles */
.ht-5 { height: 5px; }
.ht-10 { height: 10px; }
.ht-15 { height: 15px; }
.ht-20 { height: 20px; }
.ht-25 { height: 25px; }
.ht-30 { height: 30px; }
.ht-35 { height: 35px; }
.ht-40 { height: 40px; }
.ht-45 { height: 45px; }
.ht-50 { height: 50px; }
.ht-55 { height: 55px; }
.ht-60 { height: 60px; }
.ht-65 { height: 65px; }
.ht-70 { height: 70px; }
.ht-75 { height: 75px; }
.ht-80 { height: 80px; }
.ht-85 { height: 85px; }
.ht-90 { height: 90px; }
.ht-95 { height: 95px; }
.ht-100 { height: 100px; }
.ht-150 { height: 150px; }
.ht-200 { height: 200px; }
.ht-250 { height: 250px; }
.ht-300 { height: 300px; }
.ht-350 { height: 350px; }
.ht-400 { height: 400px; }
.ht-450 { height: 450px; }
.ht-500 { height: 500px; }
.ht-600 { height: 600px; }
.ht-700 { height: 700px; }
.ht-800 { height: 800px; }
.ht-900 { height: 900px; }
.ht-1000 { height: 1000px; }
.ht-1100 { height: 1100px; }
.ht-1200 { height: 1200px; }
.ht-1300 { height: 1300px; }
.ht-1400 { height: 1400px; }
.ht-1500 { height: 1500px; }


/* Altura máxima */
.mx-ht-500 { max-height: 500px; }
.mx-ht-600 { max-height: 600px; }
.mx-ht-700 { max-height: 700px; }
.mx-ht-800 { max-height: 800px; }

/* ========== MIN HEIGHT ========== */
.mn-ht-5 { min-height: 5px; }
.mn-ht-10 { min-height: 10px; }
.mn-ht-15 { min-height: 15px; }
.mn-ht-20 { min-height: 20px; }
.mn-ht-25 { min-height: 25px; }
.mn-ht-30 { min-height: 30px; }
.mn-ht-35 { min-height: 35px; }
.mn-ht-40 { min-height: 40px; }
.mn-ht-45 { min-height: 45px; }
.mn-ht-50 { min-height: 50px; }
.mn-ht-55 { min-height: 55px; }
.mn-ht-60 { min-height: 60px; }
.mn-ht-65 { min-height: 65px; }
.mn-ht-70 { min-height: 70px; }
.mn-ht-75 { min-height: 75px; }
.mn-ht-80 { min-height: 80px; }
.mn-ht-85 { min-height: 85px; }
.mn-ht-90 { min-height: 90px; }
.mn-ht-95 { min-height: 95px; }
.mn-ht-100 { min-height: 100px; }
.mn-ht-150 { min-height: 150px; }
.mn-ht-200 { min-height: 200px; }
.mn-ht-250 { min-height: 250px; }
.mn-ht-300 { min-height: 300px; }
.mn-ht-350 { min-height: 350px; }
.mn-ht-400 { min-height: 400px; }
.mn-ht-450 { min-height: 450px; }
.mn-ht-500 { min-height: 500px; }
.mn-ht-600 { min-height: 600px; }
.mn-ht-700 { min-height: 700px; }
.mn-ht-800 { min-height: 800px; }
.mn-ht-900 { min-height: 900px; }
.mn-ht-1000 { min-height: 1000px; }
.mn-ht-1100 { min-height: 1100px; }
.mn-ht-1200 { min-height: 1200px; }
.mn-ht-1300 { min-height: 1300px; }
.mn-ht-1400 { min-height: 1400px; }
.mn-ht-1500 { min-height: 1500px; }
/* ========== WIDTH ========== */
.w-auto{ width: auto; }
.w-5{ width: 5%; }
.w-10{ width: 10%; }
.w-15{ width: 15%; }
.w-20{ width: 20%; }
.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-35{ width: 35%; }
.w-40{ width: 40%; }
.w-45{ width: 45%; }
.w-50{ width: 50%; }
.w-55{ width: 55%; }
.w-60{ width: 60%; }
.w-65{ width: 65%; }
.w-70{ width: 70%; }
.w-75{ width: 75%; }
.w-80{ width: 80%; }
.w-85{ width: 85%; }
.w-90{ width: 90%; }
.w-95{ width: 95%; }
.w-100{ width: 100%; }
.wd-5 { width: 5px; }
.wd-10 { width: 10px; }
.wd-15 { width: 15px; }
.wd-20 { width: 20px; }
.wd-25 { width: 25px; }
.wd-30 { width: 30px; }
.wd-35 { width: 35px; }
.wd-40 { width: 40px; }
.wd-45 { width: 45px; }
.wd-50 { width: 50px; }
.wd-55 { width: 55px; }
.wd-60 { width: 60px; }
.wd-65 { width: 65px; }
.wd-70 { width: 70px; }
.wd-75 { width: 75px; }
.wd-80 { width: 80px; }
.wd-85 { width: 85px; }
.wd-90 { width: 90px; }
.wd-95 { width: 95px; }
.wd-100 { width: 100px; }
.wd-150 { width: 150px; }
.wd-200 { width: 200px; }
.wd-250 { width: 250px; }
.wd-300 { width: 300px; }
.wd-350 { width: 350px; }
.wd-400 { width: 400px; }
.wd-450 { width: 450px; }
.wd-500 { width: 500px; }
.wd-600 { width: 600px; }
.wd-700 { width: 700px; }
.wd-800 { width: 800px; }
.wd-900 { width: 900px; }
.wd-1000 { width: 1000px; }
.wd-1100 { width: 1100px; }
.wd-1200 { width: 1200px; }
.wd-1300 { width: 1300px; }
.wd-1400 { width: 1400px; }
.wd-1500 { width: 1500px; }
.mx-wd-500 { max-width: 500px; }
.mx-wd-600 { max-width: 600px; }
.mx-wd-700 { max-width: 700px; }
.mx-wd-800 { max-width: 800px; }
/* ========== GRID ========== */
.grid { display: grid; gap: 1rem; }
.grid { display: grid }
.grid-flow-row { grid-auto-flow: row }
.grid-flow-col { grid-auto-flow: column }
.grid-flow-row-dense { grid-auto-flow: row dense }
.grid-flow-col-dense { grid-auto-flow: column dense }
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.grid-cols-none { grid-template-columns: none }
.auto-cols-auto { grid-auto-columns: auto }
.auto-cols-min { 
	grid-auto-columns: -webkit-min-content; 
	grid-auto-columns: min-content
}
.auto-cols-max {
	grid-auto-columns: -webkit-max-content;
	grid-auto-columns: max-content
}
.auto-cols-fr { grid-auto-columns: minmax(0,1fr) }
.col-auto { grid-column: auto }
.col-span-1 { grid-column: span 1/span 1 }
.col-span-2 { grid-column: span 2/span 2 }
.col-span-3 { grid-column: span 3/span 3 }
.col-span-4 { grid-column: span 4/span 4 }
.col-span-5 { grid-column: span 5/span 5 }
.col-span-6 { grid-column: span 6/span 6 }
.col-span-7 { grid-column: span 7/span 7 }
.col-span-8 { grid-column: span 8/span 8 }
.col-span-9 { grid-column: span 9/span 9 }
.col-span-10 { grid-column: span 10/span 10 }
.col-span-11 { grid-column: span 11/span 11 }
.col-span-12 { grid-column: span 12/span 12 }
.col-span-full { grid-column: 1/-1 }
.col-start-1 { grid-column-start: 1 }
.col-start-2 { grid-column-start: 2 }
.col-start-3 { grid-column-start: 3 }
.col-start-4 { grid-column-start: 4 }
.col-start-5 { grid-column-start: 5 }
.col-start-6 { grid-column-start: 6 }
.col-start-7 { grid-column-start: 7 }
.col-start-8 { grid-column-start: 8 }
.col-start-9 { grid-column-start: 9 }
.col-start-10 {grid-column-start: 10 }
.col-start-11 { grid-column-start: 11 }
.col-start-12 { grid-column-start: 12 }
.col-start-auto { grid-column-start: auto }
.col-end-1 { grid-column-end: 1 }
.col-end-2 { grid-column-end: 2 }
.col-end-3 { grid-column-end: 3 }
.col-end-4 { grid-column-end: 4 }
.col-end-5 { grid-column-end: 5 }
.col-end-6 { grid-column-end: 6 }
.col-end-7 { grid-column-end: 7 }
.col-end-8 { grid-column-end: 8 }
.col-end-9 { grid-column-end: 9 }
.col-end-10 { grid-column-end: 10 }
.col-end-11 { grid-column-end: 11 }
.col-end-12 { grid-column-end: 12 }
.col-end-13 {  grid-column-end: 13 }
.col-end-auto {  grid-column-end: auto }
.grid-rows-1 { grid-template-rows: repeat(1,minmax(0,1fr)) }
.grid-rows-2 {  grid-template-rows: repeat(2,minmax(0,1fr)) }
.grid-rows-3 {  grid-template-rows: repeat(3,minmax(0,1fr)) }
.grid-rows-4 {  grid-template-rows: repeat(4,minmax(0,1fr)) }
.grid-rows-5 {  grid-template-rows: repeat(5,minmax(0,1fr)) }
.grid-rows-6 {  grid-template-rows: repeat(6,minmax(0,1fr)) }
.grid-rows-none { grid-template-rows: none }

@media (width < 600px) and ( width > 320px) {
.sm-w-5 { width: 5%;  }
.sm-w-10 { width: 10%;  }
.sm-w-15 { width: 15%;  }
.sm-w-20 { width: 20%;  }
.sm-w-25 { width: 25%;  }
.sm-w-30 { width: 30%;  }
.sm-w-35 { width: 35%;  }
.sm-w-40 { width: 40%;  }
.sm-w-45 { width: 45%;  }
.sm-w-50 { width: 50%;  }
.sm-w-55 { width: 55%;  }
.sm-w-60 { width: 60%;  }
.sm-w-65 { width: 65%;  }
.sm-w-70 { width: 70%;  }
.sm-w-75 { width: 75%;  }
.sm-w-80 { width: 80%;  }
.sm-w-85 { width: 85%;  }
.sm-w-90 { width: 90%;  }
.sm-w-95 { width: 95%;  }
.sm-w-100 { width: 100%;  }

.sm-w-1\/3 { width: 33.333333%;  }
.sm-w-1\/2 { width: 50%;  }
.sm-w-2\/3 { width: 66.666667%; }
.sm-w-1\/4 { width: 25%;  }
.sm-w-3\/4 { width: 75%;  }
.sm-w-1\/5 { width: 20%;  }
.sm-w-2\/5 { width: 40%;  }
.sm-w-3\/5 { width: 60%;  }
.sm-w-4\/5 { width: 80%;  }
.sm-w-1\/6 { width: 16.666667%;  }
.sm-w-5\/6 { width: 83.333333%;  }
.sm-w-1\/12 { width: 8.333333%;  }
.sm-w-100 { width: 100%;  }
/* Ajuste de Grid */
.sm-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.sm-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.sm-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.sm-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.sm-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.sm-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.sm-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.sm-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.sm-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.sm-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.sm-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.sm-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.sm-col-span-1 { grid-column: span 1/span 1  }
.sm-col-span-2 { grid-column: span 2/span 2  }
.sm-col-span-3 { grid-column: span 3/span 3  }
.sm-col-span-4 { grid-column: span 4/span 4  }
.sm-col-span-5 { grid-column: span 5/span 5  }
.sm-col-span-6 { grid-column: span 6/span 6  }
.sm-col-span-7 { grid-column: span 7/span 7  }
.sm-col-span-8 { grid-column: span 8/span 8  }
.sm-col-span-9 { grid-column: span 9/span 9  }
.sm-col-span-10 { grid-column: span 10/span 10  }
.sm-col-span-11 { grid-column: span 11/span 11  }
.sm-col-span-12 { grid-column: span 12/span 12  }
.sm-col-span-full { grid-column: 1/-1  }
.sm-col-start-1 { grid-column-start: 1  }
.sm-col-start-2 { grid-column-start: 2  }
.sm-col-start-3 { grid-column-start: 3  }
.sm-col-start-4 { grid-column-start: 4  }
.sm-col-start-5 { grid-column-start: 5  }
.sm-col-start-6 { grid-column-start: 6  }
.sm-col-start-7 { grid-column-start: 7  }
.sm-col-start-8 { grid-column-start: 8  }
.sm-col-start-9 { grid-column-start: 9  }
.sm-col-start-10 { grid-column-start: 10  }
.sm-col-start-11 { grid-column-start: 11  }
.sm-col-start-12 { grid-column-start: 12  }
.sm-col-start-auto { grid-column-start: auto  }
}
@media (width > 600px)  { ▼
.md-w-5 { width: 5%;  }
.md-w-10 { width: 10%;  }
.md-w-15 { width: 15%;  }
.md-w-20 { width: 20%;  }
.md-w-25 { width: 25%;  }
.md-w-30 { width: 30%;  }
.md-w-35 { width: 35%;  }
.md-w-40 { width: 40%;  }
.md-w-45 { width: 45%;  }
.md-w-50 { width: 50%;  }
.md-w-55 { width: 55%;  }
.md-w-60 { width: 60%;  }
.md-w-65 { width: 65%;  }
.md-w-70 { width: 70%;  }
.md-w-75 { width: 75%;  }
.md-w-80 { width: 80%;  }
.md-w-85 { width: 85%;  }
.md-w-90 { width: 90%;  }
.md-w-95 { width: 95%;  }
.md-w-100 { width: 100%;  }
.md-w-1\/3 { width: 33.333333%;  }
.md-w-1\/2 { width: 50%;  }
.md-w-2\/3 { width: 66.666667%; }
.md-w-1\/4 { width: 25%;  }
.md-w-3\/4 { width: 75%;  }
.md-w-1\/5 { width: 20%;  }
.md-w-2\/5 { width: 40%;  }
.md-w-3\/5 { width: 60%;  }
.md-w-4\/5 { width: 80%;  }
.md-w-1\/6 { width: 16.666667%;  }
.md-w-5\/6 { width: 83.333333%;  }
.md-w-1\/12 { width: 8.333333%;  }
.md-w-100 { width: 100%;  }
/** Ajuste de Grid */
.md-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.md-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.md-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.md-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.md-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.md-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.md-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.md-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.md-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.md-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.md-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.md-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.md-grid-cols-20 { grid-template-columns: repeat(20,minmax(0,1fr)) }
.md-col-span-1 { grid-column: span 1/span 1  }
.md-col-span-2 { grid-column: span 2/span 2  }
.md-col-span-3 { grid-column: span 3/span 3  }
.md-col-span-4 { grid-column: span 4/span 4  }
.md-col-span-5 { grid-column: span 5/span 5  }
.md-col-span-6 { grid-column: span 6/span 6  }
.md-col-span-7 { grid-column: span 7/span 7  }
.md-col-span-8 { grid-column: span 8/span 8  }
.md-col-span-9 { grid-column: span 9/span 9  }
.md-col-span-10 { grid-column: span 10/span 10  }
.md-col-span-11 { grid-column: span 11/span 11  }
.md-col-span-12 { grid-column: span 12/span 12  }
.md-col-span-full { grid-column: 1/-1  }
.md-col-start-1 { grid-column-start: 1  }
.md-col-start-2 { grid-column-start: 2  }
.md-col-start-3 { grid-column-start: 3  }
.md-col-start-4 { grid-column-start: 4  }
.md-col-start-5 { grid-column-start: 5  }
.md-col-start-6 { grid-column-start: 6  }
.md-col-start-7 { grid-column-start: 7  }
.md-col-start-8 { grid-column-start: 8  }
.md-col-start-9 { grid-column-start: 9  }
.md-col-start-10 { grid-column-start: 10  }
.md-col-start-11 { grid-column-start: 11  }
.md-col-start-12 { grid-column-start: 12  }
.md-col-start-auto { grid-column-start: auto  }
}
/** lg-grid **/
@media (width > 1024px)  { ▼
    .lg-w-5 { width: 5%;  }
    .lg-w-10 { width: 10%;  }
    .lg-w-15 { width: 15%;  }
    .lg-w-20 { width: 20%;  }
    .lg-w-25 { width: 25%;  }
    .lg-w-30 { width: 30%;  }
    .lg-w-35 { width: 35%;  }
    .lg-w-40 { width: 40%;  }
    .lg-w-45 { width: 45%;  }
    .lg-w-50 { width: 50%;  }
    .lg-w-55 { width: 55%;  }
    .lg-w-60 { width: 60%;  }
    .lg-w-65 { width: 65%;  }
    .lg-w-70 { width: 70%;  }
    .lg-w-75 { width: 75%;  }
    .lg-w-80 { width: 80%;  }
    .lg-w-85 { width: 85%;  }
    .lg-w-90 { width: 90%;  }
    .lg-w-95 { width: 95%;  }
    .lg-w-100 { width: 100%;  }

    .lg-w-1\/3 { width: 33.333333%;  }
    .lg-w-1\/2 { width: 50%;  }
    .lg-w-2\/3 { width: 66.666667%; }
    .lg-w-1\/4 { width: 25%;  }
    .lg-w-3\/4 { width: 75%;  }
    .lg-w-1\/5 { width: 20%;  }
    .lg-w-2\/5 { width: 40%;  }
    .lg-w-3\/5 { width: 60%;  }
    .lg-w-4\/5 { width: 80%;  }
    .lg-w-1\/6 { width: 16.666667%;  }
    .lg-w-5\/6 { width: 83.333333%;  }
    .lg-w-1\/12 { width: 8.333333%;  }
    .lg-w-100 { width: 100%;  }
    /** Ajuste de Grid */
    .lg-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
    .lg-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
    .lg-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
    .lg-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
    .lg-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
    .lg-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
    .lg-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
    .lg-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
    .lg-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
    .lg-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
    .lg-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
    .lg-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
    .lg-grid-cols-20 { grid-template-columns: repeat(20,minmax(0,1fr)) }
    .lg-col-span-1 { grid-column: span 1/span 1  }
    .lg-col-span-2 { grid-column: span 2/span 2  }
    .lg-col-span-3 { grid-column: span 3/span 3  }
    .lg-col-span-4 { grid-column: span 4/span 4  }
    .lg-col-span-5 { grid-column: span 5/span 5  }
    .lg-col-span-6 { grid-column: span 6/span 6  }
    .lg-col-span-7 { grid-column: span 7/span 7  }
    .lg-col-span-8 { grid-column: span 8/span 8  }
    .lg-col-span-9 { grid-column: span 9/span 9  }
    .lg-col-span-10 { grid-column: span 10/span 10  }
    .lg-col-span-11 { grid-column: span 11/span 11  }
    .lg-col-span-12 { grid-column: span 12/span 12  }
    .lg-col-span-full { grid-column: 1/-1  }
    .lg-col-start-1 { grid-column-start: 1  }
    .lg-col-start-2 { grid-column-start: 2  }
    .lg-col-start-3 { grid-column-start: 3  }
    .lg-col-start-4 { grid-column-start: 4  }
    .lg-col-start-5 { grid-column-start: 5  }
    .lg-col-start-6 { grid-column-start: 6  }
    .lg-col-start-7 { grid-column-start: 7  }
    .lg-col-start-8 { grid-column-start: 8  }
    .lg-col-start-9 { grid-column-start: 9  }
    .lg-col-start-10 { grid-column-start: 10  }
    .lg-col-start-11 { grid-column-start: 11  }
    .lg-col-start-12 { grid-column-start: 12  }
    .lg-col-start-auto { grid-column-start: auto  }
}
/* ========== GAP ========== */
.gap-0{ grid-gap: 0;gap: 0}
.gap-1{grid-gap: .25rem;gap: .25rem}
.gap-2{grid-gap: .5rem;gap: .5rem}
.gap-3{grid-gap: .75rem;gap: .75rem}
.gap-4{grid-gap: 1rem;gap: 1rem}
.gap-5{grid-gap: 1.25rem;gap: 1.25rem}
.gap-6{grid-gap: 1.5rem;gap: 1.5rem}
.gap-8{grid-gap: 2rem;gap: 2rem}
.gap-10{grid-gap: 2.5rem;gap: 2.5rem}
.gap-12{grid-gap: 3rem;gap: 3rem}
.gap-16{grid-gap: 4rem;gap: 4rem}
.gap-20{grid-gap: 5rem;gap: 5rem}
.gap-24{grid-gap: 6rem;gap: 6rem}
.gap-32{grid-gap: 8rem;gap: 8rem}
.gap-40{grid-gap: 10rem;gap: 10rem}
.gap-48{grid-gap: 12rem;gap: 12rem}
.gap-56{grid-gap: 14rem;gap: 14rem}
.gap-64{grid-gap: 16rem;gap: 16rem}
.gap-px{grid-gap: 1px;gap: 1px}
.col-gap-0{grid-column-gap: 0;column-gap: 0}
.col-gap-1{grid-column-gap: .25rem;column-gap: .25rem}
.col-gap-2{grid-column-gap: .5rem;column-gap: .5rem}
.col-gap-3{grid-column-gap: .75rem;column-gap: .75rem}
.col-gap-4{grid-column-gap: 1rem;column-gap: 1rem}
.col-gap-5{grid-column-gap: 1.25rem;column-gap: 1.25rem}
.col-gap-6{grid-column-gap: 1.5rem;column-gap: 1.5rem}
.col-gap-8{grid-column-gap: 2rem;column-gap: 2rem}
.col-gap-10{grid-column-gap: 2.5rem;column-gap: 2.5rem}
.col-gap-12{grid-column-gap: 3rem;column-gap: 3rem}
.col-gap-16{grid-column-gap: 4rem;column-gap: 4rem}
.col-gap-20{grid-column-gap: 5rem;column-gap: 5rem}
.col-gap-24{grid-column-gap: 6rem;column-gap: 6rem}
.col-gap-32{grid-column-gap: 8rem;column-gap: 8rem}
.col-gap-40{grid-column-gap: 10rem;column-gap: 10rem}
.col-gap-48{grid-column-gap: 12rem;column-gap: 12rem}
.col-gap-56{grid-column-gap: 14rem;column-gap: 14rem}
.col-gap-64{grid-column-gap: 16rem;column-gap: 16rem}
.col-gap-px{grid-column-gap: 1px;column-gap: 1px}
.gap-x-0{grid-column-gap: 0;column-gap: 0}
.gap-x-1{grid-column-gap: .25rem;column-gap: .25rem}
.gap-x-2{grid-column-gap: .5rem;column-gap: .5rem}
.gap-x-3{grid-column-gap: .75rem;column-gap: .75rem}
.gap-x-4{grid-column-gap: 1rem;column-gap: 1rem}
.gap-x-5{grid-column-gap: 1.25rem;column-gap: 1.25rem}
.gap-x-6{grid-column-gap: 1.5rem;column-gap: 1.5rem}
.gap-x-8{grid-column-gap: 2rem;column-gap: 2rem}
.gap-x-10{grid-column-gap: 2.5rem;column-gap: 2.5rem}
.gap-x-12{grid-column-gap: 3rem;column-gap: 3rem}
.gap-x-16{grid-column-gap: 4rem;column-gap: 4rem}
.gap-x-20{grid-column-gap: 5rem;column-gap: 5rem}
.gap-x-24{grid-column-gap: 6rem;column-gap: 6rem}
.gap-x-32{grid-column-gap: 8rem;column-gap: 8rem}
.gap-x-40{grid-column-gap: 10rem;column-gap: 10rem}
.gap-x-48{grid-column-gap: 12rem;column-gap: 12rem}
.gap-x-56{grid-column-gap: 14rem;column-gap: 14rem}
.gap-x-64{grid-column-gap: 16rem;column-gap: 16rem}
.gap-x-px{grid-column-gap: 1px;column-gap: 1px}
.row-gap-0{grid-row-gap: 0;row-gap: 0}
.row-gap-1{grid-row-gap: .25rem;row-gap: .25rem}
.row-gap-2{grid-row-gap: .5rem;row-gap: .5rem}
.row-gap-3{grid-row-gap: .75rem;row-gap: .75rem}
.row-gap-4{grid-row-gap: 1rem;row-gap: 1rem}
.row-gap-5{grid-row-gap: 1.25rem;row-gap: 1.25rem}
.row-gap-6{grid-row-gap: 1.5rem;row-gap: 1.5rem}
.row-gap-8{grid-row-gap: 2rem;row-gap: 2rem}
.row-gap-10{grid-row-gap: 2.5rem;row-gap: 2.5rem}
.row-gap-12{grid-row-gap: 3rem;row-gap: 3rem}
.row-gap-16{grid-row-gap: 4rem;row-gap: 4rem}
.row-gap-20{grid-row-gap: 5rem;row-gap: 5rem}
.row-gap-24{grid-row-gap: 6rem;row-gap: 6rem}
.row-gap-32{grid-row-gap: 8rem;row-gap: 8rem}
.row-gap-40{grid-row-gap: 10rem;row-gap: 10rem}
.row-gap-48{grid-row-gap: 12rem;row-gap: 12rem}
.row-gap-56{grid-row-gap: 14rem;row-gap: 14rem}
.row-gap-64{grid-row-gap: 16rem;row-gap: 16rem}
.row-gap-px{grid-row-gap: 1px;row-gap: 1px}
.gap-y-0{grid-row-gap: 0;row-gap: 0}
.gap-y-1{grid-row-gap: .25rem;row-gap: .25rem}
.gap-y-2{grid-row-gap: .5rem;row-gap: .5rem}
.gap-y-3{grid-row-gap: .75rem;row-gap: .75rem}
.gap-y-4{grid-row-gap: 1rem;row-gap: 1rem}
.gap-y-5{grid-row-gap: 1.25rem;row-gap: 1.25rem}
.gap-y-6{grid-row-gap: 1.5rem;row-gap: 1.5rem}
.gap-y-8{grid-row-gap: 2rem;row-gap: 2rem}
.gap-y-10{grid-row-gap: 2.5rem;row-gap: 2.5rem}
.gap-y-12{grid-row-gap: 3rem;row-gap: 3rem}
.gap-y-16{grid-row-gap: 4rem;row-gap: 4rem}
.gap-y-20{grid-row-gap: 5rem;row-gap: 5rem}
.gap-y-24{grid-row-gap: 6rem;row-gap: 6rem}
.gap-y-32{grid-row-gap: 8rem;row-gap: 8rem}
.gap-y-40{grid-row-gap: 10rem;row-gap: 10rem}
.gap-y-48{grid-row-gap: 12rem;row-gap: 12rem}
.gap-y-56{grid-row-gap: 14rem;row-gap: 14rem}
.gap-y-64{grid-row-gap: 16rem;row-gap: 16rem}
.gap-y-px{grid-row-gap: 1px;row-gap: 1px}
/* ========== ARCHIVO ========== */
.file {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.file-label {
    display: inline-flex;
    align-items: center;
    background-color: #0d6efd; /* Azul tipo Bootstrap */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.file-label:hover {
    background-color: #0b5ed7;
}

.file-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.file-icon {
    font-size: 1rem;
}

.file-input {
    display: none; /* Ocultamos el input original */
}
/**================= sso CARD ================= **/
.sso-card.is-clickable {
  cursor: pointer;
}
.sso-card.is-not-allowed {
  cursor: not-allowed;
}
.sso-grupo-header h2 {
  margin: 0;
}

/* ===== CONTENEDOR GENERAL ===== */
.sso-catalogo h1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #171717; /* Negro suave */
}

/* ===== GRUPOS ===== */
.sso-grupo {
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  background-color: #e5e5e5; /* gris */
  padding: 1rem;
}

.sso-grupo-invisible {
  margin: 0 0 1.5rem 0;
  background-color: transparent;
  padding: 0;
}

.sso-grupo-header {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.sso-grupo-header h2 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  color: #171717;
}

.sso-toggle-icon {
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #525252;
}

/* ===== Variantes de alineación ===== */
.sso-ali-izquierda .sso-grupo-header {
  justify-content: flex-start;
}
.sso-ali-izquierda .sso-grupo-header h2 {
  flex: 1;
  text-align: left;
}
.sso-ali-centrado .sso-grupo-header {
  justify-content: center;
}
.sso-ali-centrado .sso-grupo-header h2 {
  flex: 1;
  text-align: center;
}
.sso-ali-derecha .sso-grupo-header {
  justify-content: flex-end;
}
.sso-ali-derecha .sso-grupo-header h2 {
  flex: 1;
  text-align: right;
}

/* ===== CONTENEDOR DE CARDS ===== */
.sso-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.sso-ali-centrado .sso-cards-container {
  justify-content: center;
}
.sso-ali-derecha .sso-cards-container {
  justify-content: flex-end;
}
.sso-ali-izquierda .sso-cards-container {
  justify-content: flex-start;
}

/* ===== TARJETAS ===== */
.sso-card {
  display: flex;
  min-height: 10rem;
  flex: 1 1 11rem;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.75rem;
  border: 2px solid #d4d4d4;
  background-color: #fff;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: all 0.2s ease-in-out;
}

/* Hover con efecto flotante */
.sso-card:hover {
  transform: translateY(-0.25rem);
  cursor: pointer;
  border-color: #8f0034; /* rojo vino */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}

/* ===== ESTADO INACTIVO ===== */
.sso-card.is-inactive {
  pointer-events: none;
  transform: none;
  cursor: not-allowed;
  border-color: #d4d4d4;
  opacity: 0.6;
  box-shadow: none;
}

/* ===== ICONO Y TÍTULO ===== */
.icon-wrap {
  margin-bottom: 0.125rem;
  display: flex;
  min-height: 70px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.icon-title {
  margin: 0;
  min-height: 18px;
  font-size: 2.5rem;
  font-weight: 700;
  color: #171717;
}
/* ===== ICONO Y TÍTULO ===== */
.icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
  min-height: 70px; /* asegura espacio aunque falte el título */
}

.icon-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #5a2a2a;
  margin-bottom: 6px;
  min-height: 18px; /* reserva espacio */
}

/* ===== Tamaños de íconos ===== */
.icon-sm {
  font-size: 1.5rem;
  width: 30px;
  height: 30px;
}

.icon-md {
  font-size: 2rem;
  width: 40px;
  height: 40px;
}

.icon-lg {
  font-size: 2.8rem;
  width: 55px;
  height: 55px;
}

.icon-xl {
  font-size: 3.5rem;
  width: 70px;
  height: 70px;
}

/* Íconos con imágenes */
.icon-sm img,
.icon-md img,
.icon-lg img,
.icon-xl img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Imagen por defecto si no existe */
.icon-sm img:empty,
.icon-md img:empty,
.icon-lg img:empty,
.icon-xl img:empty {
  content: url('https://via.placeholder.com/50?text=📦');
  opacity: 0.5;
}


/* ===== TEXTO DESCRIPTIVO ===== */
.sso-card .text,
.sso-card .text {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #404040;
}

/* ===== OVERRIDES POR TAMAÑO DE CARD ===== */
.sso-card-sm .icon-wrap { min-height: 2rem; }
.sso-card-sm .icon-title { font-size: 1.125rem; line-height: 1.75rem; }
.sso-card-sm .text, 
.sso-card-sm .text { font-size: 0.75rem; line-height: 1rem; }

.sso-card-md .icon-wrap { min-height: 3rem; }
.sso-card-md .icon-title { font-size: 1.25rem; }
.sso-card-md .text, 
.sso-card-md .text { margin-top: 0.5rem; font-size: 0.85rem; }

.sso-card-lg .icon-wrap { min-height: 4rem; }
.sso-card-lg .icon-title { font-size: 1.25rem; }
.sso-card-lg .text, 
.sso-card-lg .text { margin-top: 0.75rem; font-size: 1rem; }

.sso-card-xl .icon-wrap { min-height: 70px; }
.sso-card-xl .icon-title { font-size: 1.5rem; }
.sso-card-xl .text, 
.sso-card-xl .text { margin-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; }

#buddy{
    background: url(assets/img/bg/fondo9.png);
}
.btn-pdf{
    cursor:pointer;
    padding:4px;
}
.btn-trash{
  padding:4px;
  border:1px solid #BBADA9;
  background: #BBADA911;
  border-radius:0 5px 5px 0;
  box-shadow: none;
}
.btn-trash i{
  color: #96080866;
}
.btn-trash:hover i{
  color: #960808;
}
.btn-trash:hover{
  background: #BBADA955;
  transition: all 0.5s;
}
/**================= COUNTDOWN ================= **/
#t-counter{
    /*background: radial-gradient(circle, #0F1115 0%, #212224 50%, #010101 100%);*/
    padding: 10px 20px;
    min-height: 100px;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: inset 0 2px 20px #1A1624;
}
.countdown-container {
    text-align: center;
    padding:10px;
}
#countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#countdown div {
    background-color: #444;
    background: linear-gradient(145deg, #444, #44444466);
    padding: 20px;
    border-radius: 10px;
    min-width: 80px;
}
#countdown span {
    font-size: 1.5em;
    display: block;
}
#countdown p {
    margin: 0;
    font-size: 0.6em;
    color: #C0C0C0EE;
}
/**================= Estilos de Autor ================= **/
.btn-asig{
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #D9DADB22);
    i{
        color: #6D686044;
    }
}

.btn-asig:hover{
    background: linear-gradient(180deg, #aad6ffaa, #aae6ff77);
    border: 1px solid #aab7ff;
    i{
        color: #6D6860;
    }
}
.calif-null{
    color: #6D6860;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #D9DADB22);
}
.calif-baja{
    color: #FF0000;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #FF000022);
}
.calif-media{
    color: #FFD700;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #FFD70022);
}
.calif-semi{
    color: #FFA500;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #FFA50022);
}
.calif-alta{
    color: #008000;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #00800022);
}
.calif-max{
    color: #0000FF;
    border-radius: 0.5em;
    background: linear-gradient(180deg, #FFF, #0000FF22);
}
    .grid-cols-20 {
    grid-template-columns: repeat(20, 1fr);
}
/** vr clases **/
.vr-a {
  border-radius:1.2em 0 0 1.2em;
  border-left: 1px solid #eaeaea;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  background: #d9d9dd48;
  width:45%;
  font-size: 1.2em;
  box-shadow: 3px 3px 10px 0 #9393a3;
}
.vr-b {
  border-radius:0 1.5em 1.5em 0;
  border-right: 1px solid #eaeaea;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  background: #f8f8faea;
  box-shadow: 3px 3px 10px 0 #9393a3;
}
.vr-b.vr-b-pdf:hover {
  background: #e3e3e7;
  box-shadow: 3px 3px 10px 0 #9393a3;
  cursor: pointer;
  transition: all 0.3s;
}
/** switch **/
.tra--switch input[type="checkbox"]{
  justify-self: end;
  width: 38px;
  height: 20px;
  appearance:none;
  background: #22262b;
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}
.tra--switch input[type="checkbox"]::after{
  content:"";
  position:absolute; inset: 3px auto auto 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #aeb0b5ff;
  transition: transform .2s ease, background .2s ease;
}
.tra--switch input[type="checkbox"]:checked{
  background: #238d28ff; border-color:#1f5321;
}
.tra--switch input[type="checkbox"]:checked::after{
  background:#3ddc84; transform: translateX(16px);
}
@media (max-width: 768px) {
  .tra-switch-inp {
    height: 28px;
    text-align: center;
    width: 100%;
  }
}
/* ====== TARJETA (RUBRO) ====== */
.card-rubro {
  background: url('../img/bg/bg-wh-1.jpeg');
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-rubro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* ====== ENCABEZADO DEL RUBRO ====== */
.card-rubro-head {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: .75rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .5rem;
}

.card-rubro-head h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

/* ====== CRITERIOS ====== */
.criteria {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.crit {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem;
  background: #fafafa;
  transition: background .2s ease;
}
.crit:hover {
  background: #f1f5f9;
  background-image: url('../img/bg/bg-blue-3.jpeg');
  box-shadow: 0 4px 10px rgba(52, 56, 101, 0.1);
}

.crit .name {
  font-weight: 600;
  color: #5c2f8f;
  margin-bottom: .25rem;
}

.crit .desc {
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: .25rem;
}

.crit .max {
  font-size: .85rem;
  font-weight: 600;
  color: #137b5e;
  text-align: right;
}

/* ====== PIE DEL RUBRO ====== */
.card-foot {
  margin-top: .75rem;
  text-align: right;
  border-top: 1px solid #e5e7eb;
  padding-top: .5rem;
}

.card-foot .rub-total {
  font-weight: 700;
  color: #288c6c;
}

/* ====== RESPONSIVE ====== */
@media (min-width: 768px) {
  .criteria {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .crit {
    flex: 1 1 calc(50% - .75rem);
  }
}
/* ====== CONTENEDOR DE CRITERIOS ====== */
.criteria {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columnas base */
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* ====== TARJETA DE CRITERIO ====== */
.crit {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: .75rem;
  background: #fafafa;
  transition: background .2s ease;
  display: flex;
  flex-direction: column;
}


.crit .name {
  font-weight: 600;
  color: #274187;
  margin-bottom: .25rem;
}

.crit .desc {
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: .25rem;
}

.crit .max {
  font-size: .85rem;
  font-weight: 600;
  color: #047857;
  margin-top: auto;
  text-align: right;
}

/* ====== ANCHO SEGÚN PUNTAJE (span columnas) ====== */
.crit.max-1 { grid-column: span 1; }
.crit.max-2 { grid-column: span 2; }
.crit.max-3 { grid-column: span 3; }
.crit.max-4 { grid-column: span 4; }
.crit.max-5 { grid-column: span 5; }
.crit.max-6 { grid-column: span 5; }

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .criteria {
    grid-template-columns: 1fr; /* en móvil ocupa todo */
  }
}

/* ========== SIEVAL - ESTILOS REPORTE TRABAJOS ========== */
.sieval-wrap { max-width: 1100px; margin-inline: auto; }

/* Títulos / encabezados */
.sieval-section-title { display: flex; align-items: center; gap: .5rem; }

/* Tarjetas básicas */
.sieval-card { 
    background: #fff; 
    display: flex; 
    flex-direction: column; 
    gap: .75rem;
    border-radius: .5rem;
    padding: 1rem;
    border: 1px solid #e8e8e8;
    background-image: var(--sieval-bg-wh-1); 
    outline: 2px solid #22425b11;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.sieval-card-head { 
  text-align: center;
  color: lch(29.91 17.1 314.75);
}

/* KPIs */
.kpi .sieval-kpi-value { line-height: 1; }
.kpi .sieval-kpi-sub { opacity: .75; }

.sieval-tx-n1 { font-size: 6em; font-weight: 700; color: lch(39.32 10.62 34.81); }
.sieval-tx-n2 { font-size: 4em; font-weight: 700; color: lch(39.32 10.62 34.81); }
.sieval-tx-n3 { font-size: 2.5em; font-weight: 700; color: lch(39.32 10.62 34.81); }

/* Lista de depuración */
.sieval-list-linea { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sieval-list-linea li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }

/* Resumen y divisor */
.sieval-resumen { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sieval-divider { height: 1px; background: #e8e8e8; margin: .75rem 0; }

/* Buckets por categoría */
.sieval-bucket { background: #fafafa; border: 1px solid #eee; display: grid; gap: .5rem; }
.sieval-bucket-head { text-align: center; width: 100%; }
.sieval-bucket-body { display: grid; gap: .35rem; }
.sieval-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }

/* Métricas a evaluar */
.sieval-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.sieval-metric { background: #fafafa; border: 1px solid #eee; border-radius: .75rem; padding: .75rem; display: grid; gap: .25rem; justify-items: center; }
.sieval-metric-total { background: #fff; }

/* Barra apilada (usa --a y --b en %) */
.sieval-stacked { display: grid; gap: .35rem; }
.sieval-stacked-bar { position: relative; height: .75rem; background: #f3f3f3; border-radius: 999px; overflow: hidden; }
.sieval-stacked-bar .sieval-seg { position: absolute; top: 0; bottom: 0; }
.sieval-stacked-bar .sieval-seg.sp { left: 0; width: calc(var(--bar-sp, 0) * 1%); background: #95a3af; }
.sieval-stacked-bar .sieval-seg.cl { right: 0; width: calc(var(--bar-cl, 0) * 1%); background: #4B966E; }
.sieval-stacked-legend { display: flex; gap: 1rem; }

/* Tabla ligera */
.sieval-table-wrap { overflow: auto; }
.sieval-table { width: 100%; border-collapse: collapse; }
.sieval-table thead th { text-align: left; font-weight: 600; border-bottom: 2px solid #eee; padding: .5rem .25rem; }
.sieval-table tbody td { border-bottom: 1px solid #f2f2f2; padding: .5rem .25rem; }

/* Leyenda de estatus */
.sieval-legenda { background: #fff; }
.sieval-legenda-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; }
.sieval-legenda-item { display: inline-flex; align-items: center; gap: .35rem; }

/* Responsivo suave */
@media (max-width: 768px) {
    .sieval-metric-row { grid-template-columns: 1fr; }
}
/**================= modalidad switch ================= **/
.modalidad-switch .form-check-input {
  width: 3rem;      
  height: 1rem;
  cursor: pointer;
  background-color: #e0e0e0;
  border-radius: 1.5rem;
}

.toggle-icon {
  font-size: 2rem;
  line-height: 0.5rem;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.toggle-icon:hover {
  transform: translateY(-1px);
  opacity: .9;
}
.toggle-icon.fa-toggle-on  { color: #2e7d32; } 
.toggle-icon.fa-toggle-off { color: #9e9e9e; } 
/** ================= Asignación de Evaluador ================= **/
.eva-fx{
    cursor: pointer;
    border: 1px solid #6D6860;
    border-radius: 0.375rem;
    background: linear-gradient(180deg, #FFF, #D9DADB22);
    display: flex;
    justify-content: flex-start !important;
    -webkit-box-pack: start !important;
    margin-bottom: 0.5rem !important;
    padding: 0.25rem !important;
}
.eva-fx:hover{
    background: linear-gradient(180deg, #aabcffaa, #aabcff77);
}
.eva-fx[disabled], .eva-fx:disabled{
    cursor: not-allowed;
    background: #E5E5E5;
    color: #999;
}
#eva-seleccionado .eva-fx{
    transition: all 0.5s;
}
/** ================= Estilos de Evaluación ================= **/
.celda {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  padding: 9px 8px;
  font-weight: 700;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}
.celda:hover { transform: scale(1.01); }          
.celda-retro {
  cursor: pointer;
  background: #cfd6d8;
  color: #0a6a70;
  font-weight: 600;
}
.celda-retro:hover { background: #bcc6c9; }
.celda-estado { color: #fff; }
.celda-estado.calificado    { background:#28a745; }
.celda-estado.sincalificar  { background:#d3935e; }
.celda-estado.calificando   { background:#50a7b3; color:#333; }
.celda-puntos {
  padding: 5px 8px 14px 8px;
  position: relative;
  color: #f0eaeaff;
  background: hsl(var(--hsl) 70% 32%);    
  overflow: hidden;                     
}
.celda-puntos::before {
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:5px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.celda-puntos::after {
  content:"";
  position:absolute;
  left:10px; bottom:6px;
  height:5px;
  width: var(--puntos);                      
  border-radius: 999px;
  background: #ffffffff;                      
}
.pdf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#pdf-render {
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.eval-card{ 
  border-radius:0; 
  padding:3px; 
  background:#f7f8f811;
}
.eval-card h3{ margin:0 0 12px; font-weight:600; color:#6a6a6a; }
.avatar-eva-stack{
  list-style:none; 
  display:flex; 
  align-items:flex-end; 
  padding:3px 0 3px; 
  margin:0;
}
.avatar-eva{
  position:relative; 
  height: 35px;
  width: 35px;
  border-radius:0.25em; 
  background:#ffffff66; 
  box-shadow:0 0 0 2px #f7f8f8;
  overflow:hidden; 
  margin-left:-8px;
  transition:margin .18s ease, transform .18s ease, box-shadow .18s ease, z-index .18s ease;
}
.avatar-eva:first-child{ margin-left:0; }
.avatar-eva:hover{
  margin-left:0;
  margin-right:10px;
  transform:translateY(-2px);
  z-index:2;
  box-shadow:0 2px 0 6px #f7f8f8;
}
.avatar-eva .edo-eva{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; width:22px; height:22px; 
  border-radius:50%;
  background:var(--estado,#c9c9c9);
  box-shadow:0 0 0 2px #f7f8f8;   
}
.avatar-eva.sinevaluar{ --estado:#c9c9c9; }
.avatar-eva.evaluando{ --estado:#e2a20a; }
.avatar-eva.evaluado { --estado:#3bae26; }
.avatar-eva.sinevaluar .edo-eva { background:var(--estado,#c9c9c9); }
.avatar-eva.evaluando .edo-eva { background:var(--estado,#e2a20a); }
.avatar-eva.evaluado .edo-eva  { background:var(--estado,#3bae26); }