/* ============================================================
   Estilo unificado de tablas (aplicado globalmente)
   Basado en el diseño de la bandeja certificates2.
   Se carga al final del layout para sobreescribir estilos base.
   Nota: certificates2 usa su propio scope (#certWrap) más específico,
   así que conserva su diseño sin conflictos.
   ============================================================ */

/* ---- Cabecera de tabla: azul con texto blanco ---- */
.content .table > thead > tr > th,
.content table.dataTable thead th,
.content table.datatable thead th {
  background-color: #4285f4 !important;
  color: #ffffff !important;
  border-color: #3367d6 !important;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 13px;
}

/* Quitar el subrayado/borde inferior fuerte del sort de DataTables sobre fondo azul */
.content table.dataTable thead th,
.content table.dataTable thead td {
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}

/* Filas: hover y zebra suaves */
.content .table.table-hover > tbody > tr:hover > td {
  background-color: rgba(66,133,244,.08);
}
.content table.dataTable.stripe tbody tr.odd,
.content .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(15,23,42,.02);
}

/* Bordes de celdas más suaves */
.content .table > tbody > tr > td {
  border-color: rgba(15,23,42,.06);
  vertical-align: middle;
}

/* ---- Inputs y selects con bordes redondeados (como el diseño) ---- */
/* AdminLTE fuerza border-radius:0 !important, por eso usamos !important aquí */
.content .form-control {
  border-radius: 8px !important;
}
.content .input-group > .form-control:first-child,
.content .input-group-addon:first-child { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
.content .input-group > .form-control:last-child,
.content .input-group-addon:last-child { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }

/* ---- select2: misma altura que inputs (38px) para alinear filtros ---- */
.content .select2-container--default .select2-selection--single {
  height: 38px;
  border-radius: 8px;
  border-color: #ccc;
}
.content .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
}
.content .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
}

/* ---- Controles de DataTables (buscar / mostrar / paginación) ---- */
.content .dataTables_wrapper .dataTables_filter input,
.content .dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border: 1px solid #ccc;
  height: 34px;
  padding: 2px 10px;
}
.content .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.content .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #4285f4 !important;
  border-color: #4285f4 !important;
  color: #fff !important;
}

/* ============================================================
   COLOR CORPORATIVO UNIFICADO — #4285f4
   ------------------------------------------------------------
   Las cabeceras de sección se pintaban con estilos EN LÍNEA
   (style="background-color: #3c8dbc") repartidos por 134 vistas,
   más 10 en verde (#00a65a) por deriva de copy-paste.
   Un estilo en línea solo se puede sobreescribir con !important,
   de ahí que se use aquí. Así el color vive en un único sitio en
   vez de en 144 archivos.
   ============================================================ */

:root {
  --color-corporativo: #4285f4;
  --color-corporativo-oscuro: #3367d6;
}

/* ---- Cabeceras de sección (panel) ---- */
.content .panel-primary > .panel-heading,
.content .panel-primary > .panel-heading[style] {
  background-color: #4285f4 !important;
  border-color: #4285f4 !important;
  color: #ffffff !important;
}
.content .panel-primary {
  border-color: #4285f4 !important;
}
.content .panel-primary > .panel-heading .panel-title {
  color: #ffffff !important;
}

/* ---- Cajas AdminLTE (box-primary), usadas en algunas vistas ---- */
.content .box.box-primary {
  border-top-color: #4285f4 !important;
}
.content .box.box-solid.box-primary > .box-header {
  background-color: #4285f4 !important;
  border-color: #4285f4 !important;
  color: #ffffff !important;
}

/* ---- Pestañas activas ---- */
.content .nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: #4285f4 !important;
}

/* ---- Botón primario, para que acompañe a las cabeceras ---- */
.content .btn-primary {
  background-color: #4285f4 !important;
  border-color: #3367d6 !important;
}
.content .btn-primary:hover,
.content .btn-primary:focus,
.content .btn-primary:active {
  background-color: #3367d6 !important;
  border-color: #3367d6 !important;
}

/* ---- Enlaces de paginación al pasar por encima ---- */
.content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #4285f4 !important;
  border-color: #4285f4 !important;
  color: #fff !important;
}

/* Paginación de DataTables con markup de Bootstrap (li.paginate_button.active > a).
   Es distinto del .paginate_button.current de arriba; sin esta regla la página
   activa se quedaba con el azul por defecto de Bootstrap (#337ab7). */
.content .dataTables_wrapper .pagination > li.paginate_button.active > a,
.content .dataTables_wrapper .pagination > li.paginate_button.active > a:hover,
.content .dataTables_wrapper .pagination > li.paginate_button.active > a:focus {
  background-color: #4285f4 !important;
  border-color: #4285f4 !important;
  color: #fff !important;
}
.content .dataTables_wrapper .pagination > li > a {
  color: #4285f4;
}

/* ---- Esquinas del panel ----
   El contenedor .panel redondeaba a 4px (Bootstrap) mientras que su cabecera
   lo hace a 15px (styledoctor.css). Entre ambos arcos asomaba el borde azul
   de 1px del panel, que se veía como una línea fina y deformada en las
   esquinas superiores. Se igualan los radios.

   Se evita `overflow:hidden` a propósito: recortaría los desplegables
   (select2, datepicker) que se salen del panel. */
.content .panel-primary {
  border-radius: 15px;
}
.content .panel-primary > .panel-heading {
  /* 1px menos que el panel, que es el grosor del borde: así la cabecera
     encaja justo dentro y no queda ningún hilo visible. */
  border-radius: 14px 14px 0 0 !important;
}
/* Mismo remedio en la PARTE BAJA: el último bloque del panel (cuerpo, pie o
   tabla) llegaba con esquinas rectas y dejaba asomar el hilo azul del borde
   en las esquinas inferiores. Se le redondean para que encaje con el panel. */
.content .panel-primary > .panel-body:last-child,
.content .panel-primary > .panel-footer:last-child,
.content .panel-primary > .table:last-child,
.content .panel-primary > .table-responsive:last-child {
  border-radius: 0 0 14px 14px;
}