/* ============================================================
   custom-tables.css
   Estilos centralizados para índices: historias, constancias,
   médicos, pacientes, plantillas, recipes.
   ============================================================ */

/* ── Encabezados de tabla ── */
.table.dataTable thead th,
.table thead th {
  background: #176d86 !important;
  color: #fff !important;
  border-bottom: none !important;
  white-space: nowrap;
}

/* ── Filas y celdas ── */
.table.dataTable tbody td,
.table tbody td {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding: .55rem .75rem !important;
  vertical-align: middle !important;
  color: #374151;
}

/* ── Hover de fila ── */
.table.dataTable tbody tr:hover td,
.table.dataTable tbody tr:hover {
  background-color: rgba(23, 109, 134, 0.06) !important;
}

/* ── Iconos de acción ── */
.table .fa-eye,
.table .fa-pen-to-square,
.table .fa-laptop-medical,
.table .fa-rectangle-list,
.table .fa-capsules {
  color: #176d86 !important;
  transition: color .15s;
}
.table .fa-eye:hover,
.table .fa-pen-to-square:hover { color: #0f5066 !important; }

/* ── Card header (barra superior de cada tarjeta) ── */
.card-table-header {
  background: #176d86;
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Etiqueta "BUSCAR" + grupo en columna ── */
.header-search-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── Etiqueta "BUSCAR" ── */
.header-search-label {
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Grupo input+botones de búsqueda (todos en la misma fila) ── */
.header-search-group {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: nowrap;
}
.header-search-group .input-group {
  max-width: 360px;
  flex: 1 1 auto;
  /* envuelve el input con borde redondeado blanco */
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
}
.header-search-group .input-group-text {
  background: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  color: #176d86;
  padding: .42rem .5rem;
  box-shadow: none !important;
}
.header-search-group .form-control {
  border: none !important;
  border-radius: 0 !important;
  padding: .42rem .6rem;
  font-size: .85rem;
  color: #0f172a;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  height: 36px;
}
.header-search-group .form-control:focus,
.header-search-group .form-control:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff !important;
}

/* ── Botón Buscar ── */
.btn-header-search {
  height: 36px;
  background: #0f4f62 !important;
  color: #fff !important;
  border: none !important;
  padding: 0 1rem !important;
  border-radius: 7px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.btn-header-search:hover { background: #0a3a4a !important; }

/* ── Botón Limpiar ── */
.btn-header-clear {
  height: 36px;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  padding: 0 1rem !important;
  border-radius: 7px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.btn-header-clear:hover { background: rgba(255,255,255,0.28) !important; }

/* ── DataTables topbar ── */
.dt-topbar {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  margin-bottom: .4rem !important;
  flex-wrap: wrap;
}

/* ── Responsivo ── */
@media (max-width: 575.98px) {
  .card-table-header { flex-direction: column; align-items: flex-start; }
  .header-search-group { flex-wrap: wrap; }
  .header-search-group .input-group { max-width: 100%; }
  .btn-header-search, .btn-header-clear { padding: .38rem .6rem !important; }
}