/**
 * Overrides de apariencia sobre Color Admin: radios, sombras y enfoque accesible.
 * Cargar siempre después de app.min.css
 */
:root {
  --inv-radius-sm: 6px;
  --inv-radius-md: 10px;
  --inv-radius-lg: 14px;
  --inv-radius-xl: 18px;
  --inv-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
  --inv-shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.06);
  --inv-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.06);
  --inv-focus-ring: 0 0 0 3px rgba(27, 31, 35, 0.35);
  --inv-transicion: 0.15s ease;
  /* Paginación: alineada con btn-inverse (negro); tamaño se refina en tema-paginacion-override */
  --inv-pag-radius: 5px;
  --inv-pag-active-bg: #272b2e;
  --inv-pag-active-fg: #fff;
  --inv-pag-border: #d0d7de;
  --inv-pag-bg: #fff;
  --inv-pag-fg: #272b2e;
  --inv-pag-fg-hover: #1a2229;
  --inv-pag-bg-hover: #f0f4f7;
  --inv-pag-disabled-fg: #8a949c;
  --inv-pag-disabled-bg: #f5f6f7;
  --inv-pag-focus: rgba(114, 123, 131, 0.4);
}

/* Solo lectores de pantalla: etiquetas requeridas por accesibilidad */
#page-container .sr-only,
#formAcceso .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shell: barra y lateral — aspecto más suave */
#page-container.page-header-fixed .header,
#page-container .header {
  box-shadow: var(--inv-shadow-header);
  border-radius: 0 0 var(--inv-radius-md) var(--inv-radius-md);
}

#page-container .sidebar,
#page-container .sidebar .nav > li > a,
#page-container .nav-header {
  transition: background-color var(--inv-transicion), color var(--inv-transicion);
}

#page-container .sidebar {
  border-top-right-radius: var(--inv-radius-md);
  border-bottom-right-radius: var(--inv-radius-md);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04);
}

/* Contenido: dejamos el recuadro al panel, no a la región .content completa */

#page-container .panel,
#page-container .widget {
  border-radius: var(--inv-radius-lg);
  box-shadow: var(--inv-shadow-panel);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

#page-container .panel-heading,
#page-container .widget-header {
  border-radius: var(--inv-radius-lg) var(--inv-radius-lg) 0 0;
}

/* Formularios globales (módulos autenticados) */
#page-container .form-control {
  border-radius: var(--inv-radius-md);
  transition: box-shadow var(--inv-transicion), border-color var(--inv-transicion);
}

#page-container .form-control:focus {
  box-shadow: var(--inv-focus-ring);
  outline: 0;
}

#page-container .btn,
#page-container a.btn {
  border-radius: var(--inv-radius-md);
  transition: background-color var(--inv-transicion), color var(--inv-transicion), box-shadow var(--inv-transicion);
}

#page-container .btn:focus,
#page-container a.btn:focus {
  outline: 0;
  box-shadow: var(--inv-focus-ring);
}

#page-container .btn-lg {
  border-radius: var(--inv-radius-md);
}

/* Dropdown y scroll */
#page-container .dropdown-menu {
  border-radius: var(--inv-radius-md);
  box-shadow: var(--inv-shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0;
}

#page-container .dropdown-item {
  border-radius: var(--inv-radius-sm);
  margin: 0 0.25rem;
  padding: 0.4rem 0.75rem;
  width: auto;
}

#page-container .btn-scroll-to-top,
#page-container a.btn.btn-scroll-to-top {
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Navbar móvil */
.navbar-toggle,
#page-container .navbar-header {
  border-radius: var(--inv-radius-sm);
}

/* --- Login (pantalla pública) --- */
.login-with-news-feed .news-feed .news-image,
.login-with-news-feed .news-caption {
  border-radius: 0;
}

.login-with-news-feed .right-content,
.login .right-content {
  background: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
  border-top-right-radius: var(--inv-radius-xl);
  border-bottom-right-radius: var(--inv-radius-xl);
}

@media (min-width: 768px) {
  .login-with-news-feed {
    border-radius: var(--inv-radius-xl);
    overflow: hidden;
  }

  .login-with-news-feed .news-image {
    border-top-left-radius: var(--inv-radius-xl);
    border-bottom-left-radius: var(--inv-radius-xl);
  }
}

/* En móvil el formulario a veces se apila: radios en todo el recuadro */
@media (max-width: 767.98px) {
  .login-with-news-feed .right-content,
  .login .right-content {
    border-radius: var(--inv-radius-lg);
    box-shadow: var(--inv-shadow-soft);
  }
}

.login .login-header .brand,
.login .login-content {
  border-radius: 0 0 0 0;
}

/* Campos e ingreso: más redondeo y respiro */
#formAcceso .form-control,
.login .form-control,
.login .form-control.form-control-lg {
  border-radius: var(--inv-radius-md);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--inv-transicion), border-color var(--inv-transicion);
}

#formAcceso .form-control:focus,
.login .form-control:focus {
  box-shadow: var(--inv-focus-ring);
  outline: 0;
  border-color: #3d8bfd;
}

#acceder.btn,
#formAcceso .btn,
.login .btn-lg {
  border-radius: var(--inv-radius-md);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform var(--inv-transicion), box-shadow var(--inv-transicion);
}

#acceder:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

#acceder.is-loading {
  cursor: wait;
  opacity: 0.88;
}

#acceder:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Fila con toggle de contraseña */
#formAcceso .inv-clave-fila {
  position: relative;
  margin-bottom: 15px;
}

#formAcceso .inv-clave-fila .form-control,
#formAcceso .inv-clave-fila .inv-input-con-toggle {
  padding-right: 3.25rem;
}

#formAcceso .inv-btn-ver-clave {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  background: rgba(0, 0, 0, 0.04);
  color: #444;
  width: 2.25rem;
  height: 2.25rem;
  line-height: 1;
  border-radius: var(--inv-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--inv-transicion), color var(--inv-transicion);
}

#formAcceso .inv-btn-ver-clave:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #111;
}

#formAcceso .inv-btn-ver-clave:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.4);
}

/* Separador sutil bajo el form */
#formAcceso hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Dashboard inicio: dos paneles de gráficas con la misma altura */
#page-container .inv-dashboard-graficas-row {
  align-items: stretch;
}

#page-container .inv-dashboard-graficas-row > [class*="col-"] {
  display: flex;
}

#page-container .inv-dashboard-panel {
  flex: 1 1 auto;
  min-height: 100%;
}

#page-container .inv-dashboard-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Evita que flex + contenido del canvas provoquen altura sin tope (bucle de redibujado) */
  min-height: 0;
}

#page-container .inv-dashboard-chart-host {
  /* Altura fija: min-height + flex-grow con Chart.js(maintainAspectRatio:false) dispara crecimiento infinito */
  flex: 0 0 auto;
  height: clamp(380px, 42vh, 620px);
  max-height: 620px;
  width: 100%;
  overflow: hidden;
  position: relative;
}