:root {
  --gris1: #f8f9fa;
  --gris2: #e9ecef;
  --gris3: #dee2e6;
  --gris4: #ced4da;
  --gris5: #adb5bd;
  --gris6: #868e96;
  --gris7: #495057;
  --gris8: #343a40;
  --gris9: #212529; /*(gris_darkmode)*/

  --azul: #007bff;
  --rojo: #dc3545;
  --verde: #28a745;
  --amarillo: #ffc107;
  --naranja: #ff851b;
  --morado: #6c757d;

  --blanco: #fff;
  --negro: #000;

  --azul_rorcual: #004562;
  --azul1: #569ff7;
}

.bg_gris1{background-color: var(--gris1);}
.bg_gris2{background-color: var(--gris2);}
.bg_gris3{background-color: var(--gris3);}
.bg_gris4{background-color: var(--gris4);}
.bg_gris5{background-color: var(--gris5);}
.bg_gris6{background-color: var(--gris6);}
.bg_gris7{background-color: var(--gris7);}
.bg_gris8{background-color: var(--gris8);}
.bg_gris9{background-color: var(--gris9);}

.mw1200{max-width: 1200px; margin: auto;}
.w_full{width: 100%;}
.h_btn_floating{height: 58px;}
.cp{cursor: pointer;}
._small{font-size: 0.75rem !important;}
.__small{font-size: 0.70rem !important;}
.hover_white:hover{color: white;}

.hover_btn1:hover{
  background-color: var(--gris6) !important;
  color: var(--azul_rorcual);
}

.no_style_anchor {
    text-decoration: none; /* Quitar el subrayado */
    color: inherit;        /* Usar el color del texto heredado */
    background: none;      /* Eliminar cualquier fondo */
    border: none;          /* Eliminar bordes (si los hay) */
    padding: 0;            /* Eliminar padding si lo hay */
    margin: 0;             /* Eliminar margin si lo hay */
    cursor: pointer;      /* Cambiar el cursor si es necesario */
}

@media print {
  .no_print { display: none !important; }
  /* .print { display: block !important; } */
}

/* ***************************************** */
/* EVENTOS */
/* BUSCAR DIAGNÓSTICOS CIE10 */
/* #resultados div {
    padding: 4px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
} */
/* *************** */
#resultados {
    position: absolute;
    top: 100%; /* justo debajo del input */
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--gris9);
    color: white !important;
    border: 1px solid #495057;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* estilos de cada ítem sugerido */
#resultados div {
    padding: 8px;
    cursor: pointer;
    /* border-bottom: 1px solid #eee; */
}
/* *************** */

#resultados div:hover {
    background: var(--azul1);
}

/* *************** */

#resultados::-webkit-scrollbar {
    width: 6px;
}

#resultados::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}

#resultados::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

#resultados::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* firefox */
#resultados {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ***************************************** */
/* MODIFICACIONES BOOTSTRAP 5.3*/

/* Radios */
.form-check-input[type="radio"] {
  border-color: #444;       /* borde más oscuro */
}

.form-check-input[type="radio"]:checked {
  background-color: #222;   /* círculo interior */
  border-color: #222;       /* borde cuando está activo */
}

/* ***************************************** */
  
  .color_white{color: #fff;}
  .local:active{background-color: #5bc0de;}
  
  
  .bg_orange{background-color: orange;}
  .bg_purple{background-color: purple;}
  .bg_green{background-color: chartreuse;}
  .bg_celeste{background-color: #5bc0de;}
  
/* ***************************************** */
/* modal fondo background */
.bg-semi1{
  background-color: rgb(155, 155, 155, 0.7)
}

.modal-dialog{
  max-width: 800px;
}
/* ************************************************************** */
/* SPINNER BOOTSTRAP */
.sp1-container{
  width: 100%;
  height: 200px;
  text-align: center;
  position: relative;
}

.sp1{
  width: 200px;
  height: 100%;
  /* color: var(--negro) !important; */
  color: var(--azul_rorcual);
}

.spinner_logo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: arial, sans-serif;
  font-weight: 600;
  font-size: 60px;
  /* color: var(--gris2); */
  
  
}

/* ************************************************************** */
/* FLAT PICKR */

.flatpickr-calendar{
  border-radius: 0%;
}

.flatpickr-calendar.inline {
  /* display:block; */
  /* position:relative; */
  /* top:2px; */
  margin-left: auto;
  margin-right: auto;
  width:100%;
}

.flatpickr-rContainer{
  width: 100%;
}

.flatpickr-days{
  width: 100%;
}

.dayContainer{
  width: 100%;
  max-width: 100%;
}

.flatpickr-day{
  width: 100%;
  max-width: 100%;
}

/* para eventos de listado */
.flatpickr-day.flatpickr-disabled {
  background-color: var(--azul1) !important; /* verde Bootstrap */
  color: white !important;
  font-weight: bold;
  border-radius: 0%;
  position: relative;
}

/* Día inicial */
.flatpickr-day.event-day-start.flatpickr-disabled {
  border-top-left-radius: 15% !important;
  border-bottom-left-radius: 15% !important;

  /* border-left: #000 solid 1px; */
  /* border-top: #000 solid 1px; */
  /* border-bottom: #000 solid 1px; */
}

/* Día final */
.flatpickr-day.event-day-end.flatpickr-disabled {
  border-top-right-radius: 15% !important;
  border-bottom-right-radius: 15% !important;

  /* border-right: var(--azul_rorcual) solid 1px; */
  /* border-top: var(--azul_rorcual) solid 1px; */
  /* border-bottom: var(--azul_rorcual) solid 1px; */
}

/* .flatpickr-day.event-day.flatpickr-disabled {
  border-top: var(--azul_rorcual) solid 1px;
  border-bottom: var(--azul_rorcual) solid 1px;
} */

/* ************************************************************** */
/* DATATABLES */

/* Reducir al mínimo el margen lateral de las filas DataTables */
.dataTables_wrapper > .row {
  margin-left: 2px;
  margin-right: 2px;
}

/* Añadir un pequeño padding a las columnas internas para compensar */
.dataTables_wrapper > .row > div {
  padding-left: 0.125rem;  /* 2px */
  padding-right: 0.125rem; /* 2px */
}

.dataTables_wrapper .dt-buttons {
  margin-top: .4rem;;
}
/* Botones de exportación más chicos */
.dataTables_wrapper .dt-buttons .btn {
  /* padding: .2rem .5rem; */
  /* font-size: .8rem; */
  margin-bottom: .4rem;
}

/* Aire arriba en mobile */
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dt-buttons {
  margin-top: .8rem;
}

/* En mobile, que se apilen en vertical */
@media (max-width: 768px) {
  .dataTables_wrapper .row:last-child {
    flex-direction: column;
    align-items: stretch;
  }
  .dataTables_wrapper .row:last-child > div {
    justify-content: center !important;
    /* margin-bottom: .4rem; */
  }
}

/* espacio para la “flecha” y posición */
table.dataTable thead th {
  position: relative;
  padding-right: 1.5rem; /* espacio para el indicador */
  cursor: pointer;
}

/* Hover del header (sin espacio antes de :hover) */
table.dataTable > thead > tr > th.sorting:hover,
table.dataTable > thead > tr > th.sorting_asc:hover,
table.dataTable > thead > tr > th.sorting_desc:hover {
  background-color: #8b8b8b !important;  /* probá #eef, #eee o var(--bs-gray-100) */
  transition: background-color .12s ease-in-out;
}

/* por las dudas, que la pseudo-flecha no bloquee el hover */
table.dataTable thead th::after { pointer-events: none; }

/* estados de orden */
table.dataTable thead th.sorting:after {
  content: "⇅";
  opacity: .35;
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
}

table.dataTable thead th.sorting_asc:after {
  content: "↑";
  opacity: .85;
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
}

table.dataTable thead th.sorting_desc:after {
  content: "↓";
  opacity: .85;
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
}

.dataTables_filter input {
  border-radius: .375rem;
  border: 1px solid #ced4da;
  padding: .25rem .5rem;
}

/* ************************************************************** */
/* Mantener “Mostrar [select] registros” en una línea */
#tabla_eventos_length label {
  display: flex;
  align-items: center;
  gap: .5rem;          /* espacio entre texto, select y “registros” */
  margin: 0;
  white-space: nowrap; /* evita cortes de línea */
}

/* El select no debe ocupar todo el ancho */
#tabla_eventos_length select.form-select {
  width: auto;
  min-width: 4.5rem;   /* opcional: asegura un ancho mínimo cómodo */
}

/* Opcional: en pantallas chicas, dejá que se apile si no entra */
@media (max-width: 575.98px) {
  #tabla_eventos_length label {
    flex-wrap: wrap;
    white-space: normal;
    gap: .25rem .5rem;
  }
  #tabla_eventos_length select.form-select {
    width: 100%;
  }
}


/* Solo #tabla_empleados */
#tabla_empleados.dataTable thead th.no-sort {
  cursor: default !important;
}
#tabla_empleados.dataTable thead th.no-sort:before,
#tabla_empleados.dataTable thead th.no-sort:after {
  display: none !important;
}


/* Mantener “Mostrar [select] registros” en UNA línea para #tabla_drill2 */
#tabla_drill2_length label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  white-space: nowrap;
}
#tabla_drill2_length select.form-select {
  width: auto;
  min-width: 4.5rem;
}

/* Opcional: permitir apilar en pantallas chicas */
@media (max-width: 575.98px) {
  #tabla_drill2_length label {
    flex-wrap: wrap;
    white-space: normal;
    gap: .25rem .5rem;
  }
  #tabla_drill2_length select.form-select {
    width: 100%;
  }
}

/* **************** */
/* Mantener “Mostrar [select] registros” en UNA línea para #tabla_drill2 */
#card_eventos_salud label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 10px 0;
  white-space: nowrap;
}
#card_eventos_salud select.form-select {
  width: auto;
  min-width: 4.5rem;
}

/* Opcional: permitir apilar en pantallas chicas */
@media (max-width: 575.98px) {
  #card_eventos_salud label {
    flex-wrap: wrap;
    white-space: normal;
    gap: .25rem .5rem;
  }
  #card_eventos_salud select.form-select {
    width: 100%;
  }
}

/* **************** */
/* Mantener “Mostrar [select] registros” en UNA línea para #tabla_drill2 */
#cardAusentes label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 10px 0;
  white-space: nowrap;
}
#cardAusentes select.form-select {
  width: auto;
  min-width: 4.5rem;
}

/* Opcional: permitir apilar en pantallas chicas */
@media (max-width: 575.98px) {
  #cardAusentes label {
    flex-wrap: wrap;
    white-space: normal;
    gap: .25rem .5rem;
  }
  #cardAusentes select.form-select {
    width: 100%;
  }
}

/* ************************************************************************* */

/* 🔸 Clase para limitar altura y permitir scroll vertical en tablas */
.tabla-scroll {
  max-height: 500px;        /* Ajustá según el caso */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 🔸 Encabezado fijo opcional */
.tabla-scroll table thead th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* O el color de tu tema */
  z-index: 2;
}

/* ************************************************************************* */

/* Página actual (activo) en gris */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background-color: #6c757d !important; /* gris */
  border-color: #6c757d !important;
  color: #fff !important;
}

/* Hover de cualquier página */
.dataTables_wrapper .dataTables_paginate .page-link:hover {
  background-color: #dee2e6 !important; /* gris claro */
  border-color: #dee2e6 !important;
  color: #000 !important;
}

/* Estado normal (no activo) para mantener look gris */
.dataTables_wrapper .dataTables_paginate .page-link {
  color: #6c757d !important;
}

/* Quitar halo azul al enfocar */
.dataTables_wrapper .dataTables_paginate .page-link:focus {
  box-shadow: none !important;
}

/* (Opcional) compat con el tema “antiguo” de DT */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #fff !important;
}


/* ************************************************************************* */
  .print-wrap { max-width: 1000px; margin: 0 auto; }
  .doc-header { display:flex; gap:12px; align-items:center; border-bottom:1px solid #ddd; padding:10px 0 12px; }
  .doc-actions { margin-left:auto; }
  .badge-inactivo { background:#b02a37; color:#fff; padding:4px 8px; border-radius:6px; font-weight:600; }
  .grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:8px 16px; }
  .group-card { border:1px solid #e6e6e6; border-radius:10px; margin:12px 0; }
  .group-head { background:#f7f7f9; padding:8px 12px; font-weight:700; border-bottom:1px solid #eee; }
  .group-body { padding:10px 12px; }
  .item-row { display:flex; gap:8px; align-items:flex-start; padding:6px 0; border-bottom:1px dashed #eee; }
  .item-row:last-child { border-bottom:none; }
  .item-label { min-width:280px; font-weight:600; }
  .item-value { white-space:pre-wrap; }
  .muted { color:#666; }
  .adj-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
  .adj-card { border:1px solid #eee; border-radius:8px; padding:8px; }
  .adj-thumb { width:100%; max-height:180px; object-fit:contain; background:#fafafa; border:1px solid #eee; border-radius:6px; }
  .small { font-size: .875rem; }
  .signs { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
  .sign-box { border-top:1px solid #000; padding-top:6px; text-align:center; min-height:50px; }
  .no-print { display:block; }
  .print-note { font-size:.9rem; color:#555; margin-top:2px;}
  @media print {
    .no-print { display:none !important; }
    .print-wrap { max-width: none; }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .group-card { break-inside: avoid; }
    .adj-card { break-inside: avoid; }
  }

  svg.bi {
  width: 1.18em;
  height: 1.18em;
  vertical-align: -.190em;
  fill: currentColor; /* clave para que siga el texto */
}