/* =========================
   BASE / TIPOGRAFÍA
   ========================= */
html, body { overflow-x: hidden; }
body { background: #E6E6DB; }
h2{ color:#747474; font-size:1.5rem; font-weight:400; }
h3{ color:#004C14; font-weight:bolder; font-size:1rem !important; }

/* =========================
   SIDEBAR (ESCRITORIO)
   ========================= */
.sidebar{
  background:#004C14; color:#fff; border-radius:10px;
  height:500px; margin-left:15px; width:160px; margin-top:100px;
}
.sidebar a{ color:#fff; text-decoration:none; }
.sidebar .nav-link.active{
  font-weight:bold; background:rgba(255,255,255,0.1);
  border-left:#fff solid 4px; margin:8px; padding:5px; border-radius:0 5px 5px 0;
}
.sidebar .nav-link:hover{ color:#13C045; }
.logoACHS{ width:176px; height:73px; flex-shrink:0; aspect-ratio:176/73; margin:15px 15px; }

/* =========================
   HEADER / BRANDING
   ========================= */
.app-header{ background:#13C045; padding:1rem; margin-left:30%; border-radius:0 0 0 90px; }
.encabezado{ color:#fff; text-align:right; font-family:"ACHS Nueva Sans","Arial"; font-size:1.2rem; font-weight:600; }
.t-seccion{ color:#FFF; text-align:right; font-family:"ACHS Nueva Sans","Arial"; font-size:1.2rem; font-weight:300; }
.t-seccion.subtitulo{ font-size:1.1rem; font-weight:600; color:#033f57; margin-left:auto; }

/* =========================
   BOTONES
   ========================= */
.btn{
  text-transform:uppercase; background:#13C045; border:none; color:#FFF;
  cursor:pointer; border-radius:.5rem; padding:.3rem .7rem;
}
.btn:hover{ background:#0d481d; color:#FFF; }
.btn2{
  text-transform:uppercase; background:#004C14; border:none; color:#FFF;
  cursor:pointer; border-radius:.5rem; padding:.3rem .7rem; text-decoration:none;
}
.btn2:hover{ background:rgb(1,6,2); color:#FFF; }
.btn3{
  text-transform:uppercase; background:#900B09; border:none; color:#FFF;
  cursor:pointer; border-radius:.5rem; padding:.3rem .7rem; text-decoration:none;
}
.btn3:hover{ background:#4e0302; color:#FFF; }

/* =========================
   VARIOS
   ========================= */
.salir::before{ content:url("img/salir-ico.svg"); }
.circulo{ background:#13C045; color:#fff; text-decoration:none; }
.circulo-inactivo{ background:#787878; color:#fff; text-decoration:none; }
.progress{ background:#cfcfcf; }
.progress-text{ font-size:12px; padding-bottom:15px; }
.main-contenido{ padding-left:180px; padding-right:10px; }
.card{ background-color:transparent; }
.recuadro-relleno{ background:#BFDDC7; padding:10px; color:#004C14; }
.recuadro{ border:#068629 solid 2px; padding:10px; margin:15px; border-radius:0 8px 0 8px; }
thead{ border:#B3B3B3 solid 1px; border-bottom-color:#13C045; text-transform:uppercase; }
.page-link{ color:#004C14; }
.active>.page-link,.page-link.active{ background-color:#198754; }
.page-link2{ color:#004C14; text-decoration:underline; }
.page-link:hover,.colorverde{ color:#01a42d; }
.table>:not(caption)>*>*{ background-color:transparent; }
.recuadro-blanco{
  background:#fff; width:250px; height:250px; flex-shrink:0;
  padding:50px 20px 20px; color:#004613; margin:30px; text-decoration:none; text-align:center;
}
.accordion-button:not(.collapsed){
  color:var(--bs-accordion-active-color); background:#f3f3f3;
  box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.info{
  text-transform:uppercase; background:#86b694; color:#FFF;
  border-radius:50px; padding:.08rem .45rem; margin-left:5px; text-decoration:none;
}
.form-check-input:checked{ background-color:#01a42d; border-color:#01a42d; }
.form-check-input:indeterminate{ background-color:#13c045 !important; border-color:#13c045 !important; }

/* No toques los checkboxes normales */
.form-check:not(.form-switch) .form-check-input:checked{
  background-color:#01a42d;
  border-color:#01a42d;
}

/* Switch Bootstrap */
.form-switch .form-check-input:checked{
  background-color:#01a42d;   /* mantiene el background-image del knob */
  border-color:#01a42d;
}




/* =========================
   FONDO ILUSTRACIÓN
   ========================= */
.bg{
  background-image:url("/static/img/ilustracionfondo.svg") !important;
  background-position:left bottom !important;
  background-attachment:fixed !important;
  background-size:auto !important;
  background-repeat:no-repeat !important;
}

/* =========================
   FORMULARIOS
   ========================= */
.form-signin{ max-width:330px; padding:15px; }
.form-signin .form-floating:focus-within{ z-index:2; }
.form-signin input[type="email"]{ margin-bottom:-1px; border-bottom-right-radius:0; border-bottom-left-radius:0; }
.form-signin input[type="password"]{ margin-bottom:10px; border-top-left-radius:0; border-top-right-radius:0; }

/* =========================
   NAVBAR / OFFCANVAS MÓVIL
   ========================= */
.bg-achs{ background-color:#004C14 !important; }
.brand-logo{ height:28px; width:auto; }
.brand-logo-sm{ height:22px; width:auto; }
.navbar-spacer{ height:56px; }
.mobile-menu{ background:#004C14; color:#ecf2ff; }
.mobile-menu .modal-header,.mobile-menu .modal-footer{ background:#004C14; color:#ecf2ff; }
.mobile-menu .btn-close{ filter: invert(1) grayscale(100%); }
.mobile-nav .nav-link{ color:#ecf2ff; font-weight:500; padding:.75rem .5rem; border-radius:.5rem; }
.mobile-nav .nav-link:hover{ background:rgba(255,255,255,0.08); }
.mobile-nav .nav-link.active{ color:#a7ce32; background:rgba(167,206,50,0.12); }

/* =========================
   TABLAS EN ACORDEÓN
   (scroll X en contenedor;
    scroll Y del documento)
   ========================= */

/* Viewports: scroll horizontal; NO atrapar scroll vertical */
.sucursales-viewport,
.results-viewport,
.users-viewport,
.table-viewport{
  overflow-x:auto;
  overflow-y:visible !important;
  max-height:none !important;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
  contain:none !important;
}

/* Tablas: ancho “de escritorio” y nowrap (para forzar scroll X si hace falta) */
.sucursales-table,
.results-table,
.users-table,
.table-viewport > table{
  width:max-content;
  min-width:980px;
  table-layout:auto;
  white-space:nowrap;
}

/* Cabecera sticky con el scroll del documento (y dentro del viewport si este tiene overflow-y) */
.sucursales-table thead th,
.results-table thead th,
.users-table thead th,
.table-viewport > table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#fff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* En escritorio, permitir que los viewports se abran y las tablas ocupen 100% si cabe */
@media (min-width:992px){
  .sucursales-viewport,
  .results-viewport,
  .users-viewport,
  .table-viewport{ overflow-x:visible; }
  .sucursales-table,
  .results-table,
  .users-table,
  .table-viewport > table{ width:100%; }
}

/* Ajustes móviles generales del layout */
@media (max-width:991.98px){
  .logoACHS, .sidebar{ display:none !important; }
  .main-contenido{ padding-left:10px !important; padding-right:10px; margin-left:0 !important; }
  .app-header{ margin-left:0 !important; border-radius:0 0 0 60px; }
  .navbar-spacer{ height:56px; }
  .container, .container-fluid{ padding-left:16px; padding-right:16px; }
  .bg{ overflow-y:auto !important; }
}

/* Que los contenedores del acordeón puedan encogerse sin empujar */
.empresas-list,
.empresas-list .accordion-item,
.empresas-list .accordion-collapse,
.empresas-list .accordion-body{ min-width:0; }

/* En layouts flex, habilita encogimiento del main */
.main-contenido{ min-width:0; }

/* =========================
   MODALES & SCROLL
   ========================= */
.modal{ overscroll-behavior:contain; }
body.modal-open{ overflow:hidden; }

/* Lock scroll robusto (iOS incluido) */
body.scroll-locked{
  position:fixed; width:100%; overflow:hidden;
}

/* El modal no debe “arrastrar” el fondo */
.modal, .modal-dialog, .modal-content{ overscroll-behavior:contain; }

/* Si el modal es scrollable, que el scroll se quede adentro */
.modal-dialog-scrollable .modal-body{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* En iOS el tooltip puede quedar “colgado”; no sobre el backdrop */
.modal-backdrop ~ .tooltip{ display:none !important; }

/* Quitar margen superior en escritorio para las filas de participantes */
@media (min-width: 768px) {
  .participante-row {
    margin-top: 0 !important;
  }
}


.btn-iniciada{
    background-color: #ffffff;
    color: #01a42d;
    border: #01a42d 1px solid;
    padding: 5px 30px;
}
.btn-iniciada:hover{
    background-color: #e7ffed;
    color: #01a42d;
    border: #01a42d 1px solid;
    padding: 5px 30px;
}
.btn-pendiente{
    background-color: #D9D9D9;
    color: #B3B3B3;
    border: #B3B3B3 1px solid;
    padding: 5px 25px;
}
.btn-pendiente:hover{
    background-color: #cbcdd4;
    color: #B3B3B3;
    border: #B3B3B3 1px solid;
    padding: 5px 25px;
}
.btn-finalizada{
    background-color: #37ac33;
    color: #ffffff;
    padding: 5px 25px;
}
.btn-finalizada:hover{
    background-color: #13b80d;
    color: #ffffff;
    padding: 5px 25px;
}
.hora-dia{
    font-size: 10px;
    color: #858585;
    font-family: Arial, Helvetica, sans-serif;
}