:root, [data-bs-theme=light]{
  --bs-body-color: #444;
}
.form-control, .datatable-input, .custom-select, .dataTable-selector, .dataTable-input,
.form-control,.form-control:focus,.cols{
  color: #373737;
}


[data-pc-theme=dark] .table>:not(caption)>*>*,
[data-pc-theme=dark] .cols,
[data-pc-theme=dark] .form-control,
[data-pc-theme=dark] .form-group label,
[data-pc-theme=dark] .card-title,
[data-pc-theme=dark] .card-header,
[data-pc-theme=dark] .card-header .card-title{
  color: #dfdfdf !important;
}
[data-pc-theme=dark] .ph,
[data-pc-theme=dark] .form-text,
[data-pc-theme=dark] .form-group .form-text{
  color: #bdbdbd !important;
}
.form-control,
.form-control.bordered,
.input-group>.form-control {
  line-height: 1.1 !important;
}
.form-label {
  margin-bottom:0.2rem;
  margin-top: 0.5rem;
}
.checkbox-label input[type="checkbox"]{
  height:18px;
  width: 18px;
}
/* Normaliza checkboxes/radios planos sobre el template hospital.
   Especificidad suficiente para ganarle a ".cs_modal .modal-body input" (style1.css:1102).
   Incluye reset de .form-control: FormRender les pone esa clase (los volvía ancho completo). */
input[type="checkbox"], input[type="radio"],
.cs_modal .modal-body input[type="checkbox"],
.cs_modal .modal-body input[type="radio"]{
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0 6px 0 0;
  border: 0;
  box-shadow: none;
  background: none;
  display: inline-block;        /* gana al display:block de .form-control (Bootstrap) */
  vertical-align: middle;
  transform: none;
  accent-color: #9b8fff;
  -webkit-appearance: auto;
  appearance: auto;
  cursor: pointer;
}
/* Form de FormRender: checkbox + label en línea y alineado con los campos vecinos
   (que llevan su label arriba). Markup: .form-group > input[type=checkbox] + label.
   Se incluye la variante .cs_modal .modal-body para ganarle a style1.css. */
.form-group input[type="checkbox"] + label,
.cs_modal .modal-body .form-group input[type="checkbox"] + label{
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  font-weight: inherit;
}
.form-group:has(> input[type="checkbox"]),
.cs_modal .modal-body .form-group:has(> input[type="checkbox"]){ padding-top: 1.9rem; }
.card .card-header{
  padding: 10px 10px !important;
  background-color: rgba(12, 24, 55, 0.05);
}
.card .card-header .card-title{
  font-size: 18px;
  font-weight: 600;
}
.card .card-tool-opt {
  display: flex;
  flex-wrap: wrap;       /* por si hay muchos elementos */
  gap: 2px;           /* separación uniforme */
  align-items: end;   /* alineación vertical perfecta */
  justify-content: flex-end;
}

.card-tool-opt .form-control,
.card-tool-opt .btn {
  height: 34px;          /* misma altura (38px es la de Bootstrap input-sm/md) */
  padding: 7px 0.75rem;    /* padding consistente */
}

select.form-control,
select.datatable-input,
select.custom-select,
select.dataTable-selector,
select.dataTable-input{
  background-position-x: calc(100% - 2px);
  padding-right: 22px !important;
}
.modal-dialog button.close {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0px;
  color: #2e2e2e;
  background-color: #dadada !important;


}



.table.ontrclick tbody tr:hover{
  background-color: rgba(80, 255, 88, 0.37) !important;
}
.modal-body{
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(255, 255, 255, 0.5) !important;
  --bs-table-striped-bg: rgba(220, 220, 220, 0.3) !important;
}
body[data-pc-theme='dark'] .table-striped tbody tr:nth-of-type(odd),
body[data-pc-theme='dark'] .table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(255, 255, 255, 0.05) !important;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.1) !important;
}
tr.col0-danger td.cols.col0{
  background-color: #e38888;
  border-left: 4px solid #dc3545;
  color: #57171d;
  font-weight: bold;
  padding-left: 8px;
}
tr.col0-success td.cols.col0{
  background-color: #82bf85;
  border-left: 4px solid #28a745;
  color: #0d3716;
  font-weight: bold;
  padding-left: 8px;
}
tr.col0-info td.cols.col0{
  background-color: #00bbd3;
  border-left: 4px solid #007687;
  color: #002d32;
  font-weight: bold;
  padding-left: 8px;
}
tr.col0-gray td.cols.col0{
  background-color: #9fabb1;
  border-left: 4px solid #6c757d;
  color: #17191b;
  font-weight: bold;
  padding-left: 8px;
}
[data-pc-theme=dark] tr.col0-danger td.cols.col0{
  background-color: #a52834;
  border-left: 4px solid #7a1d26;
}
[data-pc-theme=dark] tr.col0-success td.cols.col0{
  background-color: #208337;
  border-left: 4px solid #11491e;
}
[data-pc-theme=dark] tr.col0-info td.cols.col0{
  background-color: #007f91;
  border-left: 4px solid #004d57;
}
[data-pc-theme=dark] tr.col0-gray td.cols.col0{
  background-color: #6c757d;
  border-left: 4px solid #43484c;
}
.align-center{
  text-align: center;
}

/** CARD V2 **/
.card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.card-title {
  margin-bottom: 0.75rem;
  width: 100%;
}

.card-tools {
  width: 100%;
}
@media (min-width: 768px) {
  .card-header {
    flex-direction: row;
    align-items: center;
  }

  .card-title {
    flex: 0 0 auto;
    margin-bottom: 0;
    width: auto;
    max-width: 300px; /* Opcional */
  }

  .card-tools {
    margin-left: auto;
    width: auto;
  }
}
/** CARD V2 **/
.modal.show{
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
}
@media (min-width: 576px) {
  .modal-dialog.modal-lg {
    max-width: 900px;
    width: 95%;
  }
}