/* =====================================================================
   COMPLIANCE21 · REBRAND GLASSMORPHISM
   Archivo: rebrand-base.css  ·  Área: BASE + FONDO + LAYOUT
   ---------------------------------------------------------------------
   Re-skin por CSS sobre la plantilla UBold (CoderThemes) + Bootstrap 3.
   NO se toca HTML/JS/PHP: sólo sobrescribe estilos. Se carga DESPUÉS de
   los CSS de UBold para ganar la cascada. Selectores específicos y algún
   !important puntual donde UBold/Bootstrap pelea o hay estilo inline.
   Cubre: tokens (claro/oscuro), fondo con blobs, tipografía, #wrapper,
   topbar/navbar, sidebar (.left.side-menu / #sidebar-menu) y content-page.
   Las tarjetas, formularios, tablas, flexigrid y plugins van en otros
   ficheros de rebrand.
   ===================================================================== */

/* ===== SISTEMA DE TOKENS GLASSMORPHISM (compartido, NO cambiar los valores) ===== */
:root{
  --bg1:#eef2f8; --bg2:#f6f8fc; --bg3:#eef3f9;
  --ink:#1b2434; --ink-2:#3d475b; --muted:#6b7488;
  --glass:rgba(255,255,255,.88); --glass-2:rgba(255,255,255,.94); --glass-hi:#ffffff;
  --border:rgba(23,32,49,.10); --border-in:rgba(23,32,49,.07); --line:rgba(23,32,49,.08);
  --accent:#2f5fc7; --accent-2:#4d7ce0; --accent-soft:rgba(47,95,199,.10);
  --low:#2fa860; --mid:#dca11f; --high:#e07b2b; --crit:#d23b3b;
  --low-s:rgba(47,168,96,.13); --mid-s:rgba(220,161,31,.15); --high-s:rgba(224,123,43,.14); --crit-s:rgba(210,59,59,.13);
  --shadow:0 1px 2px rgba(23,40,80,.06), 0 10px 26px -14px rgba(23,40,80,.20);
  --shadow-sm:0 1px 2px rgba(23,40,80,.08);
  --blur:9px; --radius:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --blob-a:rgba(59,111,212,.18); --blob-b:rgba(53,184,201,.14); --blob-c:rgba(240,168,90,.12); --blob-d:rgba(120,90,220,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}}
:root[data-theme="dark"]{
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}

/* ===== Tokens propios de LAYOUT (geometría del panel flotante) =====
   No forman parte del set compartido; sólo posicionan los paneles de
   vidrio dentro del layout fijo de UBold (topbar fija + sidebar fija). */
:root{
  --gap:14px;             /* aire exterior entre paneles y borde de pantalla */
  --topbar-h:46px;        /* alto visual de la barra superior flotante      */
  --sidebar-w:226px;      /* ancho del sidebar expandido                     */
  --sidebar-w-sm:72px;    /* ancho del sidebar colapsado (.enlarged)         */
  /* carril izquierdo = ancho sidebar + hueco a cada lado */
  --rail:calc(var(--sidebar-w) + var(--gap) * 2);
  --rail-sm:calc(var(--sidebar-w-sm) + var(--gap) * 2);
}

/* =====================================================================
   1 · BASE + TIPOGRAFÍA
   ===================================================================== */
html{ height:auto; }

body{
  font-family:var(--sans) !important;
  color:var(--ink);
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3)) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  position:relative;
}

/* Respeta a quien prefiere menos movimiento (no hay animaciones de fondo,
   pero neutralizamos cualquier transición heredada agresiva) */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---- Blobs de color difuminados (le dan al vidrio algo que difuminar) ----
   Se pintan con pseudo-elementos fijos para NO tocar el HTML. z-index bajo,
   sin capturar el ratón. Cuatro focos de color como en el mockup (.blob). */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
body::before{
  background:
    radial-gradient(340px 340px at -40px -60px, var(--blob-a), transparent 72%),
    radial-gradient(320px 320px at 106% 44%, var(--blob-b), transparent 72%);
  /* sin filter:blur — el radial-gradient ya difumina y evita el repaint caro en scroll */
}
body::after{
  background:
    radial-gradient(320px 320px at 22% 110%, var(--blob-c), transparent 72%);
}

/* Enlaces (tono de marca) */
a{ color:var(--accent); }
a:hover,a:focus{ color:var(--accent-2); }

/* =====================================================================
   2 · WRAPPER (contenedor global) — transparente sobre el fondo
   ===================================================================== */
#wrapper{
  position:relative;
  /* SIN z-index: un z-index aquí crea un stacking context que atrapa los
     modales (dentro de #wrapper) por debajo del .modal-backdrop (que Bootstrap
     cuelga del <body>), y el modal se ve oscurecido / "deshabilitado".
     Los blobs de fondo ya usan z-index:-1, así que el contenido queda encima. */
  background:transparent !important;
}
.page,
.content-page{
  background:transparent !important;
}

/* =====================================================================
   3 · TOPBAR / NAVBAR — barra de vidrio flotante (como .top del mockup)
   ---------------------------------------------------------------------
   UBold la deja fija a ancho completo con fondo oscuro (#455a64).
   La convertimos en una barra flotante de vidrio en la columna derecha,
   arrancando justo después del sidebar.
   ===================================================================== */
.topbar{
  top:var(--gap) !important;
  left:var(--rail) !important;
  right:var(--gap) !important;
  height:var(--topbar-h) !important;
  background:var(--glass-2);   /* casi opaco: sin backdrop-filter para evitar jank al hacer scroll bajo la barra fija */
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  z-index:30;
  overflow:visible;            /* deja salir el dropdown del perfil */
  transition:left .22s ease;   /* acompaña al colapso del sidebar   */
}

/* La navbar interior de Bootstrap: transparente, sin fondo ni sombra propia */
.topbar .navbar-default{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  min-height:var(--topbar-h) !important;
  margin-bottom:0 !important;
}
/* El .container de Bootstrap centra y limita el ancho: lo estiramos */
.topbar .navbar-default > .container{
  width:100% !important;
  max-width:none !important;
  padding-left:14px !important;
  padding-right:12px !important;
}

/* Fila principal: menú + marca a la izquierda, acciones a la derecha */
.topbar .topbar-row{
  display:flex !important;
  align-items:center;
  gap:6px;
  height:var(--topbar-h) !important;
}
/* Botón hamburguesa como botón-icono discreto */
.topbar .button-menu-mobile{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; margin:0;
  border:0; background:transparent; border-radius:10px;
  font-size:19px; line-height:1 !important; color:var(--ink-2) !important; cursor:pointer;
  transition:background .15s, color .15s;
}
.topbar .button-menu-mobile:hover{ background:var(--glass-2); color:var(--accent) !important; }

/* Marca / enlace al sitio (icono casa + nombre de empresa) */
.topbar .topbar-brand{
  display:inline-flex !important; align-items:center; gap:8px;
  height:var(--topbar-h); padding:0 6px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink-2) !important; text-decoration:none; white-space:nowrap;
}
.topbar .topbar-brand i{ font-size:15px; color:var(--muted) !important; }
.topbar .topbar-brand:hover,
.topbar .topbar-brand:hover i{ color:var(--accent) !important; }

/* Enlaces genéricos de la barra */
.topbar a{ color:var(--ink-2) !important; }
.topbar a:hover,.topbar a:focus{ color:var(--accent) !important; }

/* Acciones a la derecha (pantalla completa + perfil) */
.topbar .topbar-actions{
  margin-left:auto !important; float:none !important;
  display:flex !important; align-items:center; gap:2px; height:var(--topbar-h);
}
.topbar .topbar-actions > li{ display:flex; align-items:center; float:none; }
.topbar .topbar-actions > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px; border-radius:10px;
  color:var(--ink-2) !important; line-height:1 !important;
  transition:background .15s, color .15s;
}
.topbar .topbar-actions > li > a:hover{ background:var(--glass-2); color:var(--accent) !important; }
#btn-fullscreen i{ font-size:15px; }
/* Avatar del perfil en la esquina */
.topbar .profile{ padding:0 4px !important; }
.topbar .profile img{
  width:32px;
  height:32px;
  border:2px solid var(--border) !important;
  box-shadow:var(--shadow-sm);
  vertical-align:middle;
  /* El logo/foto (a menudo rectangular) se muestra ENTERO dentro del círculo, sin
     deformarse ni recortarse; el fondo blanco rellena lo que sobra. contain (no cover)
     para no cortar el nombre en logos de empresa anchos. */
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:2px;
}

/* Menú desplegable del perfil (aspecto de vidrio, no el blanco plano) */
.topbar .dropdown-menu{
  background:var(--glass-hi);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:6px;
}
.topbar .dropdown-menu > li > a{
  color:var(--ink-2) !important;
  border-radius:9px;
  padding:8px 12px;
}
.topbar .dropdown-menu > li > a:hover{
  background:var(--glass-2) !important;
  color:var(--ink) !important;
}

/* =====================================================================
   4 · SIDEBAR — panel de vidrio a altura completa (como .side del mockup)
   ---------------------------------------------------------------------
   UBold lo pinta blanco/oscuro y estrecho (160px). Lo convertimos en un
   panel glass flotante, fijo, con blur, borde y radios, e items tipo
   "pill" (hover glass; activo con degradado azul y texto blanco).
   ===================================================================== */
.left.side-menu{
  position:fixed !important;
  top:var(--gap) !important;
  left:var(--gap) !important;
  bottom:var(--gap) !important;
  width:var(--sidebar-w) !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--glass-2) !important;   /* panel sólido: sin backdrop-filter (rendimiento) */
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:35;
  transition:width .22s ease, margin-left .22s ease;
}

/* Interior: scroll nativo suave (neutralizamos slimscroll para que no
   recorte el alto con su medida heredada de 160px) */
.left.side-menu .sidebar-inner{
  height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden;
  padding:8px 2px !important;
}
.left.side-menu .slimScrollDiv{
  height:100% !important;
  overflow:visible !important;
}
.left.side-menu .slimScrollBar,
.left.side-menu .slimScrollRail{ display:none !important; }

/* Barra de scroll fina y discreta */
.left.side-menu .sidebar-inner::-webkit-scrollbar{ width:6px; }
.left.side-menu .sidebar-inner::-webkit-scrollbar-thumb{
  background:var(--border-in); border-radius:99px;
}

/* --- Cabecera/brand del sidebar (Compliance21) ---
   UBold NO pinta ningún logo arriba del sidebar (el <a class="logo"> de la
   topbar está comentado en cabecera.php), así que el hueco superior queda
   vacío. Estas reglas dejan lista una cabecera de marca; para que aparezca
   hay que añadir el HTML (ver pendiente_html). */
.left.side-menu .sidebar-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 14px 13px;
  margin:0 0 4px;
  border-bottom:1px solid var(--line);
}
.left.side-menu .sidebar-brand a{ display:inline-flex; line-height:0; }
.left.side-menu .sidebar-brand img{
  max-height:30px;
  width:auto;
  max-width:100%;
}
/* En modo colapsado no cabe el logotipo horizontal: se oculta */
#wrapper.enlarged .left.side-menu .sidebar-brand{ display:none; }

#sidebar-menu{
  padding:6px 10px 20px !important;
  width:100% !important;
}
#sidebar-menu > ul{ margin:0; padding:0; }
#sidebar-menu > ul > li{ margin:0 !important; }

/* --- Item de primer nivel (pill) --- */
#sidebar-menu > ul > li > a{
  display:flex !important;
  align-items:center;
  gap:11px;
  color:var(--ink-2) !important;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  line-height:1.2 !important;
  padding:9px 12px !important;
  margin:2px 0 !important;
  border-left:0 !important;
  border-radius:11px !important;
  text-decoration:none;
  transition:background .16s, color .16s;
}
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus{
  background:var(--glass-2) !important;
  color:var(--ink) !important;
}

/* Iconos del menú: alineados, sin los márgenes originales de UBold */
#sidebar-menu ul li a i{
  margin:0 !important;
  width:18px;
  min-width:18px;
  font-size:14px;
  line-height:1;
  text-align:center;
  vertical-align:middle;
  opacity:.85;
}
#sidebar-menu > ul > li > a > span{ vertical-align:middle; }

/* --- Item ACTIVO: degradado azul + texto blanco (como .nav a.on) --- */
#sidebar-menu > ul > li > a.active,
#sidebar-menu > ul > li.active > a,
#sidebar-menu > ul > li > a.active:hover,
#sidebar-menu > ul > li.active > a:hover{
  background:linear-gradient(120deg,var(--accent),var(--accent-2)) !important;
  color:#fff !important;
  border-left:0 !important;
  box-shadow:0 6px 16px -6px var(--accent);
}
#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li.active > a i{ opacity:1; color:#fff !important; }

/* --- Submenús desplegables (.has_sub > ul) --- */
#sidebar-menu ul ul{
  padding:2px 0 6px !important;
  background:transparent !important;
}
#sidebar-menu ul ul a{
  color:var(--muted) !important;
  font-size:12px !important;
  font-weight:500;
  padding:7px 12px 7px 42px !important;   /* sangría bajo el icono padre */
  margin:1px 6px !important;
  border-radius:9px !important;
}
#sidebar-menu ul ul a:hover{
  color:var(--ink) !important;
  background:var(--glass-2) !important;
}
#sidebar-menu ul ul li.active a,
#sidebar-menu ul ul a.active{
  color:var(--accent) !important;
  background:var(--accent-soft) !important;
}
#sidebar-menu ul ul a i{ opacity:.7; margin-right:6px !important; }

/* Padre de un submenú abierto (UBold lo pinta oscuro con .subdrop) */
#sidebar-menu .subdrop,
#sidebar-menu > ul > li > a.subdrop{
  background:var(--accent-soft) !important;
  border-left:0 !important;
  color:var(--accent) !important;
}
#sidebar-menu .subdrop i{ color:var(--accent) !important; opacity:1; }

/* Etiqueta de grupo de menú (mono, mayúsculas) si alguna vista la usa */
#sidebar-menu .menu-title,
.left.side-menu .menu-title{
  font-family:var(--mono) !important;
  font-size:9px !important;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted) !important;
  padding:14px 14px 6px !important;
}

/* Avatar/logo inferior del consultor (nivel >= 1): recuadro suave */
.left.side-menu .tmLogo{
  border:2px solid var(--border) !important;
  box-shadow:var(--shadow-sm);
  /* Igual que el avatar de la topbar: el logo se ve ENTERO dentro del círculo, sin
     deformar ni recortar; el fondo blanco rellena el resto y un padding lo separa del borde. */
  border-radius:50%;
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:10px;
}

/* =====================================================================
   5 · CONTENT-PAGE — desplazado para dejar sitio al sidebar y a la topbar
   ===================================================================== */
.content-page{
  margin-left:var(--rail) !important;
  margin-right:var(--gap) !important;
  margin-top:calc(var(--gap) * 2 + var(--topbar-h)) !important;
  margin-bottom:var(--gap) !important;
  padding:0 !important;
  overflow:visible !important;
  transition:margin-left .22s ease;
}
.content-page > .content{
  margin-top:0 !important;
  margin-bottom:22px !important;
  padding:6px 6px 18px !important;
}

/* Títulos de página dentro del contenido */
.page-title,
.page-title-alt{
  color:var(--ink) !important;
  font-weight:700 !important;
  letter-spacing:-.02em;
}
.page-title-box .page-title{ margin-bottom:2px; }

/* Pie de página, si aparece */
.footer{
  background:transparent !important;
  border-top:1px solid var(--line) !important;
  color:var(--muted) !important;
  left:var(--rail) !important;
}

/* =====================================================================
   6 · SIDEBAR COLAPSADO (#wrapper.enlarged) — mini-carril
   ---------------------------------------------------------------------
   Mantiene el ancho estrecho de UBold pero con la piel de vidrio y sin
   los fondos oscuros del tema original en hover / fly-out.
   ===================================================================== */
#wrapper.enlarged .left.side-menu{
  width:var(--sidebar-w-sm) !important;
}
#wrapper.enlarged .topbar{ left:var(--rail-sm) !important; }
#wrapper.enlarged .content-page{ margin-left:var(--rail-sm) !important; }
#wrapper.enlarged .footer{ left:var(--rail-sm) !important; }

/* Hover del item colapsado (UBold lo pone #36404a): vidrio + acento */
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:focus,
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:active,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a{
  background:var(--glass-hi) !important;
  color:var(--accent) !important;
  border-color:transparent !important;
}

/* Fly-out del submenú al pasar el ratón sobre un item colapsado */
#wrapper.enlarged #sidebar-menu ul ul,
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul{
  left:calc(var(--sidebar-w-sm) + 6px) !important;
  background:var(--glass-hi) !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:var(--shadow) !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a{
  background:transparent !important;
  color:var(--ink-2) !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover{
  color:var(--accent) !important;
}

/* =====================================================================
   7 · RESPONSIVE — móvil: paneles a ancho completo, sidebar off-canvas
   ---------------------------------------------------------------------
   Debe cargarse después de responsive.css de UBold (así lo hace el link).
   En < 768px el contenido ocupa todo el ancho; el sidebar se superpone y
   se oculta deslizándose al colapsar (.enlarged), como en UBold.
   ===================================================================== */
@media (max-width:767px){
  .topbar{
    left:var(--gap) !important;
    right:var(--gap) !important;
  }
  .content-page{
    margin-left:var(--gap) !important;
    margin-right:var(--gap) !important;
    margin-top:calc(var(--gap) * 2 + var(--topbar-h)) !important;
  }
  .footer{ left:0 !important; }

  /* El sidebar se superpone por encima del contenido */
  .left.side-menu{ z-index:60 !important; }

  /* Al colapsar en móvil: se esconde entero fuera de pantalla (no mini) */
  #wrapper.enlarged .left.side-menu{
    width:var(--sidebar-w) !important;
    margin-left:calc(-1 * (var(--sidebar-w) + var(--gap) * 2)) !important;
  }
  #wrapper.enlarged .topbar{ left:var(--gap) !important; }
  #wrapper.enlarged .content-page{ margin-left:var(--gap) !important; }
}

/* =====================================================================
   8 · LOGIN (index.php) — no tiene topbar ni sidebar
   ---------------------------------------------------------------------
   La caja de acceso queda centrada sobre el mismo fondo con blobs, con
   aspecto de tarjeta de vidrio. Reglas acotadas a .wrapper-page para no
   interferir con las tarjetas del panel (que van en otro fichero).
   ===================================================================== */
.account-pages{ background:transparent !important; }

.wrapper-page{
  position:relative;
  z-index:2;
  width:92%;
  max-width:420px;
  margin:7% auto !important;
}
.wrapper-page .card-box{
  background:var(--glass-2) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:30px 28px !important;
}
.wrapper-page .panel-heading{ background:transparent !important; padding:0 0 4px; }
.wrapper-page .panel-heading h3{
  color:var(--ink) !important;
  font-weight:700 !important;
  letter-spacing:-.01em;
}
.wrapper-page .panel-body{ padding:14px 0 0; }
.wrapper-page label{ color:var(--ink-2) !important; font-weight:600; }

/* Campos del login con vidrio */
.wrapper-page .form-control{
  background:var(--glass-hi) !important;
  border:1px solid var(--border-in) !important;
  border-radius:11px !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  height:auto;
  padding:10px 13px;
}
.wrapper-page .form-control:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
.wrapper-page .form-control::-webkit-input-placeholder{ color:var(--muted); }
.wrapper-page .form-control::placeholder{ color:var(--muted); }

/* Botón de acceso con el degradado de marca (el original es .btn-pink) */
.wrapper-page .btn-pink,
.wrapper-page .btn-primary{
  background:linear-gradient(120deg,var(--accent),var(--accent-2)) !important;
  border:none !important;
  border-radius:12px !important;
  color:#fff !important;
  font-weight:600;
  box-shadow:0 8px 18px -8px var(--accent) !important;
  transition:transform .16s ease;
}
.wrapper-page .btn-pink:hover,
.wrapper-page .btn-primary:hover{ transform:translateY(-1px); }

/* En modo oscuro el logo oscuro del login necesita algo de contraste */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wrapper-page .panel-heading img{
    background:var(--glass-hi);
    border-radius:12px;
    padding:8px 12px;
  }
}
:root[data-theme="dark"] .wrapper-page .panel-heading img{
  background:var(--glass-hi);
  border-radius:12px;
  padding:8px 12px;
}