/* Fondo para TODO el body en la página de login */
body {
  background: url("/static/custom/unillanos_barcelona.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
  background-color: #f0f2f5 !important;
}

/* Panel de login legible sobre el fondo */
#loginbox .panel {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* --------- Variables de color --------- */
:root {
  --uni-primary: #E3061D;      /* rojo institucional */
  --uni-primary-dark: #b20416; /* rojo más oscuro para hover */
}

/* --------- Tipografía global --------- */
body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------- Botones --------- */
.btn-primary,
button.btn-primary,
.ant-btn-primary {
  background-color: var(--uni-primary);
  border-color: var(--uni-primary);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.ant-btn-primary:hover,
.ant-btn-primary:focus,
.ant-btn-primary:active {
  background-color: var(--uni-primary-dark);
  border-color: var(--uni-primary-dark);
  color: #ffffff;
}

/* Botones secundarios / outline (borde rojo, texto por defecto) */
.btn-secondary,
button.btn-secondary,
.btn-outline-primary,
.ant-btn-default,
.ant-btn-borderless {
  border-color: var(--uni-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.ant-btn-default:hover,
.ant-btn-default:focus {
  border-color: var(--uni-primary-dark);
}

/* Botones de peligro: rojo institucional */
.btn-danger,
.ant-btn-dangerous {
  background-color: var(--uni-primary);
  border-color: var(--uni-primary);
}

/* --------- Formularios bootstrap --------- */
.form-control,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"] {
  border-radius: 4px;
  border-color: #d0d4da;
  box-shadow: none;
}

.form-control:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus {
  border-color: var(--uni-primary);
  box-shadow: 0 0 0 0.1rem rgba(227, 6, 29, 0.25);
}

/* --------- SELECTs Ant Design (filtros laterales) --------- */
.ant-select:not(.ant-select-disabled) .ant-select-selector {
  border-radius: 4px;
  border-color: #d0d4da;
  box-shadow: none;
}

/* Borde y sombra roja cuando está enfocado o abierto */
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.ant-select-open:not(.ant-select-disabled) .ant-select-selector {
  border-color: var(--uni-primary) !important;
  box-shadow: 0 0 0 0.1rem rgba(227, 6, 29, 0.25) !important;
}

/* Hover suave en rojo para los selects */
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  border-color: var(--uni-primary);
}

/* --------- Cards (tarjetas de dashboards / charts) --------- */
.ant-card {
  border-radius: 8px;
  border-color: #e3e6ec;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* Borde / sombra roja al hacer hover o focus */
.ant-card:hover,
.ant-card:focus-within {
  border-color: var(--uni-primary);
  box-shadow: 0 0 0 1px rgba(227, 6, 29, 0.4);
}

/* --------- Tabs (solo línea activa en rojo) --------- */
.ant-tabs-ink-bar,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-color: var(--uni-primary);
  border-bottom-color: transparent;
}

/* --------- Badges --------- */
.badge-primary,
.label-primary,
.ant-tag-has-color {
  background-color: var(--uni-primary);
}

/* --------- Tablas (solo fondo encabezado y bordes) --------- */
table.table thead th {
  background-color: #f7f9fb;
  border-bottom: 2px solid #e3e6ec;
}

/* =================================================================
   ESTILOS INSTITUCIONALES UNILLANOS - DASHBOARDS
   Inspirados en https://www.unillanos.edu.co/
   ================================================================= */

/* --------- Fondo general para dashboards (menos blanco) --------- */
.dashboard,
.dashboard-content,
.grid-container,
.dashboard-grid {
  background-color: #f8f9fa;
}

/* --------- Panel lateral de filtros --------- */
[data-test="filter-bar"] {
  background-color: #ffffff;
  /* Removido: el borde puede verse como un "cuadro" extra en algunos layouts */
}

/* Título "Filtros" con acento rojo */
[data-test="filter-bar"] .css-1vhmipf > span {
  border-bottom: 2px solid var(--uni-primary);
  padding-bottom: 4px;
}

/* --------- TABS del dashboard (hover en rojo) --------- */
.ant-tabs-card .ant-tabs-tab {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.ant-tabs-card .ant-tabs-tab:hover {
  background-color: rgba(227, 6, 29, 0.08);
  border-color: var(--uni-primary);
}

.ant-tabs-card .ant-tabs-tab-active {
  background-color: #ffffff;
  border-bottom-color: var(--uni-primary) !important;
  border-top: 3px solid var(--uni-primary) !important;
}

/* Línea activa del tab en rojo */
.ant-tabs-ink-bar {
  background-color: var(--uni-primary) !important;
}

/* --------- Separadores rojos entre secciones (filas del dashboard) --------- */
.dragdroppable-row {
  border-bottom: 1px solid rgba(227, 6, 29, 0.15);
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* Quitar borde de la última fila */
.dragdroppable-row:last-child {
  border-bottom: none;
}

/* --------- Encabezados de sección --------- */
/* Removido: no afectar layout de headers */

/* --------- Charts / Gráficos con borde sutil --------- */
.dashboard-component-chart-holder {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-component-chart-holder:hover {
  border-color: rgba(227, 6, 29, 0.3);
  box-shadow: 0 2px 8px rgba(227, 6, 29, 0.1);
}

/* --------- Títulos de charts --------- */
/* Removido: mantener color original de títulos */

/* --------- Markdown / texto descriptivo --------- */
/* Removido: no afectar layout de markdown */

/* --------- Paginación de tablas --------- */
.pagination > li.active > a,
.pagination > li.active > a:hover,
.pagination > li.active > a:focus {
  background-color: var(--uni-primary);
  border-color: var(--uni-primary);
  color: #ffffff;
}

.pagination > li > a:hover {
  border-color: var(--uni-primary);
}

/* --------- Encabezado de tablas con acento rojo --------- */
table.table thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid var(--uni-primary) !important;
}

/* Filas alternas con tono muy sutil */
table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(227, 6, 29, 0.02);
}

/* --------- Tags de filtros seleccionados --------- */
.ant-select-selection-item,
.ant-tag {
  border-color: rgba(227, 6, 29, 0.3);
  background-color: rgba(227, 6, 29, 0.06);
}

/* --------- Botón "Apply Filters" --------- */
.filter-apply-button:not([disabled]) {
  background-color: var(--uni-primary) !important;
  border-color: var(--uni-primary) !important;
  color: #ffffff !important;
}

.filter-apply-button:not([disabled]):hover {
  background-color: var(--uni-primary-dark) !important;
  border-color: var(--uni-primary-dark) !important;
}

/* Nota: No se cambian colores de texto fuera de botones. */

/* --------- Encabezado del dashboard --------- */
/* Removido: no afectar layout del header */

/* --------- Big Number (números destacados) --------- */
/* Removido: mantener color original de números */

/* --------- Collapse / Acordeón de filtros --------- */
.ant-collapse-header:hover {
  /* Removido: no cambiar color de textos */
}

/* --------- Scrollbar personalizado (opcional, WebKit) --------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: rgba(227, 6, 29, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--uni-primary);
}

/* --------- Ocultar componentes vacíos (evita "cuadro" en blanco) --------- */
/* Solo aplica cuando el contenedor no tiene contenido (p.ej. <br>) */
.dashboard-markdown:has(.dashboard-component-chart-holder:empty),
.dashboard-markdown:has(.dashboard-component-chart-holder > br:only-child) {
  display: none;
}

.dashboard-component-chart-holder:empty {
  display: none;
}