@import url("https://fonts.google.com/specimen/Roboto?query=roboto");
:root {
  --cyan-50: #E0FCFF;
  --cyan-100: #BEF8FD;
  --cyan-200: #87EAF2;
  --cyan-300: #54D1DB;
  --cyan-400: #38BEC9;
  --cyan-500: #2CB1BC;
  --cyan-600: #14919B;
  --cyan-700: #0E7C86;
  --cyan-800: #0A6C74;
  --cyan-900: #044E54;

  --blue-cyan-700: #003a52;

  --gray-50: #F9FAFC;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D3D6;
  --gray-400: #A0A3A6;
  --gray-500: #717171;
  --gray-600: #525456;
  --gray-700: #3F4144;
  --gray-800: #2D2E30;
  --gray-900: #1A1B1C;

  --white: #FFFFFF;
  --black: #000000;

  --border-gray: #E5E7EB;
  --border-gray-light: #C3C6C9;
  --border-gray-dark: #9B9B9B;
  --border-gray-extra-light: #878787;
  --border-gray-extra-dark: #636363;
  --border-gray-extra-extra-light: #4F4F4F;
  --border-gray-extra-extra-dark: #323232;
  --border-gray-extra-extra-extra-dark: #212121;
  --border-gray-extra-extra-extra-lightest: #1F1F1F;
  --border-gray-extra-extra-extra-lightestest: #0F0F0F;

  --primary: #107C8C;
  --secondary: #F9C23C;
  --success: #34C363;
  --warning: #FFB822;
  --danger: #E74C3C;
  --info: #3498DB;
  --light: #F9F9F9;
  --dark: #343A40;
  --text-muted: #636363;
  --text-primary: #107C8C;
  --text-secondary: #636363;
  --text-light: #FFFFFF;

  --text-dark: #343A40;
  --text-white: #FFFFFF;
  --text-body: #212529;
  --text-lighter: #F8F9FA;

  --fill: #a972cb;
  --pulse: #ef6eae; 
  --close: #ff7f82; 
  --raise: #ffa260; 
  --up: #e4cb58; 
  --slide: #8fc866; 
  --offset: #19bc8b;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}

footer {
  height: 80px;
  max-height: 80px;
  min-height: 80px;
  margin-top: auto;
  display: flex;
  justify-content: center;
}

input[type="text"] , input[type="password"] , input[type="checkbox"] , input[type="radio"] , input[type="search"] , input[type="date"] , input[type="datetime-local"] , textarea, select  {
  outline: none;
}

@import url('./reset.css');
@import url('./sidebar.css');
@import url('./auth-form.css');
@import url('./footer.css');


.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--fill);
}

.fill-success {
  transition: all 0.6s !important; /* Transición de 1s para color y box-shadow */
  color:var(--text-primary)
}

.fill-success:hover,
.fill-success:focus {
  box-shadow: inset 0 0 0 2em var(--slide) !important;
  color:#fff !important;
}

.backdrop-overlay::after {
  position: fixed;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  content: '';
}

.main_container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 106vh;
  position: relative;
  width: 100%;
  min-width: 320px;
}

.calendar-links .icon-badge {
  background-color: #e94949;
  color: #ffffff;
  font-size: 10px;
  border-radius: 50%;
  padding: 2px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(0%,0%);
  width: 15px;
  height: 15px;
  text-align: center;
}

/* Overlay menu */
@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateX(10px);
  }

  to {
      opacity: 1;
      transform: translateX(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
}

/* Modal alert animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideIn {
  from { transform: translateY(-10%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-10%); opacity: 0; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.3s ease forwards;
}

.animate-slideIn {
  animation: slideIn 0.3s ease forwards;
}

.animate-slideOut {
  animation: slideOut 0.3s ease forwards;
}

/* HTML: <div class="loader"></div> */

.excel-loader {
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader {
  width: 60px;
  height: 60px;
  margin: 50px auto;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#00b8e6 90%,#00000000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

@media print {
  @page {
    size: landscape;
  }
  body {
    background-color: white;
  }

  table {
      box-shadow: none;
      margin-bottom: 0;
  }

  table thead

  thead th {
      background-color: #ddd;
      color: black;
      -webkit-print-color-adjust: exact;
  }

  table thead th {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem; /* Asegura legibilidad en pantallas pequeñas */
    font-weight: 600; /* Negrita para resaltar los encabezados */
    color: #2D3748; /* Color oscuro para contraste */
}

  /* Estilo para el cuerpo de las tablas */
  table tbody td {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem; /* Tamaño más pequeño pero aún legible */
      font-weight: 400; /* Regular para no sobrecargar la tabla */
      color: #4A5568; /* Color gris para facilitar la lectura */
  }

  tbody tr td.buttons , tbody tr td div.buttons {
    display: none;
  }

  tbody tr td:last-child , tbody tr td div:last-child{
      display:none;
  }

  .badge {
      color: white !important;
      -webkit-print-color-adjust: exact;
  }

  .badge-admin {
      background-color: #007bff !important;
  }

  .badge-tecnico {
      background-color: #17a2b8 !important;
  }

  .badge-gestor {
      background-color: #28a745 !important;
  }

  .toggle {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #007bff !important;
      border-radius: 4px;
      cursor: pointer;
      -webkit-print-color-adjust: exact;
  }

  .action-icons {
      display: none; /* Hide action icons during print */
  }
  body * {
      visibility: hidden;
  }
  #manage_log_sessions_table, #manage_log_sessions_table * {
      visibility: visible;
  }
  #manage_users_table, #manage_users_table * {
    visibility: visible;  
  }
  #manage_warns_table, #manage_warns_table * {
  visibility: visible;
  }
  #manage_log_sessions_table,
  #manage_users_table,
  #manage_warns_table {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
  }
}

/* Datatables */
/* Input and Select Styling */
.dataTable tbody tr td:first-child {
  position: relative;
  
}
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_filter input {
    color: #4a5568; /* text-gray-700 */
    padding: 0.5rem 1rem; /* pl-4, pr-4, pt-2, pb-2 */
    line-height: 1.25; /* leading-tight */
    border-width: 2px; /* border-2 */
    border-radius: 0.25rem; /* rounded */
    border-color: #edf2f7; /* border-gray-200 */
    background-color: #edf2f7; /* bg-gray-200 */
}

/* Row Hover */
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: #ebf4ff; /* bg-indigo-100 */
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
}
/* Pagination Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-weight: 700; /* font-bold */
    border-radius: 0.25rem; /* rounded */
    border: 1px solid transparent; /* border border-transparent */
    padding: 5px 10px;
    margin: 2px;
    background-color: #f9fafb;
    color: #4a5568;
    margin: 0 5px; /* Add spacing between pagination buttons */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:first-child{
  flex-grow:0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:last-child{
  flex-grow:0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important; /* text-white */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06); /* shadow */
    background: #667eea !important; /* bg-indigo-500 */
    border: 1px solid transparent; /* border border-transparent */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important; /* text-white */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06); /* shadow */
    background: #667eea !important; /* bg-indigo-500 */
    border: 1px solid transparent; /* border border-transparent */
}

/* Pagination Buttons - Disabled */
.dataTables_paginate .paginate_button.disabled {
    color: #cbd5e0;
    cursor: not-allowed;
}

/* Pagination Arrow Buttons */
.dataTables_paginate .paginate_button.previous, .dataTables_paginate .paginate_button.next {
    font-size: 16px;
}

/* Bottom Border Styling */
table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0; /* border-b-1 border-gray-300 */
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* Change Colour of Responsive Icon */
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
    background-color: #667eea !important; /* bg-indigo-500 */
}

/* Button Styles */
.btn {
    margin-right: 5px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: inline-flex;
    align-items: center;
}

.btn i {
    margin-right: 5px;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

.title-wrapper {
  flex: 1;
}

#modal_tabla_taaf_incidencias {
  min-height: 300px; /* Ajusta según la altura mínima que desees */
  min-width: 500px;  /* Ajusta según el ancho mínimo que desees */
  max-width: 90%;    /* Para hacerlo responsivo en pantallas pequeñas */
}

#table_incidencias th {
  text-align: center;
}

#table_incidencias tbody tr:nth-child(even) {
  background-color: #ffffff; /* Color claro (bg-gray-100) */
}

#table_incidencias tbody tr:nth-child(odd) {
  background-color: #edf2f7; /* Color más oscuro (bg-gray-200) */
}

#table_incidencias tbody tr:hover {
  background-color: #f9fafb; /* Color oscuro (bg-gray-200) */
}

.truncate {
  max-width: 150px; /* Ajusta según necesites */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrap-text {
  word-wrap: break-word;
  white-space: normal;
}

/* .button-wrapper {
  display: flex;
  flex-grow: 1 !important;
} */

.search-wrapper {
  flex: 1;
  text-align: right;
}

.search-wrapper input {
  background: white !important;
}

.dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dataTables_filter input {
  margin-left: 5px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ced4da;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #009fc7;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0088a3;
}
::-webkit-scrollbar-thumb:active {
  background: #0ec3db;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}