/* Marca IPDR Kids: tokens y acentos. Se carga DESPUES de ipdr-marca-overrides.css,
   que a su vez va después de todos los CSS de Ebenekids. No editar los CSS de Ebenekids. */

:root {
  --ipdr-azul: #0E2A4A;
  --ipdr-azul-hover: #25334A;
  --ipdr-amarillo: #FFC107;
  --ipdr-exito: #43C37B;
  --ipdr-exito-texto: #1A7A43;
  --ipdr-aviso: #FF8A00;
  --ipdr-error: #D93636;
  --ipdr-error-texto: #C42B2B;
  --ipdr-error-borde: #FF4B4B;
  --ipdr-info: #00C8F5;
  --ipdr-morado: #8A5CF6;
  --ipdr-coral: #FF7758;

  --green-800: var(--ipdr-azul);
  --green-700: var(--ipdr-azul-hover);
  --green-100: #E8F6FF;
  --green-50: #FFF9F1;
  --gray-950: #0E2A4A;
  --gray-900: #25334A;
  --gray-100: #E8F6FF;
  --primary: var(--ipdr-azul);

  --color-bg-start: #FFF9F1;
  --color-bg-mid: #F4F8FA;
  --color-bg-end: #E8F6FF;
  --color-text: #25334A;
  --color-text-muted: #5A6578;
  --color-accent: var(--ipdr-azul);
}

/* MANTENER SINCRONIZADO con el bloque [data-theme="dark"] de abajo */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-start: #0E2A4A;
    --color-bg-mid: #0E2A4A;
    --color-bg-end: #0E2A4A;
    --color-surface-glass: rgba(37, 51, 74, 0.85);
    --color-text: #E8F6FF;
    --color-text-muted: #A9B8CC;
    --color-accent: var(--ipdr-amarillo);
    --field-bg: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --color-bg-start: #0E2A4A;
  --color-bg-mid: #0E2A4A;
  --color-bg-end: #0E2A4A;
  --color-surface-glass: rgba(37, 51, 74, 0.85);
  --color-text: #E8F6FF;
  --color-text-muted: #A9B8CC;
  --color-accent: var(--ipdr-amarillo);
  --field-bg: rgba(255, 255, 255, 0.06);
}

/* Acento amarillo: siempre con texto azul (contraste 8.9:1). */
.app-menu__item.active,
.app-menu__item.active:hover,
.treeview-item.active {
  background-color: var(--ipdr-amarillo) !important;
  color: var(--ipdr-azul) !important;
}
.app-menu__item.active .app-menu__icon { color: var(--ipdr-azul) !important; }

.badge-warning, .bg-warning, .btn-warning { color: var(--ipdr-azul) !important; }
.badge-success, .bg-success, .btn-success,
.badge-info, .bg-info, .btn-info { color: var(--ipdr-azul) !important; }
.badge-danger, .bg-danger, .btn-danger { background-color: var(--ipdr-error) !important; color: #fff !important; }

.text-success { color: var(--ipdr-exito-texto) !important; }
.text-danger { color: var(--ipdr-error-texto) !important; }
.text-primary { color: var(--ipdr-azul) !important; }

.form-control:focus, .custom-select:focus {
  border-color: var(--ipdr-amarillo) !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.35) !important;
}

/* En oscuro, texto de títulos/enlaces azules pasa a texto claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .text-primary,
  :root:not([data-theme="light"]) a:not(.btn):not(.app-menu__item):not(.treeview-item):not(.nav-link) { color: var(--ipdr-amarillo) !important; }
  :root:not([data-theme="light"]) .text-success { color: #43C37B !important; }
  :root:not([data-theme="light"]) .text-danger { color: #FF6B6B !important; }
  :root:not([data-theme="light"]) .nav-tabs a.nav-link.active { color: #0E2A4A !important; }
}
:root[data-theme="dark"] .text-primary,
:root[data-theme="dark"] a:not(.btn):not(.app-menu__item):not(.treeview-item):not(.nav-link) { color: var(--ipdr-amarillo) !important; }
:root[data-theme="dark"] .text-success { color: #43C37B !important; }
:root[data-theme="dark"] .text-danger { color: #FF6B6B !important; }
:root[data-theme="dark"] .nav-tabs a.nav-link.active { color: #0E2A4A !important; }

/* Vidrio celeste (pedido del usuario 2026-10-31): barras y botones principales */
:root {
  --nav-surface: rgba(0, 200, 245, 0.22);
  --nav-border: rgba(0, 180, 230, 0.45);
  --nav-text: #0E2A4A;
  --nav-text-muted: #25334A;
  --nav-hover-bg: rgba(0, 200, 245, 0.16);
  --nav-active-bg: #FFC107;
  --nav-active-text: #0E2A4A;
  --nav-avatar-ring: rgba(0, 180, 230, 0.5);
  --nav-shadow: 0 8px 28px rgba(0, 180, 230, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nav-surface: rgba(0, 200, 245, 0.14);
    --nav-border: rgba(0, 200, 245, 0.35);
    --nav-text: #E8F6FF;
    --nav-text-muted: #A9B8CC;
    --nav-hover-bg: rgba(0, 200, 245, 0.12);
    --nav-active-bg: #FFC107;
    --nav-active-text: #0E2A4A;
    --nav-avatar-ring: rgba(0, 200, 245, 0.45);
  }
}
:root[data-theme="dark"] {
  --nav-surface: rgba(0, 200, 245, 0.14);
  --nav-border: rgba(0, 200, 245, 0.35);
  --nav-text: #E8F6FF;
  --nav-text-muted: #A9B8CC;
  --nav-hover-bg: rgba(0, 200, 245, 0.12);
  --nav-active-bg: #FFC107;
  --nav-active-text: #0E2A4A;
  --nav-avatar-ring: rgba(0, 200, 245, 0.45);
}

/* Botones principales: degradado celeste con texto azul (contraste 7.3). */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-liquid--primary,
.login-content .login-box .btn-primary {
  background-color: #00B4E6 !important;
  background-image: linear-gradient(135deg, #00D9FF, #00B4E6) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #0E2A4A !important;
}
.btn-liquid--primary,
.login-content .login-box .btn-primary {
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.8),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.4),
    inset 0 0 3px rgba(0, 0, 0, 0.35),
    0 6px 18px rgba(0, 180, 230, 0.35);
}
.btn-primary:hover,
.btn-liquid--primary:hover,
.login-content .login-box .btn-primary:hover { filter: brightness(1.05); }

/* Logos más grandes: la imagen ya viene recortada al contenido (~1.5:1). */
.app-header__brand img { height: 42px; width: auto; }
.login-head img { width: 55% !important; max-width: 220px; height: auto; }
/* Login: la tarjeta crece para que quepan el logo grande y el botón; el logo no toca el borde. */
.login-content .login-box { min-height: 500px; }
.login-content .login-box .login-head { margin-top: -4% !important; }
.login-content .login-box .login-head img { margin-bottom: 6px; }