*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
display: flex; flex-direction: column;
height: 100vh; height: 100dvh; overflow: hidden;
padding-bottom: var(--dock-h, 0px);
transition: padding-bottom .2s ease;
}
#app-loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--bg);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 20px;
transition: opacity .35s ease;
}
#app-loader.done { opacity: 0; pointer-events: none; }
.apl-brand {
font-size: 28px; font-weight: 800;
background: linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
letter-spacing: -.5px;
}
.apl-track {
width: 200px; height: 3px;
background: var(--border); border-radius: 99px; overflow: hidden;
}
.apl-bar {
height: 100%; width: 0; border-radius: 99px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
animation: apl-fill 1.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes apl-fill {
0%   { width: 0;   }
60%  { width: 75%; }
100% { width: 88%; }
}
.apl-sub { font-size: 12px; color: var(--muted); letter-spacing: .3px; }
[data-bs-theme="dark"] {
--bs-body-bg: #000000;
--bs-body-color: #e9edef;
--bs-secondary-color: #b0bec5;
--bs-border-color: #1f2c33;
--bs-tertiary-bg: #0d1418;
--bs-primary: #2563eb;
--bs-primary-rgb: 37,99,235;
--accent2: #60a5fa;
--sidebar: #000000;
--sidebar-hover: #0d1418;
--header: #000000;
--bs-card-bg: #0d1418;
--bs-modal-bg: #0d1418;
--bs-list-group-bg: #0d1418;
--card: #0d1418;
--surface: #111c22;
--hover: #162028;
}
[data-bs-theme="dark"] .table-light {
--bs-table-bg: #0d1418;
--bs-table-striped-bg: #111c22;
--bs-table-hover-bg: #162028;
--bs-table-color: #e9edef;
--bs-table-border-color: #1f2c33;
}
[data-bs-theme="light"] {
--bs-body-bg: #f1f5f9;
--bs-body-color: #0f172a;
--bs-secondary-color: #374151;
--bs-border-color: #d1d9e0;
--bs-tertiary-bg: #f8fafc;
--bs-primary: #2563eb;
--bs-primary-rgb: 37,99,235;
--accent2: #60a5fa;
--sidebar: #ffffff;
--sidebar-hover: #e8edf3;
--header: #ffffff;
--bs-card-bg: #ffffff;
--bs-modal-bg: #ffffff;
--bs-list-group-bg: #ffffff;
--card: #ffffff;
--surface: #f8fafc;
--hover: #e8edf3;
}
[data-bs-theme="light"] .card { --bs-card-bg: #ffffff; }
[data-bs-theme="light"] .list-group { --bs-list-group-bg: #ffffff; }
[data-bs-theme="light"] .table { --bs-table-bg: #ffffff; }
[data-bs-theme="dark"] .card { --bs-card-bg: #0d1418; }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: #0d1418; }
[data-bs-theme="light"] .offcanvas { --bs-offcanvas-bg: #ffffff; }
[data-bs-theme="dark"] .offcanvas { --bs-offcanvas-bg: #0d1418; }
[data-bs-theme] {
--bg: var(--bs-body-bg);
--text: var(--bs-body-color);
--muted: var(--bs-secondary-color);
--border: var(--bs-border-color);
--accent: var(--bs-primary);
--accent-rgb: var(--bs-primary-rgb);
--input-bg: var(--bs-tertiary-bg);
}
:root {
--vidrio-blur: 28px;
--vidrio-sat:  180%;
--vidrio-op-barra:    26%;
--vidrio-op-dock:     45%;
--vidrio-op-lateral:  55%;
--vidrio-op-isla:     62%;
--vidrio-op-flotante: 78%;
--vidrio-op-sin-blur: 95%;
--vidrio-op-interior: 60%;
--mac-claro-hsl: 240, 24%, 100%;
--mac-oscuro-hsl: 240, 3%, 11%;
--mac-fuente: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
--menu-radio:      .5rem;
--menu-relleno:    .5rem;
--menu-ancho-min:  16rem;
--menu-blur:       25px;
--menu-tam:        .8125rem;
--menu-sombra: 0 0 11px rgba(0,0,0,.3);
}
[data-bs-theme="dark"] {
--mac-claro-hsl: 240, 3%, 11%;
--mac-oscuro-hsl: 240, 24%, 100%;
--menu-sombra: 0 0 11px rgba(0,0,0,.3),
inset 0 0 0 .9px hsla(var(--mac-oscuro-hsl), .3),
0 0 0 1.2px hsla(var(--mac-claro-hsl), .3);
}
:root.con-wallpaper.wp-fondo-oscuro {
--mac-claro-hsl: 240, 3%, 11%;
--mac-oscuro-hsl: 240, 24%, 100%;
--menu-sombra: 0 0 11px rgba(0,0,0,.3),
inset 0 0 0 .9px hsla(var(--mac-oscuro-hsl), .3),
0 0 0 1.2px hsla(var(--mac-claro-hsl), .3);
}
:root.con-wallpaper.wp-fondo-claro {
--mac-claro-hsl: 240, 24%, 100%;
--mac-oscuro-hsl: 240, 3%, 11%;
--menu-sombra: 0 0 11px rgba(0,0,0,.3);
}
[data-acento="azul"]     { --bs-primary: #2563eb; --bs-primary-rgb: 37,99,235;   --accent2: #60a5fa; --accent-fg: #fff; }
[data-acento="indigo"]   { --bs-primary: #4f46e5; --bs-primary-rgb: 79,70,229;   --accent2: #818cf8; --accent-fg: #fff; }
[data-acento="morado"]   { --bs-primary: #7c3aed; --bs-primary-rgb: 124,58,237;  --accent2: #a78bfa; --accent-fg: #fff; }
[data-acento="rosa"]     { --bs-primary: #db2777; --bs-primary-rgb: 219,39,119;  --accent2: #f472b6; --accent-fg: #fff; }
[data-acento="rojo"]     { --bs-primary: #dc2626; --bs-primary-rgb: 220,38,38;   --accent2: #f87171; --accent-fg: #fff; }
[data-acento="naranja"]  { --bs-primary: #ea580c; --bs-primary-rgb: 234,88,12;   --accent2: #fb923c; --accent-fg: #fff; }
[data-acento="amarillo"] { --bs-primary: #eab308; --bs-primary-rgb: 234,179,8;   --accent2: #facc15; --accent-fg: #1f2937; }
[data-acento="verde"]    { --bs-primary: #059669; --bs-primary-rgb: 5,150,105;   --accent2: #34d399; --accent-fg: #fff; }
[data-acento="cian"]     { --bs-primary: #0891b2; --bs-primary-rgb: 8,145,178;   --accent2: #22d3ee; --accent-fg: #fff; }
[data-acento="cafe"]     { --bs-primary: #92400e; --bs-primary-rgb: 146,64,14;   --accent2: #d97706; --accent-fg: #fff; }
[data-acento="gris"]     { --bs-primary: #475569; --bs-primary-rgb: 71,85,105;   --accent2: #94a3b8; --accent-fg: #fff; }
.btn-primary {
--bs-btn-bg: var(--accent);
--bs-btn-border-color: var(--accent);
--bs-btn-color: var(--accent-fg, #fff);
--bs-btn-hover-color: var(--accent-fg, #fff);
--bs-btn-active-color: var(--accent-fg, #fff);
--bs-btn-disabled-color: var(--accent-fg, #fff);
--bs-btn-hover-bg: color-mix(in srgb, var(--accent) 86%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 86%, #000);
--bs-btn-active-bg: color-mix(in srgb, var(--accent) 76%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--accent) 76%, #000);
--bs-btn-disabled-bg: var(--accent);
--bs-btn-disabled-border-color: var(--accent);
--bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
.btn-outline-primary {
--bs-btn-color: var(--accent);
--bs-btn-border-color: var(--accent);
--bs-btn-hover-bg: var(--accent);
--bs-btn-hover-border-color: var(--accent);
--bs-btn-hover-color: var(--accent-fg, #fff);
--bs-btn-active-bg: var(--accent);
--bs-btn-active-border-color: var(--accent);
--bs-btn-active-color: var(--accent-fg, #fff);
--bs-btn-disabled-color: var(--accent);
--bs-btn-disabled-border-color: var(--accent);
--bs-btn-focus-shadow-rgb: var(--accent-rgb);
}
#shell[data-bs-theme] { color: var(--bs-body-color); }
#shell[data-bs-theme="light"] .card       { --bs-card-bg: #ffffff; }
#shell[data-bs-theme="light"] .list-group { --bs-list-group-bg: #ffffff; }
#shell[data-bs-theme="light"] .table      { --bs-table-bg: #ffffff; }
#shell[data-bs-theme="light"] .offcanvas  { --bs-offcanvas-bg: #ffffff; }
#shell[data-bs-theme="dark"]  .card       { --bs-card-bg: #0d1418; }
#shell[data-bs-theme="dark"]  .list-group { --bs-list-group-bg: #0d1418; }
#shell[data-bs-theme="dark"]  .offcanvas  { --bs-offcanvas-bg: #0d1418; }
#shell[data-bs-theme="dark"]  .table      { --bs-table-bg: var(--bs-body-bg); }
#shell[data-bs-theme="dark"]  .table-light {
--bs-table-bg: #0d1418;
--bs-table-striped-bg: #111c22;
--bs-table-hover-bg: #162028;
--bs-table-color: #e9edef;
--bs-table-border-color: #1f2c33;
}
#shell[data-bs-theme="light"] .table-light {
--bs-table-bg: #f8f9fa;
--bs-table-striped-bg: #ecedee;
--bs-table-hover-bg: #e5e6e7;
--bs-table-color: #000;
--bs-table-border-color: #c6c7c8;
}
#shell[data-bs-theme="light"] .ventana-barra {
background: linear-gradient(180deg, #f6f7f9, #e9ecef);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#shell[data-bs-theme="dark"] .ventana-barra {
background: linear-gradient(180deg, #2a3038, #21262c);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#shell[data-bs-theme="dark"] .ce-cal-menu-pop { box-shadow: 0 8px 24px rgba(0,0,0,.55); }
#shell[data-bs-theme="light"] .ce-cal-menu-pop { box-shadow: 0 8px 24px rgba(0,0,0,.18); }
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--bs-body-bg); }
::-webkit-scrollbar-thumb      { background: var(--bs-border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--sidebar-hover); }
.nip-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
}
.nip-card {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 16px; padding: 40px 36px; width: 340px;
box-shadow: 0 24px 64px rgba(0,0,0,.65); text-align: center;
}
.nip-icon {
font-size: 28px; margin-bottom: 14px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nip-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.nip-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
.nip-sub strong { color: var(--text); }
.nip-input {
width: 100%; padding: 12px; border-radius: 8px;
border: 1px solid var(--border); background: var(--input-bg);
color: var(--text); font-size: 28px; font-weight: 700;
text-align: center; letter-spacing: 14px; outline: none;
margin-bottom: 14px; transition: border-color .2s;
}
.nip-input:focus { border-color: var(--accent); }
.nip-error { color: #fc6565; font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.nip-cancel {
display: block; width: 100%; background: none; border: none;
color: var(--muted); font-size: 13px; cursor: pointer; margin-top: 10px;
padding: 6px; border-radius: 6px; transition: color .15s;
}
.nip-cancel:hover { color: var(--text); }
.lock-overlay {
position: fixed; inset: 0; z-index: 1100;
background: rgba(0,0,0,.82);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
display: flex; align-items: center; justify-content: center;
}
.lock-card {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 20px; padding: 36px 32px; width: 100%; max-width: 360px;
box-shadow: 0 32px 80px rgba(0,0,0,.55); text-align: center;
animation: lock-in .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lock-in {
from { transform: scale(.88); opacity: 0; }
to   { transform: scale(1);   opacity: 1; }
}
.lock-avatar {
width: 76px; height: 76px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px; overflow: hidden;
}
.lock-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.lock-avatar > span { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
.lock-name { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.lock-subtitle { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.lock-hint { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.lock-logout-btn { color: #ef4444 !important; }
.lock-logout-btn:hover { color: #dc2626 !important; }
.lock-logout-icon {
font-size: 32px; color: #ef4444; margin-bottom: 16px;
}
@supports (corner-shape: squircle) {
:where(
.btn, .card, .modal-content, .offcanvas, .dropdown-menu, .toast,
.alert, .list-group, .form-control, .form-select, .input-group-text,
.nav-pills .nav-link, .accordion-item, .popover, .progress,
#shell.shell--ventana, .dh-dock,
.dh-dock-menu, .dh-desk-menu, .user-menu, .menubar-menu,
.welcome-search-box, .festivo-chip, .cta-segbtn, .wp-muestra,
.usrd-card, .usrd-kpi, .sp-card, .sp-btn, .dh-plan-btn, .welcome-panel
) { corner-shape: squircle; }
:where(.rounded-pill, .rounded-circle, .badge, .spinner-border) { corner-shape: round; }
}
#shell { flex: 1; min-height: 0; display: flex; overflow: hidden; }
#shell.shell--ventana {
margin: var(--marco);
border-radius: 18px;
background: var(--card);
padding-top: var(--ventana-barra-h, 38px);
box-shadow:
0 0 0 1px rgba(15, 23, 42, .10),
inset 0 1px 0 rgba(255, 255, 255, .85),
0 6px 14px -6px rgba(15, 23, 42, .22),
0 26px 60px -14px rgba(15, 23, 42, .38);
}
#shell.shell--ventana[data-bs-theme="light"] {
--bs-body-bg: #ffffff;
--bg: #ffffff;
}
body.has-ventana {
background: #b9c7da;
background: linear-gradient(155deg, #ccd7e6 0%, #b0c0d5 50%, #93a6c0 100%);
}
[data-bs-theme="dark"] body.has-ventana {
background: #0a0f14;
background: linear-gradient(155deg, #131b23 0%, #0a0f14 48%, #04070a 100%);
}
[data-bs-theme="dark"] #shell.shell--ventana {
box-shadow:
0 0 0 1px rgba(255, 255, 255, .09),
inset 0 1px 0 rgba(255, 255, 255, .06),
0 6px 14px -6px rgba(0, 0, 0, .60),
0 26px 60px -14px rgba(0, 0, 0, .75);
}
#shell.shell--ventana {
transform-origin: 50% 50%;
transition: transform .40s cubic-bezier(.22, 1, .36, 1),
opacity   .26s ease .06s,
visibility 0s;
}
#shell.shell--ventana.shell--oculta {
transform: translate(var(--min-dx, 0px), var(--min-dy, 60vh))
scale(var(--min-escala, .06));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform .40s cubic-bezier(.55, 0, .85, .35),
opacity   .18s ease .22s,
visibility 0s linear .40s;
}
@media (prefers-reduced-motion: reduce) {
#shell.shell--ventana,
#shell.shell--ventana.shell--oculta { transition: opacity .12s linear, visibility 0s; }
#shell.shell--ventana.shell--oculta { transform: none; }
}
@media (max-width: 1200px) {
#shell.shell--ventana { border-radius: 14px; }
}
@media (max-width: 767.98px) {
#shell.shell--ventana { margin: 0; border-radius: 0; box-shadow: none; }
}
#shell { position: relative; }
.ventana-barra {
position: absolute; top: 0; left: 0; right: 0; z-index: 4;
height: var(--ventana-barra-h, 38px);
display: flex; align-items: center; padding: 1px 12px 0; gap: 10px;
background: linear-gradient(180deg, #f6f7f9, #e9ecef);
border-bottom: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
transition: background-color .3s ease, border-color .3s ease;
user-select: none;
}
[data-bs-theme="dark"] .ventana-barra {
background: linear-gradient(180deg, #2a3038, #21262c);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ventana-luces { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ventana-luz {
flex: 0 0 auto; width: 12px; height: 12px; padding: 0;
border: none; border-radius: 999px; cursor: pointer;
box-shadow: inset 0 0 0 .5px rgba(0,0,0,.20), 0 1px 1px rgba(0,0,0,.14);
display: flex; align-items: center; justify-content: center;
font-size: 7px; line-height: 1;
transition: filter .15s, transform .12s;
}
.ventana-luz--roja  { background: linear-gradient(180deg, #ff6459, #ec4a3f); color: rgba(88,0,0,.75); }
.ventana-luz--ambar { background: linear-gradient(180deg, #ffbd2e, #efa30e); color: rgba(90,52,0,.78); }
.ventana-luz--verde { background: linear-gradient(180deg, #4ad964, #21b73b); color: rgba(0,60,12,.78); }
.ventana-luz > i { opacity: 0; transition: opacity .12s; }
.ventana-luces:hover .ventana-luz > i,
.ventana-luz:focus-visible > i { opacity: 1; }
.ventana-luz:hover { filter: brightness(1.07); }
.ventana-luz:active { transform: scale(.90); }
.ventana-titulo {
position: absolute; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 7px;
max-width: calc(100% - 160px); pointer-events: none;
font-size: 12.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden;
line-height: 16px;
}
.ventana-titulo-logo,
.ventana-titulo-glifo {
width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
object-fit: contain;
}
.ventana-titulo-logo { background: none; }
.ventana-titulo-glifo {
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 8px;
}
.ventana-titulo-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ventana-titulo-org { color: var(--muted); font-weight: 500; }
@media (max-width: 767.98px) {
.ventana-barra { display: none; }
#shell.shell--ventana { padding-top: 0; }
}
#shell.shell--ventana.shell--max {
margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
#login-screen { flex: 1; overflow-y: auto; }
:root {
--header-h: 30px;
--marco: 10px;
}
header {
height: var(--header-h); background: var(--header); border-bottom: 1px solid var(--border);
display: flex; align-items: center; padding: 0 10px; gap: 0; flex-shrink: 0;
transition: background-color .3s ease, border-color .3s ease;
}
header .menubar-app,
header .header-icon-btn,
header .header-ctx-btn,
header .header-search-btn,
header .brand-btn,
header .notif-btn,
header .header-login-btn,
header .header-user-chip {
height: var(--header-h); padding: 0 .5rem;
font-family: var(--mac-fuente);
font-size: .8rem; font-weight: 500; letter-spacing: .3px;
border-radius: .25rem;
position: relative; z-index: 1;
}
header button.menubar-app::after,
header .header-icon-btn::after,
header .header-ctx-btn::after,
header .header-search-btn::after,
header .brand-btn::after,
header .notif-btn::after,
header .header-login-btn::after,
header .header-user-chip::after {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit;
background-color: hsla(var(--mac-oscuro-hsl), .2);
transform: scale(0); transform-origin: 50%;
transition: transform .1s;
}
header button.menubar-app:hover::after,
header .menubar-app--on::after,
header .header-icon-btn:hover::after,
header .header-icon-btn.active::after,
header .header-ctx-btn:hover::after,
header .header-ctx-btn--on::after,
header .header-search-btn:hover::after,
header .brand-btn:hover::after,
header .brand-btn.active::after,
header .notif-btn:hover::after,
header .header-login-btn:hover::after,
header .header-user-chip:hover::after,
header .header-user-chip.open::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
header .header-icon-btn::after, header .header-ctx-btn::after,
header .header-search-btn::after, header .brand-btn::after, header button.menubar-app::after,
header .notif-btn::after, header .header-login-btn::after,
header .header-user-chip::after { transition: none; }
}
header .header-login-btn {
display: flex; align-items: center; gap: .4rem;
text-decoration: none; white-space: nowrap;
color: inherit; background: none; border: 0;
}
header .header-login-btn:hover { color: inherit; }
header .header-ctx { gap: 4px; }
header .header-user-chip { gap: 4px; }
header .avatar--sm { width: 20px; height: 20px; font-size: 9px; }
header .notif-badge {
top: 1px; right: -1px;
min-width: 12px; height: 12px; font-size: 8px; padding: 0 3px;
box-shadow: 0 0 0 1.5px var(--header);
}
header { position: relative; background: transparent; }
header::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: var(--header);
background: color-mix(in srgb, var(--header) var(--vidrio-op-barra), transparent);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
transition: background-color .3s ease;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
header::before { background: color-mix(in srgb, var(--header) var(--vidrio-op-sin-blur), transparent); }
}
body.ventana-max { --header-asa: 6px; }
body.ventana-max > header {
position: fixed; left: 0; right: 0; z-index: 1030;
top: calc(var(--header-asa) - var(--header-h));
overflow: hidden;
transition: top .22s cubic-bezier(.22,1,.36,1), background-color .3s ease, border-color .3s ease;
}
body.ventana-max > header:hover,
body.ventana-max > header:focus-within,
body.ventana-max.header-abierto > header { top: 0; overflow: visible; }
body.ventana-max > header::after {
content: ''; position: absolute; bottom: 0; left: 50%;
width: 108px; height: var(--header-asa); margin-left: -54px;
border-radius: 0 0 var(--header-asa) var(--header-asa);
background: rgba(0, 0, 0, .3);
background: color-mix(in srgb, var(--text) 30%, transparent);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
transition: opacity .18s ease;
pointer-events: none;
}
body.ventana-max > header:hover::after,
body.ventana-max > header:focus-within::after,
body.ventana-max.header-abierto > header::after { opacity: 0; }
@media (max-width: 767.98px) {
body.ventana-max > header { position: relative; top: auto; overflow: visible; }
body.ventana-max > header::after { content: none; }
}
header.sticky-top:has(.offcanvas.show, .offcanvas.showing, .offcanvas.hiding) {
z-index: 1045;
}
leyéndolo del propio hero, así cada solución usa su color. */
body.hero-merge.hero-at-top:not(.hero-en-barra) header {
background-color: var(--hero-solid, #5E17EB);
border-bottom-color: transparent;
box-shadow: none;
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .brand-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-icon-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .notif-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-verified,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-login-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-user-arrow,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-search-label { color: #fff; }
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-search-kbd {
background: rgba(255,255,255,.9); color: #1a1a1a;
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-search-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-help-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-icon-btn,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .notif-btn {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.35);
color: #fff; box-shadow: none; animation: none;
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-search-btn i,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-help-btn i,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-icon-btn i,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .notif-btn i { color: #fff; }
body.hero-merge.hero-at-top:not(.hero-en-barra) header .notif-badge {
box-shadow: 0 0 0 1.5px var(--hero-solid, #5E17EB);
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-search-btn:hover,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-help-btn:hover,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-icon-btn:hover,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-icon-btn.active,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .notif-btn:hover,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-btn:hover {
background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.7); color: #fff;
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-btn {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.35);
color: #fff; box-shadow: none;
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-btn--on,
body.hero-merge.hero-at-top:not(.hero-en-barra) header .header-ctx-btn--on i {
color: #fff; border-color: rgba(255,255,255,.35);
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .btn-outline-primary {
color: #fff; border-color: rgba(255,255,255,.65);
}
body.hero-merge.hero-at-top:not(.hero-en-barra) header .btn-outline-primary:hover {
background: #fff; color: var(--accent); border-color: #fff;
}
body.hero-merge.hero-at-top.hero-en-barra #shell .ventana-barra {
background-image: none;
background-color: var(--hero-solid, #5E17EB);
border-bottom-color: transparent;
box-shadow: none;
}
body.hero-merge.hero-at-top.hero-en-barra .ventana-titulo { color: #fff; }
body.hero-merge.hero-at-top.hero-en-barra .ventana-titulo-org { color: rgba(255,255,255,.75); }
.toggle-btn {
background: none; border: none; cursor: pointer; color: var(--muted);
padding: 6px; border-radius: 6px; display: flex; align-items: center;
transition: background .15s, color .15s;
}
.toggle-btn:hover { background: var(--sidebar-hover); color: var(--text); }
.menubar-item {
position: relative;
align-self: stretch; display: flex; align-items: center;
}
header .menubar-app {
flex-shrink: 0; margin: 0 6px 0 0; padding: 0 .5rem;
display: flex; align-items: center;
border: 0; background: none; color: inherit;
font-family: var(--mac-fuente);
font-size: .8rem; font-weight: 600; letter-spacing: .3px;
white-space: nowrap;
}
header button.menubar-app { cursor: pointer; }
.brand-btn {
display: flex; align-items: center; justify-content: center;
border: 0; background: none; border-radius: 6px; cursor: pointer;
color: var(--text);
}
.brand-ico {
display: block; width: 17px; height: 17px; background: currentColor;
-webkit-mask: url(/assets/favicons/panel360.png) center / contain no-repeat;
mask: url(/assets/favicons/panel360.png) center / contain no-repeat;
}
.menubar-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 1030;
min-width: 220px; white-space: nowrap;
}
.menubar-menu--der { left: auto; right: 0; }
.menubar-menu.ctrlc {
min-width: 322px;
padding: 12px; display: flex; flex-direction: column; gap: 10px;
background: hsla(var(--mac-claro-hsl), .45);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
border: 1px solid rgba(255, 255, 255, .40);
border-radius: 18px;
box-shadow:
0 12px 40px rgba(0,0,0,.22),
0 2px 10px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.menubar-menu.ctrlc { background: hsla(var(--mac-claro-hsl), .95); }
}
.menubar-menu.sobre-claro,
.dh-dock-menu.sobre-claro,
.dh-desk-menu.sobre-claro,
.user-menu.sobre-claro,
.welcome-panel.sobre-claro,
.mobile-bottom-nav.sobre-claro,
.cta-aside.sobre-claro,
.ce-admin-sidebar.sobre-claro {
--mac-claro-hsl: 240, 24%, 100%;
--mac-oscuro-hsl: 240, 3%, 11%;
}
.menubar-menu.sobre-oscuro,
.dh-dock-menu.sobre-oscuro,
.dh-desk-menu.sobre-oscuro,
.user-menu.sobre-oscuro,
.welcome-panel.sobre-oscuro,
.mobile-bottom-nav.sobre-oscuro,
.cta-aside.sobre-oscuro,
.ce-admin-sidebar.sobre-oscuro {
--mac-claro-hsl: 240, 3%, 11%;
--mac-oscuro-hsl: 240, 24%, 100%;
}
.ctrlc-card {
background: hsla(var(--mac-oscuro-hsl), .07);
border-radius: 14px; padding: 10px 12px 12px;
}
.ctrlc .user-menu-label {
padding: 0 2px 7px; font-size: .64rem; font-weight: 600;
letter-spacing: .07em; text-transform: uppercase;
color: hsla(var(--mac-oscuro-hsl), .55);
}
.ctrlc-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ctrlc-pill {
display: flex; align-items: center; gap: 8px;
padding: 5px 12px 5px 5px; border: 0; border-radius: 999px;
background: hsla(var(--mac-oscuro-hsl), .07);
color: hsla(var(--mac-oscuro-hsl), .85);
font-family: var(--mac-fuente);
font-size: .74rem; font-weight: 500; letter-spacing: .1px;
cursor: pointer; text-align: left;
transition: background .15s, color .15s, transform .1s;
}
.ctrlc-pill-ic {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: hsla(var(--mac-oscuro-hsl), .12);
font-size: .78rem; transition: background .15s, color .15s;
}
.ctrlc-pill:hover { background: hsla(var(--mac-oscuro-hsl), .14); color: hsla(var(--mac-oscuro-hsl), 1); }
.ctrlc-pill:active { transform: scale(.97); }
.ctrlc-pill.active {
background: hsla(var(--mac-oscuro-hsl), .14);
color: hsla(var(--mac-oscuro-hsl), 1); font-weight: 600;
}
.ctrlc-pill.active .ctrlc-pill-ic {
background: var(--accent); color: #fff;
box-shadow: 0 1px 4px hsla(var(--mac-oscuro-hsl), .3);
}
.ctrlc-fondos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctrlc-fondo {
display: flex; flex-direction: column; gap: 5px;
padding: 0; border: 0; background: none; cursor: pointer;
font-family: var(--mac-fuente);
}
.ctrlc-fondo-mini {
position: relative; height: 46px; border-radius: 9px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 .9px hsla(var(--mac-oscuro-hsl), .14);
transition: transform .12s, box-shadow .15s;
}
.ctrlc-fondo-mini > i {
font-size: .85rem; color: #fff; opacity: .9;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.ctrlc-fondo:hover .ctrlc-fondo-mini { transform: scale(1.04); }
.ctrlc-fondo:active .ctrlc-fondo-mini { transform: scale(.97); }
.ctrlc-fondo.active .ctrlc-fondo-mini {
box-shadow: 0 0 0 2px var(--accent), 0 2px 8px hsla(var(--mac-oscuro-hsl), .25);
}
.ctrlc-fondo-tx {
font-size: .66rem; font-weight: 500; letter-spacing: .1px;
color: hsla(var(--mac-oscuro-hsl), .6);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctrlc-fondo.active .ctrlc-fondo-tx { color: hsla(var(--mac-oscuro-hsl), 1); font-weight: 600; }
.ctrlc-fondo-ok {
position: absolute; right: 3px; bottom: 3px;
width: 15px; height: 15px; border-radius: 999px;
display: none; align-items: center; justify-content: center;
background: var(--accent); color: #fff; font-size: .5rem;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ctrlc-fondo.active .ctrlc-fondo-ok { display: flex; }
.ctrlc-fondo-mini.mini-NUBES {
background:
radial-gradient(ellipse 60% 45% at 28% 68%, rgba(255,255,255,.95), transparent 60%),
radial-gradient(ellipse 55% 40% at 72% 40%, rgba(255,255,255,.85), transparent 62%),
linear-gradient(180deg, #6fb0e6, #bfe0f7);
}
.ctrlc-fondo-mini.mini-PECES {
background:
radial-gradient(ellipse 70% 50% at 50% 110%, rgba(125,232,214,.55), transparent 65%),
linear-gradient(180deg, #0d4f6e, #17909b);
}
.ctrlc-fondo-mini.mini-PUNTOS {
background-color: #2b3a51;
background-image:
radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.4px),
linear-gradient(180deg, #35465f, #1e2a3d);
background-size: 9px 9px, auto;
}
.ctrlc-fondo-mini.mini-ESTRELLAS {
background-color: #0b1026;
background-image:
radial-gradient(rgba(255,255,255,.85) .9px, transparent 1.2px),
radial-gradient(ellipse 70% 60% at 70% 20%, rgba(120,150,255,.35), transparent 70%),
linear-gradient(180deg, #131a3d, #070a1a);
background-size: 13px 13px, auto, auto;
}
.ctrlc-fondo-mini.mini-AURORA {
background:
radial-gradient(ellipse 65% 55% at 30% 85%, rgba(52,211,153,.75), transparent 65%),
radial-gradient(ellipse 60% 50% at 75% 65%, rgba(167,139,250,.7), transparent 68%),
linear-gradient(180deg, #0a1030, #10203f);
}
.ctrlc-fondo-mini.mini-NINGUNO {
background-color: hsla(var(--mac-oscuro-hsl), .1);
background-image: repeating-linear-gradient(-45deg,
hsla(var(--mac-oscuro-hsl), .09) 0 5px, transparent 5px 10px);
}
.ctrlc-fondo-mini.mini-NINGUNO > i {
color: hsla(var(--mac-oscuro-hsl), .55); text-shadow: none; opacity: 1;
}
.ctrlc-wp {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 12px; text-decoration: none;
background: hsla(var(--mac-oscuro-hsl), .07);
color: hsla(var(--mac-oscuro-hsl), 1);
font-family: var(--mac-fuente);
transition: background .15s;
}
.ctrlc-wp:hover { background: hsla(var(--mac-oscuro-hsl), .14); color: hsla(var(--mac-oscuro-hsl), 1); }
.ctrlc-wp-mini {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 .9px hsla(var(--mac-oscuro-hsl), .16);
}
.ctrlc-wp-mini.vacio {
background: hsla(var(--mac-oscuro-hsl), .1);
color: hsla(var(--mac-oscuro-hsl), .4); font-size: .9rem;
}
.ctrlc-wp-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ctrlc-wp-tx strong {
font-size: .78rem; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctrlc-wp-tx small { font-size: .66rem; color: hsla(var(--mac-oscuro-hsl), .55); }
.ctrlc-wp > i { font-size: .68rem; opacity: .45; }
.ctrlc-mas {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px; border-radius: 12px; text-decoration: none;
background: hsla(var(--mac-oscuro-hsl), .07);
color: hsla(var(--mac-oscuro-hsl), 1);
font-family: var(--mac-fuente); font-size: var(--menu-tam);
transition: background .15s, color .15s;
}
.ctrlc-mas:hover { background: var(--accent); color: #fff; }
.ctrlc-mas i { font-size: .68rem; opacity: .5; }
.ctrlc-mas:hover i { opacity: 1; }
.header-title { font-size: 14px; color: var(--muted); margin-left: 4px; }
.header-spacer { flex: 1; }
.header-icon-btn {
background: none; border: 1px solid transparent; cursor: pointer; text-decoration: none;
color: inherit; padding: 6px 10px; border-radius: 6px; font-size: 14px;
display: flex; align-items: center; justify-content: center; height: 34px; transition: background-color .15s;
}
.header-help-btn { position: relative; }
:root.con-wallpaper                        { --hdr-fg: #fff;    --hdr-sombra: 0 0 1px rgba(0, 0, 0, .10); }
:root.con-wallpaper[data-bs-theme="light"] { --hdr-fg: #14181d; --hdr-sombra: 0 0 2px rgba(255, 255, 255, .70); }
:root.con-wallpaper.wp-barra-oscura { --hdr-fg: #fff;    --hdr-sombra: 0 0 1px rgba(0, 0, 0, .10); }
:root.con-wallpaper.wp-barra-clara  { --hdr-fg: #14181d; --hdr-sombra: 0 0 2px rgba(255, 255, 255, .70); }
:root.con-wallpaper header,
:root.con-wallpaper .brand-btn,
:root.con-wallpaper .header-icon-btn,
:root.con-wallpaper .header-ctx-btn,
:root.con-wallpaper .header-search-btn,
:root.con-wallpaper .header-user-arrow,
:root.con-wallpaper .notif-btn {
color: var(--hdr-fg);
text-shadow: var(--hdr-sombra);
}
:root.con-wallpaper .soluciones-overlay,
:root.con-wallpaper .user-menu,
:root.con-wallpaper .ctx-dropdown,
:root.con-wallpaper .push-banner,
:root.con-wallpaper header .offcanvas {
color: var(--text);
text-shadow: none;
}
:root.con-wallpaper header { border-bottom: none; box-shadow: none; }
.header-ctx { display: flex; align-items: center; gap: 6px; }
.header-ctx-btn {
display: flex; align-items: center; gap: 5px;
background: none; border: 1px solid transparent; cursor: pointer;
color: inherit; padding: 6px 10px; border-radius: 6px;
font-size: 14px; height: 34px; transition: background-color .15s; max-width: 150px; white-space: nowrap;
}
.header-ctx-verified { color: #3b82f6; font-size: .72rem; flex-shrink: 0; }
.header-ctx-txt {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
text-transform: lowercase;
}
.header-ctx-txt::first-letter { text-transform: uppercase; }
.header-user-wrap { position: relative; flex-shrink: 0; }
.header-user-chip {
display: flex; align-items: center; gap: 7px; cursor: pointer;
padding: 4px 8px; border-radius: 8px; transition: background .15s;
}
.header-user-arrow {
font-size: 10px; color: var(--muted); transition: transform .2s; flex-shrink: 0;
}
.header-user-arrow.up { transform: rotate(180deg); }
.avatar--sm {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.avatar--sm.avatar--verified {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.user-menu--header {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.25);
min-width: 272px; z-index: 1100; overflow: hidden; padding: 6px;
}
.user-menu-profile {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px 10px;
}
.user-menu-profile-avatar {
width: 42px !important; height: 42px !important; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.user-menu-profile-avatar.avatar--verified {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.user-menu-profile-info { min-width: 0; }
.user-menu-profile-name {
font-size: 13.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: 5px;
}
.user-menu-profile-verified { font-size: 11px; color: #22c55e; flex-shrink: 0; }
.user-menu-profile-username { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-profile-email { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-profile-avatar--hero { width: 80px !important; height: 80px !important; font-size: 34px !important; margin-bottom: 10px; }
.user-menu-profile-hero { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 16px; gap: 3px; }
.user-menu-hero-name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; }
.user-menu-hero-sub { font-size: 12px; color: var(--muted); }
a.user-menu-hero-user { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
a.user-menu-hero-user:hover { color: var(--accent); text-decoration: underline; }
a.user-menu-hero-user i { font-size: 9px; opacity: .55; }
.notif-wrapper { position: relative; }
.notif-btn {
background: none; border: 1px solid transparent; cursor: pointer;
color: inherit; padding: 6px 10px; border-radius: 6px; font-size: 14px;
display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; transition: background-color .15s; position: relative;
}
.notif-badge {
position: absolute; top: -5px; right: -5px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
border-radius: 999px; min-width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1;
}
.notif-count-label { font-size: 11px; color: var(--accent); font-weight: 500; }
.notif-oc-body { display: flex !important; flex-direction: column; }
.notif-oc-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.notif-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notif-tab {
flex: 1; background: none; border: none; cursor: pointer;
padding: 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
border-bottom: 2px solid transparent;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: color .12s, border-color .12s;
}
.notif-tab:hover { color: var(--text); }
.notif-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.notif-tab-badge {
background: var(--border); color: var(--text);
font-size: 10px; font-weight: 700; border-radius: 999px;
min-width: 16px; height: 16px; padding: 0 5px;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-tab.active .notif-tab-badge { background: var(--accent); color: #fff; }
.alert-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
text-decoration: none; cursor: pointer; transition: background .12s;
border-left: 3px solid transparent;
}
.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: var(--sidebar-hover); }
.alert-item-icon {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 13px;
background: var(--border); color: var(--muted);
}
.alert-item-body { flex: 1; min-width: 0; }
.alert-item-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.alert-item-msg {
font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alert-item-arrow { flex-shrink: 0; color: var(--muted); font-size: 11px; opacity: .6; }
.alert-item--info    { border-left-color: #3b82f6; }
.alert-item--info    .alert-item-icon { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.alert-item--warn    { border-left-color: #f59e0b; }
.alert-item--warn    .alert-item-icon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.alert-item--urgent  { border-left-color: #ef4444; }
.alert-item--urgent  .alert-item-icon { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.alert-item--accion { align-items: flex-start; cursor: default; }
.alert-item--accion:hover { background: transparent; }
.alert-item--accion .alert-item-icon { margin-top: 1px; }
.alert-item--accion .alert-item-msg { display: block; overflow: visible; -webkit-line-clamp: none; }
.alert-item--accion .alert-item-msg strong { color: var(--text); font-weight: 600; }
.alert-item-link { color: var(--accent); text-decoration: underline; }
.alert-item-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alert-item-btn {
display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 7px;
border: 1px solid transparent; background: var(--accent); color: #fff;
font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer;
transition: opacity .15s;
}
.alert-item-btn:hover { opacity: .87; color: #fff; }
.alert-item-btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.alert-item-btn--ghost:hover { opacity: 1; color: var(--text); background: var(--sidebar-hover); }
.alert-item-close {
flex-shrink: 0; border: 0; background: transparent; color: var(--muted);
width: 24px; height: 24px; border-radius: 6px; cursor: pointer; line-height: 1; padding: 0;
}
.alert-item-close:hover { background: var(--sidebar-hover); color: var(--text); }
.push-banner {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
font-size: 12.5px;
}
.push-banner--loading,
.push-banner--unsupported {
justify-content: center; color: var(--muted); font-size: 11px; padding: 8px 14px;
}
.push-banner-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.push-banner-body { flex: 1; min-width: 0; }
.push-banner-title { font-weight: 600; color: var(--text); font-size: 12.5px; line-height: 1.3; }
.push-banner-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.push-banner--inactive { background: color-mix(in srgb, #f59e0b 7%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--inactive { background: color-mix(in srgb, #f59e0b 9%, #000); }
.push-banner--inactive .push-banner-icon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.push-banner-activate {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--accent); font-weight: 700; font-size: 12.5px; padding: 0;
}
.push-banner-activate:hover { text-decoration: underline; }
.push-banner-activate[disabled] { opacity: .55; cursor: default; }
.push-banner--ios { background: color-mix(in srgb, #3b82f6 7%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--ios { background: color-mix(in srgb, #3b82f6 9%, #000); }
.push-banner--ios .push-banner-icon { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #2563eb; }
.push-banner--active {
background: color-mix(in srgb, #22c55e 6%, var(--bs-body-bg)); padding: 8px 14px;
}
[data-bs-theme="dark"] .push-banner--active { background: color-mix(in srgb, #22c55e 8%, #000); }
.push-banner-active-dot {
flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #16a34a;
}
.push-banner-active-icon { color: #16a34a; font-size: 12px; flex-shrink: 0; }
.push-banner-active-label { flex: 1; color: #16a34a; font-weight: 600; font-size: 12px; }
.push-banner-link {
background: none; border: none; cursor: pointer; color: var(--muted);
font-size: 11px; padding: 0; flex-shrink: 0; text-decoration: underline;
}
.push-banner-link:hover { color: var(--text); }
.push-banner-deactivate {
flex-shrink: 0; background: none; border: 1px solid var(--border); cursor: pointer;
color: var(--muted); font-size: 11px; padding: 2px 9px; border-radius: 4px;
}
.push-banner-deactivate:hover { border-color: #ef4444; color: #ef4444; }
.push-banner-deactivate[disabled] { opacity: .55; cursor: default; }
.push-banner--denied { background: color-mix(in srgb, #ef4444 6%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--denied { background: color-mix(in srgb, #ef4444 8%, #000); }
.push-banner--denied .push-banner-icon { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
.notif-list { overflow-y: auto; }
.notif-item {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
cursor: pointer; transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--sidebar-hover); }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-msg {
font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-delete-btn {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--muted); padding: 2px 4px; border-radius: 4px;
font-size: 11px; line-height: 1; opacity: 0; transition: opacity .15s, color .15s;
align-self: center;
}
.notif-item:hover .notif-delete-btn { opacity: 1; }
.notif-delete-btn:hover { color: #ef4444; }
.notif-empty, .notif-loading {
padding: 28px 16px; text-align: center;
font-size: 12.5px; color: var(--muted);
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.notif-empty i, .notif-loading i { font-size: 22px; opacity: .5; }
.notif-detail { display: flex; flex-direction: column; }
.notif-detail-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.notif-back-btn {
background: none; border: none; cursor: pointer; color: var(--muted);
padding: 4px 6px; border-radius: 5px; font-size: 13px; line-height: 1;
display: flex; align-items: center; gap: 5px; transition: color .15s;
flex-shrink: 0;
}
.notif-back-btn:hover { color: var(--accent); }
.notif-detail-header-title {
font-size: 12px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.notif-detail-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.notif-detail-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; }
.notif-detail-msg {
font-size: 13px; color: var(--muted); line-height: 1.6;
max-height: 200px; overflow-y: auto; word-break: break-word;
}
.notif-detail-time { font-size: 11px; color: var(--muted); }
.notif-detail-footer {
padding: 10px 16px; border-top: 1px solid var(--border);
display: flex; gap: 8px; justify-content: flex-end;
}
.notif-detail-delete-btn {
background: none; border: 1px solid var(--border); cursor: pointer;
color: var(--muted); padding: 5px 10px; border-radius: 6px;
font-size: 12px; display: flex; align-items: center; gap: 5px; transition: all .15s;
}
.notif-detail-delete-btn:hover { border-color: #ef4444; color: #ef4444; }
.notif-detail-link-btn {
background: var(--accent); border: none; cursor: pointer;
color: #fff; padding: 5px 12px; border-radius: 6px;
font-size: 12px; display: flex; align-items: center; gap: 5px; transition: opacity .15s;
}
.notif-detail-link-btn:hover { opacity: .85; }
.notif-footer { padding: 10px 16px; text-align: center; font-size: 12px; }
.notif-footer a { color: var(--accent); text-decoration: none; }
.soluciones-wrapper { position: relative; }
.soluciones-wrapper--sin-boton { display: contents; }
.soluciones-dropdown {
position: absolute; top: calc(100% + 8px); right: 0; left: auto;
width: 300px; background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
z-index: 1000; overflow-y: auto; max-height: min(420px, calc(100dvh - 90px));
padding-bottom: 8px; display: flex; flex-direction: column;
}
.soluciones-overlay {
position: fixed; inset: 0; z-index: 9990;
background: rgba(0,0,0,.32);
display: flex; align-items: flex-start; justify-content: center;
padding: 72px 16px calc(24px + var(--dock-h, 0px));
animation: agente-fade-in .12s ease;
}
.soluciones-modal {
width: 100%; max-width: 680px;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.28);
display: flex; flex-direction: column;
max-height: calc(100dvh - 96px - var(--dock-h, 0px)); overflow: hidden;
animation: agente-slide-in .14s ease;
}
.soluciones-modal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.soluciones-modal-title {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 15px; color: var(--text);
}
.soluciones-modal-body { overflow-y: auto; padding: 6px 8px 12px; }
.sol-pago-banner {
flex-shrink: 0;
display: flex; align-items: center; gap: 12px;
margin: 12px 14px 2px; padding: 11px 13px;
border-radius: 12px; text-decoration: none;
background: rgba(245, 158, 11, .12);
border: 1px solid rgba(245, 158, 11, .40);
transition: background .12s, border-color .12s;
}
.sol-pago-banner:hover {
background: rgba(245, 158, 11, .18);
border-color: rgba(245, 158, 11, .60);
}
.sol-pago-banner-ic {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: #f59e0b; color: #fff; font-size: 15px;
box-shadow: 0 1px 3px rgba(245, 158, 11, .45);
}
.sol-pago-banner-tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sol-pago-banner-title { font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--text); }
.sol-pago-banner-sub { font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 1px; }
.sol-pago-banner-cta {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; font-size: 12.5px; white-space: nowrap; color: var(--text);
background: rgba(245, 158, 11, .18); padding: 6px 12px; border-radius: 999px;
}
.sol-pago-banner:hover .sol-pago-banner-cta { background: rgba(245, 158, 11, .28); }
@media (max-width: 575.98px) {
.sol-pago-banner {
flex-wrap: nowrap; gap: 9px;
margin: 6px 2px 4px; padding: 8px 10px; border-radius: 10px;
}
.sol-pago-banner-ic { width: 26px; height: 26px; font-size: 12px; }
.sol-pago-banner-title { font-size: 12.5px; }
.sol-pago-banner-sub { display: none; }
.sol-pago-banner-cta { width: auto; padding: 5px 8px; gap: 0; font-size: 0; }
.sol-pago-banner-cta i { font-size: 12px; }
}
.soluciones-tabs {
display: flex; gap: 2px; padding: 8px 14px 0; flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.soluciones-tab {
background: none; border: none; cursor: pointer; margin-bottom: -1px;
padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
border-bottom: 2px solid transparent; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
transition: color .12s, border-color .12s;
}
.soluciones-tab:hover { color: var(--text); }
.soluciones-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 575.98px) {
.soluciones-overlay { padding: 16px 10px; align-items: center; }
.soluciones-modal { max-height: calc(100dvh - 32px); }
}
.soluciones-item {
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 12px 6px 10px; text-decoration: none;
border-radius: 10px; transition: background .12s;
}
.soluciones-item:hover { background: var(--sidebar-hover); }
.sol-item-name {
width: 100%; text-align: center; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soluciones-item-icon {
width: 52px; height: 52px; border-radius: 14px; background: #5E17EB;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 22px; flex-shrink: 0;
}
.sol-ic-jba {
background: #111827; font-size: 15px; font-weight: 700; letter-spacing: .4px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.soluciones-item-logo { background: #fff; object-fit: contain; padding: 4px; }
.rp-muted { color: var(--bs-secondary-color, #6c757d); }
.rp-tabs { margin: 0; border-bottom: 0; }
.rp-tabs .nav-link { cursor: pointer; padding: .4rem .8rem; font-size: .85rem; }
.rp-rangos td { vertical-align: middle; }
.rp-matriz { overflow-x: auto; }
.rp-matriz th.feat { text-align: left; min-width: 220px; }
.rp-matriz td { text-align: center; vertical-align: middle; }
.rp-limite { width: 84px; display: inline-block; }
.rp-editor { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem; padding: 16px; margin-top: 14px; background: var(--bs-card-bg, #fff); }
.sol-item-wrap {
position: relative; border-radius: 10px;
}
.sol-fav-btn {
position: absolute; top: 3px; right: 3px;
width: 18px; height: 18px; border: none; background: none; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s; cursor: pointer;
font-size: 10px; color: #adb5bd; border-radius: 4px; z-index: 1;
}
.sol-item-wrap:hover .sol-fav-btn { opacity: 1; }
.sol-fav-btn.sol-fav-active { opacity: 1 !important; color: #f59e0b; }
.sol-fav-btn:hover { background: rgba(0,0,0,.08); color: #f59e0b; }
.sol-dragging { opacity: .35; }
.sol-dragover .soluciones-item { outline: 2px dashed var(--bs-primary, #0d6efd); outline-offset: -2px; }
body.sol-arrastrando .dh-dock-zone { z-index: 9995; }
body.sol-arrastrando .dh-dock-zone.is-auto .dh-dock-hit { transform: translateY(0); transition-delay: 0s; }
body.sol-arrastrando .dh-dock-zone.is-auto .dh-dock-hit::after { opacity: 0; }
body.sol-arrastrando .dh-dock {
outline: 2px dashed var(--bs-primary, #0d6efd); outline-offset: 4px;
}
.sol-ic { position: relative; display: inline-flex; }
.sol-pordot {
position: absolute; top: -5px; right: -5px; z-index: 3;
width: 18px; height: 18px; border-radius: 999px;
background: #ef4444; box-shadow: 0 0 0 2px var(--sidebar);
pointer-events: none;
display: flex; align-items: center; justify-content: center;
animation: sol-pordot-pulse 1.8s ease-in-out infinite;
}
.sol-pordot::after {
content: '!'; color: #fff; font-weight: 800; font-size: 12px; line-height: 1;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@keyframes sol-pordot-pulse {
0%, 100% { box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 4px rgba(239,68,68,0); }
50%      { box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 6px rgba(239,68,68,.30); }
}
@media (prefers-reduced-motion: reduce) { .sol-pordot, .sol-launcher-dot { animation: none; } }
.sol-launcher-dot {
position: absolute; top: 0; right: 0; z-index: 3;
width: 10px; height: 10px; border-radius: 999px;
background: #ef4444; box-shadow: 0 0 0 2px var(--header);
pointer-events: none;
animation: sol-pordot-pulse 1.8s ease-in-out infinite;
}
.pago-aviso-overlay { z-index: 9996; }
.pago-aviso-modal   { max-width: 440px; }
.dh-dock-zone {
position: fixed; left: 0; right: 0; z-index: 1020;
bottom: var(--dock-lift, 0px);
display: flex; justify-content: center;
pointer-events: none;
transition: bottom .2s ease;
}
.dh-dock-hit {
position: relative; pointer-events: auto;
max-width: calc(100vw - 24px - 2 * var(--dock-reserva, 0px));
padding: 2px 0 12px;
transition: transform .22s cubic-bezier(.22,1,.36,1);
}
.dh-dock-zone { --dock-asa: 8px; --dock-hot: 5px; }
.dh-dock-zone.is-apagado { --dock-hot: 0px; }
.dh-dock-zone.is-auto.is-apagado .dh-dock-hit::after { content: none; }
.dh-dock-zone.is-auto .dh-dock-hit { transform: translateY(calc(100% - var(--dock-hot))); }
.dh-dock-zone.is-auto .dh-dock-hit:hover,
.dh-dock-zone.is-auto.is-asomar .dh-dock-hit { transform: translateY(0); transition-delay: .3s; }
.dh-dock-zone.is-auto .dh-dock-hit:focus-within,
.dh-dock-zone.is-auto.is-abierto .dh-dock-hit { transform: translateY(0); transition-delay: 0s; }
.dh-dock-zone.is-auto .dh-dock-hit::after {
content: ''; position: absolute; top: calc(var(--dock-hot) - var(--dock-asa)); left: 50%;
width: 108px; height: var(--dock-asa); margin-left: -54px;
border-radius: var(--dock-asa) var(--dock-asa) 0 0;
background: rgba(0, 0, 0, .3);
background: color-mix(in srgb, var(--text) 30%, transparent);
box-shadow: 0 -2px 8px rgba(0,0,0,.18);
transition: opacity .18s ease;
pointer-events: none;
}
.dh-dock-zone.is-auto .dh-dock-hit:hover::after,
.dh-dock-zone.is-auto.is-asomar .dh-dock-hit::after { opacity: 0; transition-delay: .3s; }
.dh-dock-zone.is-auto .dh-dock-hit:focus-within::after,
.dh-dock-zone.is-auto.is-abierto .dh-dock-hit::after { opacity: 0; transition-delay: 0s; }
.dh-dock {
--dock-ic: 40px;
display: flex; align-items: flex-end; justify-content: center;
flex-wrap: nowrap; gap: 2px;
padding: 5px 7px;
border-radius: 18px;
position: relative;
background: rgba(255, 255, 255, .5);
background: color-mix(in srgb, var(--sidebar) var(--vidrio-op-dock), transparent);
border: 1px solid rgba(255, 255, 255, .40);
box-shadow:
0 12px 40px rgba(0,0,0,.22),
0 2px 10px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.55);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
animation: dh-dock-entrada .15s ease-out;
}
@keyframes dh-dock-entrada {
from { opacity: 0; }
to   { opacity: 1; }
}
[data-bs-theme="dark"] .dh-dock {
background: rgba(20, 24, 28, .55);
background: color-mix(in srgb, var(--sidebar) var(--vidrio-op-lateral), transparent);
border-color: rgba(255, 255, 255, .12);
box-shadow:
0 12px 40px rgba(0,0,0,.55),
0 2px 10px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.10);
}
.dh-dock--chico  { --dock-ic: 30px; }
.dh-dock--grande { --dock-ic: 52px; }
.dh-dock-strip {
display: flex; align-items: flex-end; justify-content: flex-start;
flex-wrap: nowrap; gap: 2px; min-width: 0;
flex: 0 1 auto;
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
padding: 62px 0 10px; margin: -62px 0 -10px;
pointer-events: none;
scrollbar-width: none;
}
.dh-dock-strip > * { pointer-events: auto; }
.dh-dock-strip::-webkit-scrollbar { display: none; }
.dh-dock-main,
.dh-dock-stacks { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: 0; border-radius: 14px; flex: 0 0 auto; }
.dh-dock-main   { min-width: var(--dock-ic); }
.dh-dock-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
width: 24px; height: 24px; border-radius: 999px;
display: none; align-items: center; justify-content: center;
padding: 0; cursor: pointer; font-size: 10px;
background: var(--sidebar); color: var(--text);
border: 1px solid var(--border);
box-shadow: 0 2px 8px rgba(0,0,0,.28);
opacity: .92; transition: opacity .15s;
}
.dh-dock-nav:hover { opacity: 1; }
.dh-dock-nav--izq { left: -11px; }
.dh-dock-nav--der { right: -11px; }
.dh-dock.puede-izq .dh-dock-nav--izq,
.dh-dock.puede-der .dh-dock-nav--der { display: flex; }
.dh-dock-zona-over { background: rgba(13,110,253,.16); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.dh-dock-sep {
width: 1px; align-self: stretch; flex-shrink: 0;
margin: 6px 5px; background: var(--border);
transition: transform .16s cubic-bezier(.34, 1.4, .5, 1);
}
.dh-dock-siguiendo .dh-dock-sep { transition: transform .045s linear; }
.dh-dock-item { position: relative; padding: 0 3px; flex: 0 0 auto; }
.dh-dock-item:hover { z-index: 6; }
.dh-dock-ic {
display: block; width: var(--dock-ic); height: var(--dock-ic);
padding: 0; border: none; background: none; cursor: pointer;
position: relative; text-decoration: none;
transform-origin: center bottom;
transition: transform .16s cubic-bezier(.34, 1.4, .5, 1);
will-change: transform;
}
.dh-dock-siguiendo .dh-dock-ic { transition: transform .045s linear; }
.dh-dock-img,
.dh-dock-glyph {
width: 100%; height: 100%; border-radius: 24%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: calc(var(--dock-ic) * .44);
box-shadow: 0 2px 6px rgba(0,0,0,.28);
}
.dh-dock-img { background: #fff; object-fit: contain; padding: 4px; }
.dh-dock-run {
position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 999px;
background: var(--text); opacity: .75; pointer-events: none;
}
.dh-dock-pay {
position: absolute; top: -4px; right: -4px;
width: 16px; height: 16px; border-radius: 999px;
background: #ef4444; color: #fff; font-weight: 800; font-size: 11px; line-height: 16px;
text-align: center; box-shadow: 0 0 0 2px var(--sidebar); pointer-events: none;
}
.dh-dock-tip { display: none; }
.dh-dock-tip-flot {
position: absolute; left: 0; bottom: 100%;
transform: translateX(-50%) translateY(4px);
padding: 6px 12px; border-radius: 9px; white-space: nowrap;
background: hsla(var(--mac-claro-hsl), .9);
-webkit-backdrop-filter: blur(var(--menu-blur)) saturate(180%);
backdrop-filter: blur(var(--menu-blur)) saturate(180%);
border: 0; color: hsla(var(--mac-oscuro-hsl), 1);
font-family: var(--mac-fuente); font-size: 12.5px; font-weight: 600;
box-shadow: 0 6px 20px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18),
inset 0 0 0 .9px hsla(var(--mac-claro-hsl), .95);
opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 8;
}
.dh-dock-tip-flot::after {
content: ''; position: absolute; top: 100%; left: var(--tip-x, 50%);
width: 16px; height: 8px; margin-left: -8px;
background: hsla(var(--mac-claro-hsl), .9);
-webkit-backdrop-filter: blur(var(--menu-blur)) saturate(180%);
backdrop-filter: blur(var(--menu-blur)) saturate(180%);
-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.dh-dock-tip-flot.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.dh-dock-empty {
display: flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto;
height: var(--dock-ic); padding: 0 14px; border-radius: 12px;
border: 1px dashed var(--border); color: var(--muted); font-size: 12px;
}
.dh-dock-empty i { color: #f59e0b; font-size: 11px; }
.dh-dock-stack-ic {
display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
padding: 3px; border-radius: 24%;
background: rgba(128,128,128,.22);
background: color-mix(in srgb, var(--text) 12%, transparent);
box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.dh-dock-stack-ic.is-open {
background: rgba(13,110,253,.34);
background: color-mix(in srgb, var(--accent) 34%, transparent);
}
.dh-dock-mini {
border-radius: 4px; overflow: hidden; min-width: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: calc(var(--dock-ic) * .16);
}
.dh-dock-mini img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
.dh-dock-stack-panel {
position: absolute; left: 50%; bottom: calc(100% - 6px);
transform: translateX(-50%);
z-index: 8;
width: min(560px, calc(100vw - 32px));
max-height: min(52dvh, 420px); overflow-y: auto;
padding: 12px 14px 10px; border-radius: 18px;
border: 1px solid var(--border);
box-shadow: 0 18px 48px rgba(0,0,0,.32);
animation: dh-dock-pop .14s ease;
}
@keyframes dh-dock-pop {
from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.97); }
to   { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1); }
}
.dh-dock-stack-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dh-dock-stack-title { font-weight: 700; font-size: 13px; color: var(--text); }
.dh-dock-stack-count {
font-size: 11px; font-weight: 700; color: var(--muted);
background: var(--sidebar-hover); border-radius: 999px; padding: 1px 8px;
}
.dh-dock-stack-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px;
}
.dh-dock-stack-item a {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 9px 4px; border-radius: 12px; text-decoration: none;
color: var(--text); transition: background .12s;
}
.dh-dock-stack-item a:hover { background: var(--sidebar-hover); }
.dh-dock-stack-item .dh-dock-ic-wrap { position: relative; width: 42px; height: 42px; display: block; }
.dh-dock-stack-name {
font-size: 11.5px; line-height: 1.2; text-align: center; width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-dock-stack-hint {
margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
font-size: 11.5px; color: var(--muted); text-align: center;
}
.dh-dock-menu {
position: absolute; bottom: 100%; z-index: 1021;
pointer-events: auto;
min-width: 224px; max-width: 224px;
animation: dh-dock-pop-menu .12s ease;
}
@keyframes dh-dock-pop-menu {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
.dh-dock-menu-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-dock-menu-title--largo { max-width: 260px; }
.dh-dock-menu-item {
display: flex; align-items: center; gap: 9px;
border: none; background: none; text-align: left;
text-decoration: none; cursor: pointer;
}
.dh-dock-menu-item i { width: 15px; text-align: center; color: hsla(var(--mac-oscuro-hsl), .6); font-size: 12px; }
.dh-dock-menu-item i.fa-toggle-on { color: var(--accent); font-size: 14px; }
.dh-desk-menu {
position: fixed; z-index: 1040;
min-width: 224px; max-width: 224px;
animation: dh-desk-pop .1s ease; transform-origin: top left;
}
.dh-desk-back {
display: flex; align-items: center; gap: 8px;
border: none; background: none; cursor: pointer; text-align: left;
}
.dh-desk-back i { font-size: 11px; color: hsla(var(--mac-oscuro-hsl), .6); }
@keyframes dh-desk-pop {
from { opacity: 0; transform: scale(.96); }
to   { opacity: 1; transform: scale(1); }
}
.dh-dock-menu-sizes { display: flex; gap: 4px; padding: 2px 6px 4px; }
.dh-dock-menu-sizes button {
flex: 1 1 0; padding: 5px 4px; font-size: 11.5px; font-weight: 600;
border: 1px solid hsla(var(--mac-oscuro-hsl), .22);
background: hsla(var(--mac-oscuro-hsl), .07);
color: hsla(var(--mac-oscuro-hsl), .85);
border-radius: 8px; cursor: pointer;
transition: background .15s, color .15s;
}
.dh-dock-menu-sizes button:hover {
background: hsla(var(--mac-oscuro-hsl), .14);
color: hsla(var(--mac-oscuro-hsl), 1);
}
.dh-dock-menu-sizes button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dh-dock-dragging { opacity: .35; }
.dh-dock-over-izq::before,
.dh-dock-over-der::before {
content: ''; position: absolute; top: 4px; bottom: 4px; width: 2px;
background: var(--accent); border-radius: 2px;
}
.dh-dock-over-izq::before { left: -1px; }
.dh-dock-over-der::before { right: -1px; }
.dh-dock-poof {
position: fixed; z-index: 9999; width: 46px; height: 46px; margin: -23px 0 0 -23px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(160,160,160,.55) 45%, rgba(160,160,160,0) 70%);
animation: dh-dock-poof .45s ease-out forwards;
}
@keyframes dh-dock-poof {
0%   { opacity: .9; transform: scale(.5); }
100% { opacity: 0;  transform: scale(2.1); }
}
@media (prefers-reduced-motion: reduce) {
.dh-dock-ic, .dh-dock-hit { transition: none; }
.dh-dock, .dh-dock-stack-panel, .dh-dock-menu, .dh-dock-poof { animation: none; }
}
@media (max-width: 767.98px) { .dh-dock-zone { display: none; } }
.notif-footer a:hover { text-decoration: underline; }
.notif-toolbar {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 10px 5px 14px; border-bottom: 1px solid var(--border);
gap: 6px; min-height: 36px;
}
.notif-toolbar-left  { display: flex; align-items: center; gap: 5px; }
.notif-toolbar-right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.notif-toolbar-btn {
background: none; border: 1px solid transparent; cursor: pointer;
color: var(--muted); padding: 3px 7px; border-radius: 5px;
font-size: 11.5px; display: flex; align-items: center; gap: 4px;
transition: all .13s; white-space: nowrap; line-height: 1.4;
}
.notif-toolbar-btn:hover:not([disabled]) { border-color: var(--border); color: var(--text); background: var(--sidebar-hover); }
.notif-toolbar-btn[disabled] { opacity: .4; cursor: default; }
.notif-toolbar-btn--danger { color: #ef4444; }
.notif-toolbar-btn--danger:hover:not([disabled]) { border-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); color: #ef4444; }
.notif-toolbar-btn--check { padding: 3px 5px; }
.notif-toolbar-count { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.notif-toolbar-confirm-txt { font-size: 11.5px; color: var(--text); font-weight: 500; }
.notif-item.selected { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.notif-item-check {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 18px; color: var(--muted); font-size: 13px; padding-top: 1px;
}
.notif-item.selected .notif-item-check { color: var(--accent); }
.layout { display: flex; flex: 1; overflow: hidden; }
aside {
width: 240px; background: var(--sidebar); border-right: 1px solid var(--border);
display: flex; flex-direction: column; flex-shrink: 0;
transition: width .25s ease, opacity .25s ease; overflow: hidden;
}
aside.collapsed { width: 56px; }
aside.collapsed .nav-section          { height: 0; padding: 0; overflow: hidden; opacity: 0; }
aside.collapsed nav a                 { justify-content: center; padding: 10px 0; margin: 2px 6px; }
aside.collapsed nav a span            { display: none; }
aside.collapsed .sidebar-toggle-wrap .toggle-btn span { display: none; }
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-toggle-wrap { padding: 4px 0 2px; }
.sidebar-toggle-wrap .toggle-btn {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 10px 16px; border-radius: 8px; margin: 2px 8px;
font-size: 14px; color: var(--muted); white-space: nowrap;
box-sizing: border-box; width: calc(100% - 16px);
}
.sidebar-toggle-wrap .toggle-btn i { flex-shrink: 0; width: 16px; text-align: center; font-size: 14px; }
aside.collapsed .sidebar-toggle-wrap .toggle-btn { justify-content: center; padding: 10px 0; margin: 2px 6px; width: calc(100% - 12px); }
.nav-section { padding: 16px 12px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
nav a {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; text-decoration: none; color: var(--muted);
font-size: 14px; border-radius: 8px; margin: 2px 8px;
transition: background .15s, color .15s; white-space: nowrap;
}
nav a:hover { background: var(--sidebar-hover); color: var(--text); }
nav a.active { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
nav a svg, nav a i { flex-shrink: 0; width: 16px; text-align: center; font-size: 14px; }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; position: relative; }
.user-menu {
position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px;
overflow: hidden; z-index: 10;
}
.user-menu-label { font-size: 11px; color: var(--muted); padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: .06em; }
.user-menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 12px; background: none; border: none;
cursor: pointer; color: var(--text); font-size: 13px; text-align: left;
transition: background .12s;
}
.user-menu-item:hover { background: var(--sidebar-hover); }
.user-menu-item i { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
.user-menu-item.danger { color: #f87171; }
.user-menu-item.danger:hover { background: rgba(220,53,69,.1); }
.user-menu-divider { border-top: 1px solid var(--border); }
.user-menu-session-note { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
.user-menu-session-note i { font-size: 10px; flex-shrink: 0; }
.user-menu-item--cta {
align-items: flex-start;
width: auto; margin: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(var(--accent-rgb),.35);
background: rgba(var(--accent-rgb),.10);
border-radius: 10px; color: var(--accent);
}
.user-menu-item--cta:hover { background: rgba(var(--accent-rgb),.18); }
.user-menu-item--cta i.user-menu-cta-icon { font-size: 15px; margin-top: 1px; }
.user-menu-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-menu-cta-title { font-weight: 600; font-size: 13px; }
.user-menu-cta-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
.user-menu-cta-arrow { margin-left: auto; font-size: 11px; opacity: .8; margin-top: 3px; }
.user-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px; transition: background .15s; }
.user-chip:hover, .user-chip.open { background: var(--sidebar-hover); }
.user-chip-arrow { color: var(--muted); font-size: 11px; flex-shrink: 0; transition: transform .2s; }
.user-chip-arrow.down { transform: rotate(180deg); }
.avatar {
width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; overflow: hidden;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--muted); white-space: nowrap; }
main { flex: 1; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
[ng-view] { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
[ng-view] main { overflow-y: auto; }
.view-padded { overflow-y: auto; padding: 1.5rem; }
.view-iframe { overflow: hidden; }
.view-iframe iframe { flex: 1; border: none; background: #fff; width: 100%; height: 100%; display: block; }
.welcome-screen {
flex: 1; background: var(--bg);
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px; color: var(--muted);
height: 100%; overflow: hidden;
}
.welcome-screen > .lp-stars,
.welcome-screen > .lp-hero-bg { position: fixed; inset: 0; }
.welcome-screen svg { opacity: .55; }
.welcome-screen .welcome-icon { opacity: .7; margin-bottom: 20px; }
.welcome-screen h2 { font-size: 20px; color: var(--text); }
.welcome-screen p { font-size: 14px; }
.welcome-search { width: 100%; max-width: 520px; margin-top: 8px; position: relative; z-index: 1; }
.welcome-search-box {
display: flex; align-items: center; gap: 10px;
background: var(--input-bg); border: 1.5px solid var(--border);
border-radius: 12px; padding: 10px 16px; transition: border-color .2s, box-shadow .2s;
}
.welcome-search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.welcome-search-box > i { color: var(--muted); font-size: 15px; flex-shrink: 0; }
.welcome-search-box input {
flex: 1; background: none; border: none; outline: none;
color: var(--text); font-size: 15px; min-width: 0;
}
.welcome-search-box button {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff; border: none; border-radius: 8px;
padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
flex-shrink: 0; transition: opacity .15s, box-shadow .15s;
}
.welcome-search-box button:hover { opacity: .9; box-shadow: 0 2px 10px rgba(124,58,237,.35); }
.welcome-search-box button:disabled { opacity: .45; box-shadow: none; }
.amelia-btn-label { display: flex; align-items: center; gap: 1px; letter-spacing: .01em; }
.amelia-btn-a { font-style: italic; font-weight: 800; }
.welcome-amelia-badge {
display: inline-flex; align-items: center; gap: 1px;
background: linear-gradient(135deg,#7c3aed,#a855f7);
color: #fff; border-radius: 999px;
padding: 2px 10px; font-size: 12px; font-weight: 600;
letter-spacing: .01em; flex-shrink: 0; white-space: nowrap;
}
.festivos-proximos { width: 100%; max-width: 520px; position: relative; z-index: 1; }
.festivos-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.festivos-list { display: flex; flex-direction: column; gap: 6px; }
.festivo-chip {
display: flex; align-items: center; gap: 10px;
background: rgba(var(--accent-rgb), .07);
border: 1px solid rgba(var(--accent-rgb), .18);
border-radius: 10px; padding: 8px 14px; font-size: 13px;
text-decoration: none;
}
.festivo-chip-days {
background: var(--accent); color: #fff; border-radius: 6px;
padding: 2px 9px; font-size: 11px; font-weight: 600;
flex-shrink: 0; white-space: nowrap;
}
.welcome-screen {
--cristal-bg: color-mix(in srgb, var(--sidebar) var(--vidrio-op-dock), transparent);
--cristal-bd: rgba(255, 255, 255, .70);
--cristal-sh: 0 4px 20px rgba(0, 0, 0, .10);
}
[data-bs-theme="dark"] .welcome-screen {
--cristal-bd: rgba(255, 255, 255, .14);
--cristal-sh: 0 4px 22px rgba(0, 0, 0, .38);
}
.welcome-screen .welcome-search-box,
.welcome-screen .festivo-chip {
background: var(--cristal-bg);
border-color: var(--cristal-bd);
box-shadow: var(--cristal-sh);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
}
.festivo-chip-days--hoy { background: #ef4444; }
.festivo-chip-cal { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.festivo-chip-name { flex: 1; color: var(--text); font-weight: 500; min-width: 0; }
.dh-marquee { overflow: hidden; white-space: nowrap; }
.dh-marquee-inner {
display: inline-block; max-width: 100%; vertical-align: bottom;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dh-marquee--on {
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--mq-fade, 22px)), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--mq-fade, 22px)), transparent 100%);
}
.dh-marquee--on > .dh-marquee-inner {
max-width: none; overflow: visible; text-overflow: clip;
animation: dhMarqueeShift var(--mq-dur, 8s) ease-in-out infinite;
}
.dh-marquee--on:hover > .dh-marquee-inner { animation-play-state: paused; }
@keyframes dhMarqueeShift {
0%, 12%   { transform: translateX(0); }
52%, 68%  { transform: translateX(var(--mq-shift, 0)); }
96%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.dh-marquee--on { -webkit-mask-image: none; mask-image: none; }
.dh-marquee--on > .dh-marquee-inner {
animation: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
}
.festivo-chip-date { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.festivo-chip-hora { font-weight: 600; color: var(--text); }
.festivo-chip-cuenta {
display: inline-flex; align-items: center; gap: 5px;
background: #ef4444; color: #fff; border-radius: 6px;
padding: 2px 9px; font-size: 11px; font-weight: 600;
flex-shrink: 0; white-space: nowrap;
font-variant-numeric: tabular-nums;
animation: festivoCuentaPulse 1.8s ease-in-out infinite;
}
.festivo-chip-cuenta i { font-size: 10px; }
.festivo-chip-cuenta--curso { background: #16a34a; animation: none; }
@keyframes festivoCuentaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.festivo-chip--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; text-decoration: none; }
.festivo-chip--link:hover { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); text-decoration: none; }
.festivo-chip-icon { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.shell-gate {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px;
background: var(--bg); color: var(--muted); text-align: center; padding: 40px;
}
.shell-gate-icon { opacity: .2; margin-bottom: 4px; }
.shell-gate-title { font-size: 18px; font-weight: 600; color: var(--text); margin: 0; }
.shell-gate-sub { font-size: 13px; margin: 0; max-width: 320px; }
.app-gate {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 20px;
background: var(--bg); color: var(--muted);
}
.app-gate-icon { opacity: .2; }
.app-gate-steps { display: flex; flex-direction: column; gap: 12px; }
.app-gate-step {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--muted); opacity: .5;
transition: opacity .2s, color .2s;
}
.app-gate-step.done { opacity: 1; color: var(--text); }
.app-gate-step.done i { color: #4caf50; }
.app-gate-step i { font-size: 16px; width: 18px; text-align: center; }
.cot-icon { width: 46px; height: 46px; }
.cot-empty-icon { width: 72px; height: 72px; }
.usr-container {
display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
font-size: .88rem;
}
.usr-toolbar {
background: var(--sidebar); border-bottom: 1px solid var(--border);
padding: 10px 20px; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; flex-shrink: 0;
}
.usr-toolbar h5 { margin: 0; font-size: 1rem; color: var(--text); }
.usr-table-wrap { flex: 1; overflow-y: auto; }
.usr-list-movil { flex: 1; overflow-y: auto; }
.usr-list-item {
padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.usr-list-item:last-child { border-bottom: 0; }
.usr-list-item .usr-cell-name { max-width: none; }
.usr-table { width: 100%; border-collapse: collapse; }
.usr-table thead th {
background: var(--sidebar); color: var(--muted);
font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
padding: 10px 12px; border-bottom: 1px solid var(--border);
white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.usr-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.usr-table tbody tr:hover { background: var(--sidebar-hover); }
.usr-table tbody td { padding: 9px 12px; vertical-align: middle; color: var(--text); }
.usr-cell-name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-cell-sub  { font-size: .74rem; color: var(--muted); }
.usr-cell-mono { font-family: monospace; font-size: .78rem; }
.usr-badge {
display: inline-block; padding: 2px 7px; border-radius: 4px;
font-size: .7rem; font-weight: 600;
}
.usr-badge-activo     { background: rgba(25,135,84,.2);  color: #4ade80; border: 1px solid #198754; }
.usr-badge-suspendido { background: rgba(255,193,7,.15); color: #fbbf24; border: 1px solid #d97706; }
.usr-badge-role       { background: rgba(var(--accent-rgb),.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); }
.usr-badge-info       { background: rgba(13,202,240,.15); color: #22d3ee; border: 1px solid #0dcaf0; }
.usr-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; color: #fff; overflow: hidden;
}
.usr-btn-icon { padding: 2px 6px; font-size: .78rem; line-height: 1.6; }
.usr-pagination {
border-top: 1px solid var(--border); flex-shrink: 0;
padding: 8px 16px; display: flex; align-items: center; gap: 10px;
color: var(--muted); font-size: .8rem;
}
.usr-pag-btn {
background: var(--sidebar); border: 1px solid var(--border); color: var(--muted);
padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: .8rem;
transition: all .15s;
}
.usr-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.usr-pag-btn:disabled { opacity: .4; cursor: default; }
.usr-empty-row td { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.usr-modal-tabs {
display: flex; gap: 4px; padding: 12px 16px 0; flex-wrap: wrap;
border-bottom: 1px solid var(--border);
}
.usr-modal-tab {
padding: 6px 14px; font-size: .78rem; cursor: pointer; border-radius: 6px 6px 0 0;
color: var(--muted); border: 1px solid transparent; border-bottom: none;
transition: all .15s; background: none;
}
.usr-modal-tab:hover  { color: var(--text); background: var(--sidebar-hover); }
.usr-modal-tab.active { color: var(--accent); background: var(--bg); border-color: var(--border); }
.usr-tab-pane        { display: none; padding: 16px; }
.usr-tab-pane.active { display: block; }
.usrd-head {
background: var(--sidebar); border-bottom: 1px solid var(--border);
padding: 14px 20px 0; flex-shrink: 0;
}
.usrd-avatar {
width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 20px; color: #fff; overflow: hidden;
}
.usrd-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.usrd-tab {
padding: 6px 14px; font-size: .78rem; cursor: pointer; border-radius: 6px 6px 0 0;
color: var(--muted); border: 1px solid transparent; border-bottom: none;
background: none; transition: all .15s;
}
.usrd-tab:hover  { color: var(--text); background: var(--sidebar-hover); }
.usrd-tab.active { color: var(--accent); background: var(--bg); border-color: var(--border); }
.usrd-body { flex: 1; overflow-y: auto; padding: 16px 20px 32px; }
.usrd-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.usrd-card-h {
padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--muted);
font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.usrd-card-b { padding: 14px; }
.usrd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.usrd-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.usrd-kpi-n { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.usrd-kpi-l { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.usrd-dl { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; }
.usrd-dl > div { padding: 7px 14px; border-bottom: 1px solid var(--border); min-width: 0; }
.usrd-dl > div:nth-last-child(-n+2) { border-bottom: none; }
.usrd-dl-k { color: var(--muted); font-size: .78rem; }
.usrd-dl-v { color: var(--text); word-break: break-word; }
.usrd-dl-v.mono { font-family: monospace; font-size: .78rem; }
@media (max-width: 575.98px) {
.usrd-dl { grid-template-columns: 1fr; }
.usrd-dl > div { border-bottom: none; padding: 4px 14px; }
.usrd-dl > div.usrd-dl-v { padding-bottom: 9px; border-bottom: 1px solid var(--border); }
}
.usrd-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.usrd-bar { flex: 1; min-width: 3px; max-width: 26px; background: var(--accent); opacity: .65; border-radius: 3px 3px 0 0; }
.usrd-bar:hover { opacity: 1; }
.usrd-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.usrd-fill  { height: 100%; background: var(--accent); opacity: .7; border-radius: 3px; }
.usrd-vin { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.usrd-vin:last-child { border-bottom: none; }
.usrd-vin-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.usrd-vin-t { color: var(--muted); font-size: .7rem; font-family: monospace; }
.usrd-pre {
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: 10px; font-size: .75rem; max-height: 340px; overflow: auto; white-space: pre-wrap;
word-break: break-word; color: var(--text);
}
.org-container {
display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
font-size: .88rem;
}
.org-toolbar {
background: var(--sidebar); border-bottom: 1px solid var(--border);
padding: 10px 20px; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; flex-shrink: 0;
}
.org-toolbar h5 { margin: 0; font-size: 1rem; color: var(--text); }
.org-table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; }
.org-settings-container {
display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
font-size: .88rem;
}
.org-settings-tabs {
display: flex; gap: 4px;
}
.org-settings-tab {
padding: 5px 14px; border-radius: 7px; border: 1px solid transparent;
background: none; color: var(--muted); font-size: .82rem; font-weight: 600;
cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
transition: background .15s, color .15s, border-color .15s;
}
.org-settings-tab:hover { background: var(--sidebar-hover); color: var(--text); }
.org-settings-tab.active {
background: rgba(var(--accent-rgb), .12); color: var(--accent);
border-color: rgba(var(--accent-rgb), .25);
}
.org-settings-body {
flex: 1; overflow-y: auto; padding: 24px 28px;
}
.org-settings-body .usr-table thead th { position: static; }
.org-body-miembros {
overflow: hidden !important; padding: 0 !important;
display: flex; flex-direction: column; min-height: 0;
}
.org-miembros-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.org-miembros-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.org-miembros-header { flex-shrink: 0; padding: 16px 20px 4px; }
.org-mb-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.org-mb-buscar { max-width: 220px; }
.org-mb-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-mb-filtros .form-select { width: auto; }
.org-mb-filtro-lbl { display: none; }
.org-mb-btn-filtros:not(.btn-primary) { background: var(--sidebar); color: var(--text); border: 1px solid var(--border); }
.org-mb-btn-filtros--abierto:not(.btn-primary) { border-color: var(--accent); color: var(--accent); }
@media (max-width: 991.98px) {
.org-mb-barra { align-items: stretch; }
.org-mb-buscar { flex: 1 1 0; min-width: 0; max-width: 420px; }
.org-mb-btn-filtros, .org-mb-acciones .btn {
display: inline-flex; align-items: center; justify-content: center; min-width: 38px;
}
.org-mb-filtros {
display: none; order: 99; flex: 0 0 100%;
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end;
padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--sidebar);
}
.org-mb-filtros.abierto { display: grid; }
.org-mb-filtro { min-width: 0; }
.org-mb-filtro-lbl { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.org-mb-filtros .form-select { width: 100%; }
.org-mb-filtros .btn { width: 100%; }
.org-mb-limpiar { grid-column: 1 / -1; justify-self: end; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
.org-mb-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.org-miembros-table-wrap { flex: 1; overflow-y: auto; padding: 0 20px 8px; }
.org-miembros-table-wrap .usr-table thead th { position: sticky; top: 0; }
.org-miembros-footer {
flex-shrink: 0; border-top: 1px solid var(--border);
padding: 8px 20px; display: flex; align-items: center; gap: 10px;
color: var(--muted); font-size: .8rem;
}
.org-miembros-selbar { border-right: 1px solid var(--border); padding-right: 10px; }
.org-mb-selall {
flex-shrink: 0; margin: 0 20px 8px; padding: 6px 12px; border-radius: 8px;
background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2);
font-size: .8rem; text-align: center;
}
@media (max-width: 767.98px) {
.org-mb-selall { margin: 0 12px 8px; }
.org-miembros-header { padding: 12px 12px 4px; }
.org-miembros-table-wrap { padding: 0 12px 8px; }
.org-miembros-footer { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
.org-miembros-footer > .d-flex { margin-left: 0 !important; width: 100%; min-width: 0; }
.org-miembros-footer > .d-flex > .d-flex { overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.org-miembros-footer .org-pag-btn { flex: 0 0 auto; }
.org-miembros-footer select { flex: 0 0 auto; }
.org-miembros-selbar { border-right: 0; padding-right: 0; }
}
.org-settings-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 220px; color: var(--muted); text-align: center;
}
.org-settings-nuevo-header {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 20px; margin-bottom: 8px; text-align: center;
}
.org-settings-section {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 20px 22px; margin-bottom: 20px;
}
.org-settings-section-title {
font-size: .78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 16px;
}
.org-settings-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.org-settings-field { display: flex; flex-direction: column; gap: 5px; }
.org-settings-field--full { grid-column: 1 / -1; }
.org-settings-field label {
font-size: .76rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em;
}
.org-settings-field input {
padding: 8px 12px; border-radius: 7px;
border: 1px solid var(--border); background: var(--input-bg);
color: var(--text); font-size: .88rem; transition: border-color .15s;
}
.org-settings-field input:focus { outline: none; border-color: var(--accent); }
.org-settings-field .req { color: #ef4444; }
.org-settings-actions {
display: flex; gap: 10px; align-items: center; margin-top: 8px;
}
.org-field-label {
font-size: .76rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em;
}
.org-field-label .req { color: #ef4444; }
.org-field-input {
background-color: var(--input-bg) !important; color: var(--text) !important;
border-color: var(--border) !important;
}
.org-field-input:focus { border-color: var(--accent) !important; box-shadow: none !important; }
@media (max-width: 600px) {
.org-settings-grid { grid-template-columns: 1fr; }
.org-settings-field--full { grid-column: 1; }
.org-settings-body { padding: 16px; }
}
@media (max-width: 767.98px) {
.org-settings-section .row > .col-4,
.org-settings-section .row > .col-8 { flex: 0 0 100%; max-width: 100%; }
.org-settings-section .row > .col-4.col-form-label { padding-bottom: 2px; }
.org-settings-section .row > .col-8.d-flex { flex-wrap: wrap; }
.org-settings-section .row > .col-8.d-flex > .ms-auto { margin-left: 0 !important; }
}
.org-member-search-wrap { position: relative; }
.org-member-dropdown {
position: absolute; top: calc(100% + 3px); left: 0; right: 0;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 8px; z-index: 1060;
max-height: 260px; overflow-y: auto;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.org-member-dropdown-item {
padding: 9px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background .1s;
}
.org-member-dropdown-item:last-child { border-bottom: none; }
.org-member-dropdown-item:hover { background: var(--sidebar-hover); }
.org-member-dropdown-info { cursor: default; color: var(--muted); }
.org-member-dropdown-info:hover { background: none; }
.org-pag-btn {
background: var(--sidebar); color: var(--text);
border: 1px solid var(--border); font-size: .78rem;
min-width: 30px; padding: 2px 7px; border-radius: 6px;
}
.org-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.org-pag-btn:disabled { opacity: .4; }
.org-pag-btn--active {
background: rgba(var(--accent-rgb), .15) !important;
color: var(--accent) !important;
border-color: rgba(var(--accent-rgb), .3) !important;
}
.org-table { width: 100%; border-collapse: collapse; }
.org-table thead th {
background: var(--sidebar); color: var(--muted);
font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
padding: 10px 12px; border-bottom: 1px solid var(--border);
white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.org-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.org-table tbody tr:hover { background: var(--sidebar-hover); }
.org-table tbody td { padding: 7px 12px; vertical-align: middle; color: var(--text); white-space: nowrap; }
.org-col-id   { width: 1%;    }
.org-col-acr  { width: 100px; }
.org-col-slug { width: 150px; }
.org-col-drn  { width: 125px; }
.org-col-mail { width: 210px; }
.org-col-tel  { width: 110px; }
.org-col-alta { width: 90px;  }
.org-col-est  { width: 120px; }
.org-col-acc  { width: 1%;    }
.org-cell-org  { display: flex; align-items: center; gap: 8px; min-width: 0; }
.org-cell-name {
font-weight: 600; max-width: 260px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-cell-trunc {
display: block; max-width: 190px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-col-slug .org-cell-trunc { max-width: 135px; }
.org-cell-link  { color: var(--muted); text-decoration: none; font-size: .8rem; }
.org-cell-link:hover { color: var(--accent); text-decoration: underline; }
.org-cell-vacio { color: var(--muted); opacity: .45; }
.org-cell-sub  { font-size: .74rem; color: var(--muted); }
.org-cell-mono { font-family: monospace; font-size: .78rem; }
.org-ico-ver  { color: var(--accent); font-size: .78rem; flex-shrink: 0; }
.org-ico-pago { color: #fbbf24; font-size: .78rem; margin-left: 5px; }
.org-badge {
display: inline-block; padding: 2px 7px; border-radius: 4px;
font-size: .7rem; font-weight: 600;
}
.org-badge-activo     { background: rgba(25,135,84,.2);  color: #4ade80; border: 1px solid #198754; }
.org-badge-suspendido { background: rgba(255,193,7,.15); color: #fbbf24; border: 1px solid #d97706; }
.org-badge-cancelado  { background: rgba(220,53,69,.15); color: #f87171; border: 1px solid #dc3545; }
.org-badge-verificada { background: rgba(var(--accent-rgb),.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); }
.org-badge-pago       { background: rgba(255,193,7,.15); color: #fbbf24; border: 1px solid #d97706; }
.org-avatar {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: #fff; overflow: hidden;
}
.org-btn-icon { padding: 2px 6px; font-size: .78rem; line-height: 1.6; }
.org-pagination {
border-top: 1px solid var(--border); flex-shrink: 0;
padding: 8px 16px; display: flex; align-items: center; gap: 10px;
color: var(--muted); font-size: .8rem;
}
.org-pag-btn {
background: var(--sidebar); border: 1px solid var(--border); color: var(--muted);
padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: .8rem;
transition: all .15s;
}
.org-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.org-pag-btn:disabled { opacity: .4; cursor: default; }
.org-empty-row td { text-align: center; padding: 3rem 1rem; color: var(--muted); }
@media (max-width: 1399.98px) { .org-col-acr  { display: none; } }
@media (max-width: 1199.98px) { .org-col-drn  { display: none; } }
@media (max-width: 991.98px)  { .org-col-tel, .org-col-alta { display: none; } }
@media (max-width: 767.98px)  {
.org-col-mail { display: none; }
.org-table tbody td { padding: 7px 8px; }
.org-cell-name { max-width: 150px; }
}
.org-form { padding: 16px 20px; }
.org-form-sep {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 16px;
}
.ges-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.ges-view .ges-wrap   { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; }
.ges-view .ges-head   { flex-shrink: 0; }
.ges-view .ges-cols   { display: flex; gap: 0; flex: 1; min-height: 0; }
.ges-view .ges-col    { flex: 1 1 0; min-width: 0; display: flex; }
.ges-view .ges-col:not(:last-child) { border-right: 1px solid var(--border); }
.ges-view .panel {
background: var(--sidebar) !important;
border-radius: 0;
display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
}
.ges-view .panel-head  { flex-shrink: 0; }
.ges-view .ges-search  { flex-shrink: 0; }
.ges-view .ges-scroll  { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -.35rem; padding: 0 .35rem; }
.ges-view .ges-col-split { flex-direction: column; }
.ges-view .ges-col-split > .panel { flex: 1 1 0; }
.ges-view .ges-col-split > .panel + .panel { border-top: 1px solid var(--border); }
@media (max-width: 991.98px) {
.ges-view             { overflow-y: auto; }
.ges-view .ges-wrap   { min-height: 0; flex: 0 0 auto; }
.ges-view .ges-cols   { flex-direction: column; flex: 0 0 auto; min-height: 0; }
.ges-view .ges-col    { display: block; }
.ges-view .ges-col:not(:last-child) { border-right: none; border-bottom: 1px solid var(--border); }
.ges-view .panel      { flex: 0 0 auto; min-height: 0; height: 70vh; }
.ges-view .ges-col-split > .panel { flex: 0 0 auto; height: 50vh; }
}
.ges-view .section-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ges-view .list-item { border-bottom: 1px solid var(--border); padding: .55rem .9rem; }
.ges-view .list-item:last-child { border-bottom: none; }
.ges-view .org-item,
.ges-view .escuela-item        { cursor: pointer; border-radius: 6px; transition: background .12s; }
.ges-view .org-item:hover      { background: var(--sidebar-hover); }
.ges-view .escuela-item:hover  { background: var(--sidebar-hover); }
.ges-view .org-item.active     { background: rgba(var(--accent-rgb),.12); border-left: 3px solid var(--accent); font-weight: 600; }
.ges-view .escuela-item.active { background: rgba(25,135,84,.12); border-left: 3px solid #198754; font-weight: 600; }
.ges-view .badge-slug          { font-size: .7rem; font-weight: 400; color: var(--muted); }
.ges-view .acronimo-badge      { font-size: .7rem; background: var(--sidebar-hover); padding: 1px 6px; border-radius: 4px; color: var(--muted); }
.ges-view .empty-state         { color: var(--muted); font-size: .82rem; padding: 2rem 1rem; text-align: center; }
.ges-view .empty-state i       { font-size: 2rem; display: block; margin-bottom: .5rem; }
.ges-view .btn-icon            { padding: 1px 5px; font-size: .78rem; line-height: 1.6; }
.ges-view .btn-fmt             { font-size: .68rem; padding: 1px 6px; line-height: 1.6; font-family: monospace; }
.ges-view .border-bottom       { border-color: var(--border) !important; }
.ges-view .progress            { background: var(--border) !important; }
.ges-view #mapa-escuela        { height: 320px; border-radius: 6px; border: 1px solid var(--border); }
.ges-view .leaflet-container   { background: #000000 !important; }
.ges-view .leaflet-tile-pane   { filter: brightness(.85) saturate(.8); }
.view-padded .btn-check:checked + .btn-outline-warning {
background: rgba(255,193,7,.15); border-color: #ffc107; color: #ffc107;
}
.welcome-screen.chat-mode {
justify-content: flex-start;
padding-top: 0;
height: 100%;
overflow: hidden;
}
.welcome-header { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 1; }
.welcome-greeting {
font-size: clamp(20px, 3vw, 28px); font-weight: 700;
color: var(--text); margin: 0; letter-spacing: -.01em;
}
.welcome-greeting span { color: var(--accent2); }
.welcome-icon--manana { color: #92400e; }
.welcome-icon--noche  { color: #818cf8; }
.welcome-subtitle {
font-size: clamp(16px, 2vw, 19px); font-weight: 500; font-style: italic;
color: var(--accent); margin: 4px 0 0; max-width: 600px; min-height: 1.6em;
text-align: center; line-height: 1.55;
}
.welcome-subtitle .tw-caret {
display: inline-block; margin-left: 2px; font-style: normal; font-weight: 400;
color: var(--accent); animation: tw-blink 1.05s step-end infinite;
}
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.welcome-hint { font-size: 13px; color: var(--muted); margin: 0; opacity: .8; }
.chat-panel {
position: relative; z-index: 1; flex: 1; width: 100%; max-width: 760px;
margin: 0 auto; display: flex; flex-direction: column;
overflow: hidden; padding-top: 40px;
}
.chat-close-btn {
position: absolute; top: 8px; right: 0; z-index: 1;
background: none; border: none; color: var(--muted);
font-size: 12px; cursor: pointer; padding: 4px 10px;
border-radius: 6px; transition: color .15s, background .15s;
display: flex; align-items: center; gap: 6px;
}
.chat-close-btn:hover { color: var(--text); background: var(--sidebar-hover); }
.chat-messages {
flex: 1; overflow-y: auto; padding: 12px 16px 8px;
display: flex; flex-direction: column; gap: 12px;
}
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.chat-msg--user  { align-self: flex-end;  flex-direction: row-reverse; max-width: 70%; }
.chat-msg--ai    { align-self: flex-start; }
.chat-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: rgba(var(--accent-rgb),.15); border: 1.5px solid rgba(var(--accent-rgb),.3);
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 12px;
}
.chat-avatar--amelia { background: linear-gradient(135deg,#7c3aed,#a855f7); border-color: #7c3aed; color: #fff; font-weight: 700; font-size: 13px; font-style: italic; }
.chat-msg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chat-nav-routes { display: flex; flex-direction: column; gap: 5px; }
.chat-nav-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 8px; text-decoration: none;
border: 1px solid rgba(124,58,237,.25); background: rgba(124,58,237,.05);
color: #7c3aed; font-size: 12px; cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s;
max-width: 100%;
}
.chat-nav-btn:hover { background: rgba(124,58,237,.12); border-color: #7c3aed; box-shadow: 0 1px 6px rgba(124,58,237,.15); text-decoration: none; color: #6d28d9; }
.chat-nav-btn-icon { flex-shrink: 0; font-size: 10px; opacity: .7; }
.chat-nav-btn-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-nav-btn-path { font-family: monospace; font-size: 10px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 8px; }
.chat-avatar-spacer { width: 28px; flex-shrink: 0; }
.chat-msg-actions { display: flex; align-items: center; gap: 6px; }
.chat-msg-time {
font-size: 11px; color: var(--muted); white-space: nowrap;
font-variant-numeric: tabular-nums;
opacity: 0; transition: opacity .12s;
}
.chat-msg:hover .chat-msg-time { opacity: 1; }
@media (hover: none) { .chat-msg-time { opacity: 1; } }
.chat-msg-body--user { align-items: flex-end; }
.chat-msg-body--user .chat-msg-actions { justify-content: flex-end; }
.chat-copy-btn:disabled { opacity: .35; cursor: default; }
.chat-copy-btn:disabled:hover { color: var(--muted); background: transparent; }
.chat-date-sep {
display: flex; align-items: center; gap: 10px;
margin: 10px 0 6px; color: var(--muted); font-size: 11px;
}
.chat-date-sep::before, .chat-date-sep::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.chat-date-sep span { flex-shrink: 0; padding: 0 2px; }
.amelia-load-older { display: flex; justify-content: center; padding: 2px 0 8px; }
.amelia-hist-loading {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 18px 0; color: var(--muted); font-size: 12.5px;
}
.amelia-load-older-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 16px;
border: 1px solid var(--border); background: var(--sidebar);
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.amelia-load-older-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.amelia-load-older-btn:disabled { opacity: .6; cursor: default; }
.amelia-historial-link {
display: flex; width: fit-content; align-items: center; gap: 8px;
margin: 10px auto 0; padding: 6px 14px; border-radius: 16px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.amelia-historial-link:hover { color: var(--text); border-color: var(--muted); }
.chat-copy-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 12px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 11px; cursor: pointer;
opacity: .65; transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.chat-copy-btn:hover { opacity: 1; color: var(--text); background: var(--sidebar); }
.chat-copy-btn--copied,
.chat-copy-btn--copied:hover { opacity: 1; color: #16a34a; border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.08); }
.chat-bubble {
padding: 10px 14px; border-radius: 16px;
font-size: 13.5px; line-height: 1.6; word-break: break-word;
}
.chat-msg--user .chat-bubble {
background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
.chat-msg--ai .chat-bubble {
background: var(--sidebar); color: var(--text);
border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.chat-bubble--typing { display: flex; align-items: center; gap: 5px; min-width: 52px; }
.typing-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
animation: typing-bounce .9s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes typing-bounce {
0%,60%,100% { transform: translateY(0);    opacity: .5; }
30%          { transform: translateY(-6px); opacity: 1; }
}
.chat-badge {
display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px;
background: rgba(var(--accent-rgb),.1); color: var(--accent);
border: 1px solid rgba(var(--accent-rgb),.25); margin-right: 4px;
vertical-align: middle;
}
.chat-bubble a {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 20px;
background: var(--accent); color: #fff;
font-size: 11px; font-weight: 600; text-decoration: none; line-height: 1.6;
transition: opacity .15s, transform .15s;
vertical-align: middle;
}
.chat-bubble a::after { content: '→'; font-size: 11px; }
.chat-bubble a:hover { opacity: .85; transform: translateY(-1px); }
.chat-bubble .chat-tabla { --bs-table-bg: transparent; --bs-table-color: inherit; font-size: inherit; }
.chat-bubble .chat-tabla th { white-space: nowrap; }
.welcome-search.chat-input-bar {
margin-top: 0; padding: 8px 12px 12px; max-width: 100%; width: 100%;
border-top: 1px solid var(--border); flex-shrink: 0;
}
.welcome-search.chat-input-bar .welcome-search-box {
max-width: 760px; margin: 0 auto;
}
[data-bs-theme="light"] .user-menu { box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
[data-bs-theme="light"] header     { box-shadow: 0 1px 0 var(--bs-border-color); }
.ctx-bar {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background .15s;
}
.ctx-bar:hover, .ctx-bar.open { background: var(--sidebar-hover); }
.ctx-icon  { font-size: 11px; color: var(--muted); flex-shrink: 0; width: 14px; text-align: center; }
.ctx-label { flex: 1; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-arrow { font-size: 9px; color: var(--muted); flex-shrink: 0; transition: transform .2s; }
.ctx-arrow.up { transform: rotate(180deg); }
.ctx-dropdown { background: var(--bg); border-bottom: 1px solid var(--border); max-height: 180px; overflow-y: auto; }
.ctx-item {
display: flex; align-items: center; gap: 7px;
padding: 6px 12px; cursor: pointer; transition: background .12s; text-decoration: none;
}
.ctx-item:hover  { background: var(--sidebar-hover); }
.ctx-item.active { background: rgba(var(--accent-rgb),.1); }
.ctx-acronimo {
font-size: 9px; background: var(--sidebar-hover); padding: 1px 5px;
border-radius: 3px; color: var(--muted); font-family: monospace;
flex-shrink: 0; text-transform: uppercase;
}
.ctx-item-name  { flex: 1; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item-badge {
font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
background: rgba(var(--accent-rgb),.12); color: var(--accent);
}
.ctx-add {
display: flex; align-items: center; gap: 6px; font-weight: 600;
padding: 6px 12px; cursor: pointer; font-size: 11px; color: var(--accent);
border-top: 1px solid var(--border); transition: background .12s;
}
.ctx-add:hover { background: var(--sidebar-hover); }
.ctx-add i     { font-size: 9px; }
.ctx-empty     { font-size: 11px; color: var(--muted); padding: 10px 12px; text-align: center; }
.ctx-icon-right { font-size: 9px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
.org-offcanvas {
width: 380px !important;
background: var(--sidebar) !important;
border-right: 1px solid var(--border) !important;
display: flex; flex-direction: column;
}
.org-offcanvas-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.org-offcanvas-title {
font-size: .9rem; font-weight: 700; color: var(--text);
}
.org-offcanvas-sub {
font-size: .75rem; color: var(--muted); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.org-offcanvas-close {
background: none; border: none; color: var(--muted); cursor: pointer;
padding: 2px 4px; font-size: 1rem; line-height: 1;
transition: color .15s;
}
.org-offcanvas-close:hover { color: var(--text); }
.org-offcanvas-search {
position: relative; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.org-offcanvas-search .ctx-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.org-offcanvas-search .ctx-search { padding-left: 28px; padding-right: 28px; width: 100%; }
.org-offcanvas-search .ctx-search-clear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; line-height: 1; color: var(--muted); cursor: pointer; font-size: 12px; }
.org-offcanvas-search .ctx-search-clear:hover { color: var(--text); }
.org-offcanvas-filtros {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.org-filtro-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--border); background: none;
font-family: inherit; font-size: .7rem; font-weight: 600; line-height: 1.6;
color: var(--muted); cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background .12s, color .12s, border-color .12s;
}
.org-filtro-chip i      { font-size: .62rem; }
.org-filtro-chip:hover  { color: var(--text); border-color: var(--muted); }
.org-filtro-chip--on,
.org-filtro-chip--on:hover {
color: var(--accent); border-color: rgba(var(--accent-rgb),.45);
background: rgba(var(--accent-rgb),.10);
}
.org-filtro-count { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--muted); }
.org-offcanvas-body { flex: 1; overflow-y: auto; }
.org-offcanvas-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 20px; text-align: center; color: var(--muted);
}
.org-offcanvas-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; cursor: pointer; transition: background .12s;
border-bottom: 1px solid var(--border);
}
.org-offcanvas-item:hover  { background: var(--sidebar-hover); }
.org-offcanvas-item.active { background: rgba(var(--accent-rgb),.08); }
.org-offcanvas-avatar {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
color: #fff; font-size: .85rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.org-offcanvas-item-info { flex: 1; min-width: 0; }
.org-offcanvas-item-name {
font-size: .82rem; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-offcanvas-item-tag  { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.org-verified-badge { color: #3b82f6; font-size: .65rem; flex-shrink: 0; }
.org-new-badge {
flex-shrink: 0; font-size: .6rem; font-weight: 700; line-height: 1.5;
text-transform: uppercase; letter-spacing: .03em;
color: #16a34a; background: rgba(22,163,74,.12);
border-radius: 4px; padding: 0 5px;
}
.org-offcanvas-check { font-size: .75rem; color: var(--accent); flex-shrink: 0; }
.org-offcanvas-section-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 14px 4px; }
.org-fav-btn { background: none; border: none; padding: 4px; color: var(--border); cursor: pointer; font-size: .75rem; flex-shrink: 0; line-height: 1; transition: color .15s; }
.org-fav-btn:hover, .org-fav-btn--active { color: #f59e0b; }
.org-offcanvas-item:not(:hover) .org-fav-btn:not(.org-fav-btn--active) { opacity: 0; }
.org-offcanvas-item:hover .org-fav-btn { opacity: 1; }
.org-fav-loader { display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
.org-fav-loader-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; animation: orgFavDot .9s ease-in-out infinite; }
.org-fav-loader-dot:nth-child(2) { animation-delay: .15s; }
.org-fav-loader-dot:nth-child(3) { animation-delay: .3s; }
@keyframes orgFavDot { 0%,80%,100% { opacity:.15; transform:scale(.8); } 40% { opacity:.7; transform:scale(1.1); } }
.org-offcanvas-footer {
border-top: 1px solid var(--border); padding: 10px 12px;
display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.org-offcanvas-footer-btn {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border-radius: 8px; text-decoration: none;
font-size: .82rem; font-weight: 600; color: var(--muted);
transition: background .12s, color .12s;
-webkit-appearance: none; appearance: none;
background: none; border: 0; font-family: inherit;
text-align: left; cursor: pointer;
}
.org-offcanvas-footer-btn:hover { background: var(--sidebar-hover); color: var(--text); }
.org-offcanvas-footer-btn--primary {
color: var(--accent);
}
.org-offcanvas-footer-btn--primary:hover {
background: rgba(var(--accent-rgb),.1); color: var(--accent);
}
.apps-oc-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; text-decoration: none; color: var(--text);
transition: background .12s; border-bottom: 1px solid transparent;
}
.apps-oc-item:hover  { background: var(--sidebar-hover); color: var(--text); }
.apps-oc-item.active { background: rgba(var(--accent-rgb),.08); color: var(--text); }
.apps-oc-item-name   { flex: 1; font-size: 13px; line-height: 1.3; }
.apps-oc-check       { font-size: .75rem; color: var(--accent); flex-shrink: 0; }
.ctx-bar--disabled { opacity: .45; cursor: default; pointer-events: none; }
.ctx-search-wrap { position: relative; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ctx-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); }
.ctx-search {
width: 100%; padding: 5px 8px 5px 24px; font-size: 11.5px;
border: 1px solid var(--border); border-radius: 5px;
background: var(--input-bg); color: var(--text); outline: none;
}
.ctx-search:focus { border-color: var(--accent); }
.ctx-app-dot {
width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ctx-app-dot img  { width: 14px; height: 14px; object-fit: contain; }
.ctx-app-dot span { font-size: 9px; font-weight: 800; color: #fff; line-height: 1; }
.ctx-app-dot--sm  { width: 26px; height: 26px; border-radius: 6px; }
.ctx-app-dot--sm img  { width: 100%; height: 100%; object-fit: contain; }
.ctx-app-dot--sm span { font-size: 10px; }
.apps-list-page  { display: flex; justify-content: center; align-items: flex-start;
min-height: 100%; padding: 48px 24px; overflow-y: auto; }
.apps-list-inner { width: 100%; max-width: 720px; }
.apps-list-header { text-align: center; margin-bottom: 32px; }
.apps-list-title  { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.apps-list-org    { font-size: .875rem; color: var(--text-muted, #888); }
.apps-list-search-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.apps-list-search { width: 100%; max-width: 340px; margin: 0; }
.apps-list-loading { display: flex; justify-content: center; padding: 60px 0; color: var(--text-muted, #888); }
.apps-list-empty       { display: flex; flex-direction: column; align-items: center;
padding: 60px 20px; text-align: center; }
.apps-list-empty-icon  { width: 56px; height: 56px; border-radius: 16px;
background: var(--sidebar-hover, rgba(255,255,255,.07));
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--text-muted, #888); margin-bottom: 16px; }
.apps-list-empty-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.apps-list-empty-sub   { font-size: .875rem; color: var(--text-muted, #888); margin: 0; }
.apps-list-category { margin-bottom: 32px; }
.apps-list-category-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: #888; margin: 0 0 12px; }
.apps-list-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.apps-list-card  { display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 22px 14px 18px; border-radius: 14px; text-decoration: none; color: inherit;
border: 1px solid var(--border, rgba(255,255,255,.08));
background: var(--sidebar-hover, rgba(255,255,255,.04));
transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; }
.apps-list-card:hover  { background: var(--sidebar-active, rgba(255,255,255,.09));
border-color: rgba(255,255,255,.18); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.18); color: inherit; text-decoration: none; }
.apps-list-card.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.apps-list-card-icon   { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center; }
.apps-list-card-icon img  { width: 100%; height: 100%; object-fit: contain; }
.apps-list-card-icon span { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.apps-list-card-name   { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.35; color: inherit; }
.apps-list-footer       { display: flex; justify-content: center; margin-top: 28px; }
.apps-list-install-btn  { display: inline-flex; align-items: center; gap: 7px;
padding: 8px 18px; border-radius: 8px; font-size: .85rem; font-weight: 500;
border: 1px solid var(--border, rgba(255,255,255,.15));
color: var(--text-muted, #888); text-decoration: none;
transition: background .15s, color .15s, border-color .15s; }
.apps-list-install-btn:hover { background: var(--sidebar-hover, rgba(255,255,255,.07));
color: inherit; border-color: rgba(255,255,255,.25); text-decoration: none; }
aside.collapsed .ctx-bar      { display: none; }
aside.collapsed .ctx-dropdown { display: none; }
aside.collapsed .ctx-search-wrap { display: none; }
[data-bs-theme="light"] .ctx-dropdown { background: var(--sidebar-hover); }
.cta-container { display: flex; flex-direction: column; height: 100%; }
.cta-body      { display: flex; flex: 1; gap: 0; overflow: hidden; }
.cta-aside {
width: 260px; flex-shrink: 0;
background: var(--sidebar);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 0 0 16px;
overflow-y: auto;
}
.cta-avatar-wrap { text-align: center; padding: 20px 16px 20px; }
.cta-avatar {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700; color: #fff;
margin: 0 auto 10px; overflow: hidden;
}
.cta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-avatar-name { font-size: 14px; font-weight: 600; color: var(--text); }
.cta-avatar-role { font-size: 12px; margin-top: 2px; }
.cta-avatar-tabs { display: flex; flex-direction: column; }
.cta-tab {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; margin: 1px 8px; border-radius: 6px;
background: none; border: none;
cursor: pointer; color: var(--text); font-size: .87rem;
text-align: left; text-decoration: none;
transition: background .12s, color .12s;
}
.cta-tab:hover   { background: var(--sidebar-hover); }
.cta-tab.active  { background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 600; }
.cta-tab i       { width: 16px; text-align: center; flex-shrink: 0; }
.cta-panel  { flex: 1; overflow-y: auto; padding: 28px 32px; }
.cta-pane   { display: none; }
.cta-pane.active { display: block; }
.cta-pane-title {
font-size: 15px; font-weight: 700; color: var(--text);
margin-bottom: 20px; padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.cta-actions { margin-top: 24px; }
.cta-loading { display: flex; align-items: center; padding: 20px 0; color: var(--muted); font-size: 14px; }
@media (max-width: 767.98px) {
.cta-panel { padding: 16px 14px; }
.cta-panel .row > .col-4,
.cta-panel .row > .col-8 { flex: 0 0 100%; max-width: 100%; }
.cta-panel .row > .col-4.col-form-label { padding-bottom: 2px; font-weight: 600; }
.cta-pane-title { margin-bottom: 14px; }
}
.cta-aside { transition: width .2s ease; }
.cta-aside-hd {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
}
.cta-aside-title { font-weight: 700; font-size: .88rem; flex: 1; color: var(--text); }
.cta-aside.ce-collapsed { width: 62px; }
.cta-aside.ce-collapsed .cta-aside-hd { flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 12px 0 10px; }
.cta-aside.ce-collapsed .cta-aside-title { display: none !important; }
.cta-aside.ce-collapsed .ce-admin-collapse-btn { margin: 0; }
.cta-aside.ce-collapsed .cta-avatar-name,
.cta-aside.ce-collapsed .cta-avatar-role { display: none !important; }
.cta-aside.ce-collapsed .cta-avatar { width: 40px; height: 40px; font-size: 16px; }
.cta-aside.ce-collapsed .cta-avatar-wrap { padding: 0 0 12px; }
.cta-aside.ce-collapsed .cta-tab { justify-content: center; padding: 9px 0; }
.cta-aside.ce-collapsed .cta-tab span { display: none !important; }
:root.con-wallpaper {
background-image: var(--wallpaper);
background-size: cover; background-position: center; background-repeat: no-repeat;
background-attachment: fixed;
}
:root.con-wallpaper                       { --wp-mate: #0b0d10; }
:root.con-wallpaper[data-bs-theme="light"] { --wp-mate: #e6eaf0; }
:root.con-wallpaper.wp-fit-contain {
background-size: contain;
background-color: var(--wp-mate);
}
:root.con-wallpaper.wp-fit-stretch { background-size: 100% 100%; }
:root.con-wallpaper.wp-fit-tile {
background-size: auto;
background-repeat: repeat;
}
:root.con-wallpaper.wp-fit-center {
background-size: auto;
background-color: var(--wp-mate);
}
:root.con-wallpaper.wp-fit-span {
background-attachment: scroll;
background-size: cover;
}
:root.con-wallpaper body,
:root.con-wallpaper body.has-ventana {
background: transparent;
}
:root.con-wallpaper .welcome-screen { background: transparent; }
:root.con-wallpaper .welcome-screen::before {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(72% 64% at 50% 46%,
color-mix(in srgb, var(--bg) 78%, transparent) 0%,
color-mix(in srgb, var(--bg) 54%, transparent) 55%,
color-mix(in srgb, var(--bg) 40%, transparent) 100%);
}
:root.con-wallpaper.sin-fondo-inicio .welcome-screen::before { content: none; }
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-greeting,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-greeting span,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-subtitle,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-subtitle .tw-caret { color: inherit; }
.welcome-panel {
display: flex; flex-direction: column; align-items: center;
gap: 12px;
width: 100%; position: relative; z-index: 1; min-width: 0;
}
:root.con-wallpaper.sin-fondo-inicio .welcome-panel {
width: min(600px, calc(100vw - 32px));
padding: 28px 24px 24px;
border-radius: 20px;
background: hsla(var(--mac-claro-hsl), .45);
color: hsl(var(--mac-oscuro-hsl));
border: 1px solid rgba(255, 255, 255, .40);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root.con-wallpaper.sin-fondo-inicio .welcome-panel {
background: hsla(var(--mac-claro-hsl), .95);
}
}
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-search-box,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivo-chip {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: hsla(var(--mac-claro-hsl), .45);
border: 1px solid rgba(255, 255, 255, .40);
box-shadow: none;
color: inherit;
}
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivo-chip-name,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivo-chip-hora { color: inherit; }
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivos-label,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivo-chip-date,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .festivo-chip-icon,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-search-box > i,
:root.con-wallpaper.sin-fondo-inicio .welcome-panel .welcome-search-placeholder {
color: hsla(var(--mac-oscuro-hsl), .62);
}
@media (max-width: 575.98px) {
:root.con-wallpaper.sin-fondo-inicio .welcome-panel { padding: 20px 14px 16px; border-radius: 16px; }
}
@media (min-width: 768px) {
:root.con-wallpaper #shell.shell--ventana:has(.cta-aside, .ce-admin-sidebar) {
background: transparent;
}
:root.con-wallpaper #shell.shell--ventana .ce-admin { background: transparent; }
:root.con-wallpaper #shell.shell--ventana .cta-panel     { background: var(--card); }
:root.con-wallpaper #shell.shell--ventana .ce-admin-main { background: var(--bg); }
:root.con-wallpaper #shell.shell--ventana .cta-aside,
:root.con-wallpaper #shell.shell--ventana .ce-admin-sidebar {
--text:             hsl(var(--mac-oscuro-hsl));
--muted:            hsla(var(--mac-oscuro-hsl), .62);
--border:           hsla(var(--mac-oscuro-hsl), .14);
--sidebar-hover:    hsla(var(--mac-oscuro-hsl), .09);
--sidebar:          hsl(var(--mac-claro-hsl));
--card:             hsl(var(--mac-claro-hsl));
--bg:               hsl(var(--mac-claro-hsl));
--input-bg:         hsla(var(--mac-oscuro-hsl), .06);
--bs-tertiary-bg:   hsla(var(--mac-oscuro-hsl), .06);
--bs-body-color:    hsl(var(--mac-oscuro-hsl));
--bs-secondary-color: hsla(var(--mac-oscuro-hsl), .62);
--bs-body-bg:       hsl(var(--mac-claro-hsl));
--bs-card-bg:       hsl(var(--mac-claro-hsl));
--bs-border-color:  hsla(var(--mac-oscuro-hsl), .14);
color: hsl(var(--mac-oscuro-hsl));
background: hsla(var(--mac-claro-hsl), .55);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root.con-wallpaper #shell.shell--ventana .cta-aside,
:root.con-wallpaper #shell.shell--ventana .ce-admin-sidebar {
background: hsla(var(--mac-claro-hsl), .95);
}
}
}
.wp-grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.wp-item {
display: flex; flex-direction: column; gap: 5px;
padding: 0; border: none; background: none; cursor: pointer; text-align: center;
}
.wp-muestra {
position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
border-radius: 9px; border: 1px solid var(--border);
background-size: cover; background-position: center;
box-shadow: 0 1px 3px rgba(0,0,0,.14);
transition: transform .12s ease, box-shadow .12s ease;
}
.wp-item:hover .wp-muestra { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.wp-item.active .wp-muestra { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-muestra > i {
position: absolute; right: 5px; bottom: 5px;
width: 17px; height: 17px; border-radius: 999px;
background: var(--accent); color: #fff; font-size: 9px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.wp-nombre {
font-size: 11.5px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-item.active .wp-nombre { color: var(--text); font-weight: 600; }
.wp-titulo {
font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
color: var(--muted); margin-bottom: 6px;
}
.wp-item--propio { position: relative; }
button.wp-muestra { padding: 0; cursor: pointer; }
.wp-quitar {
position: absolute; top: 4px; right: 4px;
width: 19px; height: 19px; padding: 0; border: none; border-radius: 999px;
background: rgba(0,0,0,.55); color: #fff; font-size: 10px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0;
transition: opacity .12s ease, background .12s ease, transform .12s ease;
}
.wp-item:hover .wp-quitar,
.wp-quitar:focus-visible { opacity: 1; }
.wp-item--propio:hover .wp-quitar { transform: translateY(-2px); }
.wp-quitar:hover { background: var(--bs-danger, #dc2626); }
@media (hover: none) {
.wp-quitar { opacity: .85; }
}
.wp-item.is-borrando { opacity: .45; pointer-events: none; }
.wp-preview {
width: 100%; max-width: 260px; aspect-ratio: 16 / 10;
border-radius: 10px; border: 1px solid var(--border);
background-size: cover; background-position: center;
box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.wp-preview.is-vacia {
display: flex; align-items: center; justify-content: center;
background: var(--bg); color: var(--muted); font-size: 12px; text-align: center;
border-style: dashed;
}
.wp-preview.wp-fit-contain {
background-size: contain; background-repeat: no-repeat; background-color: var(--bg);
}
.wp-preview.wp-fit-stretch { background-size: 100% 100%; }
.wp-preview.wp-fit-tile    { background-size: 33.3333%; background-repeat: repeat; }
.wp-preview.wp-fit-center  {
background-size: 50%; background-repeat: no-repeat; background-color: var(--bg);
}
.wp-preview.wp-fit-span    { background-size: cover; }
.wp-fit-select { width: auto; min-width: 132px; }
.cta-colores { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-color {
width: 26px; height: 26px; padding: 0; flex: 0 0 auto;
border: none; border-radius: 999px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 11px;
box-shadow: inset 0 0 0 .5px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
transition: transform .12s ease;
}
.cta-color:hover { transform: scale(1.12); }
.cta-color.active { outline: 2px solid var(--text); outline-offset: 2px; }
.cta-color > i { opacity: 0; }
.cta-color.active > i { opacity: 1; }
.cta-color-ninguno {
background: transparent; color: var(--muted);
box-shadow: none; border: 1px dashed var(--border);
}
.cta-color-ninguno > i        { opacity: .75; }
.cta-color-ninguno.active     { color: var(--text); border-style: solid; }
.cta-color-ninguno.active > i { opacity: 1; }
.cta-segbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.cta-segbtn {
flex: 1; min-width: 64px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px;
background: transparent; color: var(--muted); font-size: .72rem;
cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.cta-segbtn:hover  { background: var(--sidebar-hover); color: var(--text); }
.cta-segbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta-segbtn i      { font-size: .9rem; }
a.user-menu-item { text-decoration: none; }
.gp-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
.gp-container { max-width: 1080px; margin: 0 auto; padding: 0 32px; width: 100%; }
.gp-topbar {
flex-shrink: 0; height: 54px;
background: var(--header); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.gp-topbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.gp-topbar-end  { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 1; }
.gp-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: 999px; border: none;
background: transparent; color: var(--muted);
font-size: 13px; font-weight: 500; cursor: pointer;
transition: background .15s, color .15s; white-space: nowrap;
text-decoration: none;
}
.gp-tab i { font-size: 12px; }
.gp-tab:hover { background: var(--sidebar-hover); color: var(--text); }
.gp-tab.active { background: rgba(var(--accent-rgb),.12); color: var(--accent); font-weight: 600; }
.gp-tab--green.active { background: rgba(34,197,94,.12); color: #22c55e; }
.gp-cat-wrap { position: relative; }
.gp-cat-chevron { font-size: 9px !important; margin-left: 2px; transition: transform .2s; }
.gp-cat-chevron.open { transform: rotate(180deg); }
.gp-cat-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 10px; padding: 6px; min-width: 200px;
box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.gp-cat-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 7px;
color: var(--bs-body-color); text-decoration: none; font-size: 13px;
transition: background .12s; white-space: nowrap;
}
.gp-cat-item:hover { background: var(--sidebar-hover); color: var(--bs-body-color); }
.gp-cat-item i { color: var(--accent); font-size: 12px; width: 14px; text-align: center; }
.gp-cat-overlay { position: fixed; inset: 0; z-index: 199; }
.gp-search-wrap { flex: 0 1 480px; position: relative; }
.gp-search-wrap > i:first-child {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--muted); font-size: 13px; pointer-events: none;
}
.gp-search-clear {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s; pointer-events: all !important;
}
.gp-search-clear:hover { color: var(--text); }
.gp-search-wrap input {
width: 100%; padding: 8px 36px;
border-radius: 28px; border: 1px solid var(--border);
background: var(--input-bg); color: var(--text); font-size: 13.5px;
outline: none; transition: border-color .18s, box-shadow .18s;
}
.gp-search-wrap input::placeholder { color: var(--muted); }
.gp-search-wrap input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1);
}
.gp-main { flex: 1; overflow-y: auto; }
.gp-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 80px 20px; color: var(--muted); font-size: 13px;
}
.gp-empty-icon {
width: 72px; height: 72px; border-radius: 20px;
background: var(--input-bg); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 28px; margin-bottom: 4px;
}
.gp-results-bar { padding: 20px 0 0; }
.gp-results-inner { display: flex; align-items: center; gap: 10px; }
.gp-block { padding: 28px 0 0; }
.gp-block--first { padding-top: 32px; }
.gp-block > .gp-container { padding-bottom: 32px; }
.gp-block:not(:last-child) > .gp-container { border-bottom: 1px solid var(--border); }
.gp-block:last-child > .gp-container { padding-bottom: 48px; }
.gp-block-hd {
display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.gp-block-title { font-size: 16px; font-weight: 700; color: var(--text); }
.gp-block-sub { font-size: 12px; color: var(--muted); }
.gp-pill {
font-size: 11.5px; color: var(--muted);
background: var(--input-bg); border: 1px solid var(--border);
padding: 2px 9px; border-radius: 999px;
}
.gp-appinfo {
display: flex; gap: 14px; align-items: flex-start;
background: var(--input-bg); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
}
.gp-appinfo-icon {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
background: rgba(var(--accent-rgb), .12); color: var(--accent);
display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.gp-appinfo-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.gp-appinfo-text { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.gp-slider-row { display: flex; align-items: center; gap: 6px; }
.gp-slide-btn {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border); background: var(--sidebar);
color: var(--text); font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s, color .15s, opacity .15s;
opacity: .45;
}
.gp-slide-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.gp-slider {
flex: 1; display: flex; gap: 10px;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
padding: 4px 2px 10px;
}
.gp-slider::-webkit-scrollbar { display: none; }
.gp-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: 10px 6px;
padding: 4px 2px 10px;
}
.gp-grid .gp-card { width: auto; flex-shrink: 1; }
.gp-listgrid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px 24px;
padding: 8px 2px 10px;
}
.gp-listcard {
display: flex; align-items: center; gap: 14px;
padding: 6px; border-radius: 12px;
text-decoration: none; color: inherit;
transition: background .15s;
}
.gp-listcard:hover { background: var(--sidebar-hover); }
.gp-listcard-info { min-width: 0; flex: 1; }
.gp-listcard-name {
display: flex; align-items: center; gap: 5px;
font-size: 14px; font-weight: 600; color: var(--text);
}
.gp-listcard-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-listcard-name i { flex-shrink: 0; }
.gp-listcard-rating {
display: flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--muted); margin-top: 1px;
}
.gp-listcard-rating i { font-size: 11px; }
.gp-listcard-rating .fa-star { color: #f59e0b; }
.gp-listcard-meta {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--muted); margin-top: 3px;
}
.gp-listcard-meta i { color: #f59e0b; font-size: 10px; }
.gp-wrap dh-app-logo { border: 0; }
.gp-wrap dh-app-logo.dh-logo-ini {
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
.gp-flatcard {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
}
.gp-flatcard--hover { transition: background .15s, border-color .15s; }
.gp-flatcard--hover:hover { background: var(--sidebar-hover); border-color: var(--accent); }
.card.shadow-sm,          .card.shadow          { box-shadow: none !important; }
.card.border-0.shadow-sm, .card.border-0.shadow { border: 1px solid var(--border) !important; }
.ap-hero {
display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
background: var(--bs-card-bg, #fff);
border: 1px solid var(--border); border-radius: 16px;
padding: 24px; margin-bottom: 18px;
}
.ap-hero-main { flex: 1 1 260px; min-width: 220px; }
.sol-hero-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 104px; height: 104px; border-radius: 12px; flex-shrink: 0;
color: #fff; font-size: 44px;
}
.ap-title {
font-size: 22px; font-weight: 700; margin: 0;
color: var(--bs-body-color, var(--text));
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ap-dev { font-size: 13.5px; margin-top: 4px; }
.ap-dev a { text-decoration: none; font-weight: 600; color: var(--accent); }
.ap-metrics { display: flex; gap: 32px; margin-top: 18px; flex-wrap: wrap; }
.ap-metric-val {
font-size: 18px; font-weight: 700; line-height: 1.1;
color: var(--bs-body-color, var(--text));
display: flex; align-items: center; gap: 5px;
}
.ap-metric-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ap-install {
flex: 0 0 300px;
align-self: center;
background: var(--bs-tertiary-bg, var(--input-bg));
border: 1px solid var(--border); border-radius: 14px;
padding: 14px 18px; text-align: center;
}
.ap-install .btn:not(.btn-link) {
font-weight: 600;
padding-top: 10px; padding-bottom: 10px;
border-radius: 10px;
}
.ap-info-modal-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 12px; }
.ap-price { margin-bottom: 10px; }
.ap-price-inline {
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ap-price-inline .ap-dollar {
font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--accent);
}
.ap-plan-actual {
background: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
border-radius: 8px; padding: 8px 12px; text-align: left;
}
.ap-plan-actual-bar {
background: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
border-radius: 10px; padding: 10px 16px; margin-bottom: 14px;
}
.ap-precio-sel { text-align: center; }
.ap-precio-sel-nombre {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--bs-primary); margin-bottom: 4px;
}
.ap-precio-sel-renov {
font-size: 11px; color: var(--bs-secondary-color, #6c757d); margin-top: 4px;
}
.ap-plan-card--sel {
outline: 2px solid var(--bs-primary) !important;
outline-offset: -2px;
}
.ap-inst-estimacion {
background: var(--bs-primary-bg-subtle, #cfe2ff);
border: 1px solid var(--bs-primary-border-subtle, #9ec5fe);
border-radius: 10px; padding: 12px 16px;
}
.ap-inst-estimacion-total {
font-size: 1.3rem; font-weight: 700; color: var(--bs-primary);
}
.ap-plan-activo-badge {
display: inline-block;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
border-radius: 20px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.ap-plan-descuento-badge {
display: inline-block;
background: var(--bs-success); color: #fff;
font-size: 11px; font-weight: 700; border-radius: 20px;
padding: 2px 10px; margin-bottom: 6px;
}
.ap-plan-descuento-label {
font-size: 11px; color: var(--bs-success); font-weight: 600; margin-top: 4px;
}
.ap-suscripciones-total {
background: var(--bs-card-bg, #fff);
border: 2px solid var(--bs-primary);
border-radius: 14px; padding: 20px 24px;
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 4px; margin-top: 8px;
}
.ap-plan-cotizacion-label {
display: block;
font-size: 11px; color: var(--bs-warning-text-emphasis, #664d03);
background: var(--bs-warning-bg-subtle, #fff3cd);
border: 1px solid var(--bs-warning-border-subtle, #ffecb5);
border-radius: 6px; padding: 6px 10px; margin-top: 10px; line-height: 1.4;
text-align: left;
}
.ap-section {
background: var(--bs-card-bg, #fff);
border: 1px solid var(--border); border-radius: 14px;
padding: 18px 20px; margin-bottom: 18px;
}
.ap-section-title {
font-size: 14px; font-weight: 600; margin-bottom: 12px;
color: var(--bs-body-color, var(--text));
}
.ap-section--planes { padding: 18px 20px 20px; }
.ap-section--planes .sp-wrap { padding: 16px 0 8px; }
.ap-fac-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-bottom: 18px;
}
.ap-fac-tab {
padding: 5px 16px; border-radius: 999px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.ap-fac-tab:hover { background: var(--sidebar-hover); color: var(--text); }
.ap-fac-tab.active {
background: rgba(var(--accent-rgb),.1); border-color: var(--accent);
color: var(--accent); font-weight: 600;
}
.ap-plan-cards {
display: flex; gap: 14px; flex-wrap: wrap;
}
.ap-plan-card {
flex: 1 1 180px; min-width: 150px;
border-radius: 14px; overflow: hidden;
border: 1px solid var(--border);
display: flex; flex-direction: column;
}
.ap-plan-card-hd {
padding: 20px 16px 18px; font-size: 16px; font-weight: 700; text-align: center;
background: var(--sidebar); color: var(--text);
}
.ap-info-card {
background: var(--bs-card-bg, #fff); color: var(--bs-body-color, var(--text));
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.ap-info-card-hd {
padding: 11px 16px; font-size: 13px; font-weight: 600;
border-bottom: 1px solid var(--border);
}
.ap-info-list {
list-style: none; margin: 0; padding: 0;
}
.ap-info-list li {
display: flex; align-items: center; gap: 8px;
padding: 9px 16px; font-size: 13px;
border-bottom: 1px solid var(--border);
}
.ap-info-list li:last-child { border-bottom: none; }
.ap-info-lbl { color: var(--muted); min-width: 80px; flex-shrink: 0; }
.ap-dev-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ap-dev-row:hover { background: var(--sidebar-hover); }
.ap-social-grid {
display: flex; flex-direction: column; gap: 0;
}
.ap-social-btn {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none;
font-size: 13px; font-weight: 500;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ap-social-btn:last-child { border-bottom: none; }
.ap-social-btn:hover { background: var(--sidebar-hover); }
.ap-social-btn i { font-size: 18px; width: 22px; text-align: center; }
.ap-social-btn--fb i { color: #1877f2; }
.ap-social-btn--ig i { color: #e1306c; }
.ap-social-btn--tt i { color: var(--bs-body-color); }
.ap-embed-wrap {
position: relative; width: 100%; padding-bottom: 56.25%;
border-radius: 12px; overflow: hidden;
}
.ap-embed-wrap iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ap-plan-card-body {
padding: 24px 16px; flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
background: var(--bs-card-bg, #fff);
}
.ap-plan-card-price { display: flex; align-items: baseline; gap: 4px; }
.ap-plan-card-amount { font-size: 2rem; font-weight: 800; line-height: 1; }
@media (max-width: 640px) {
.ap-install { flex-basis: 100%; }
.ap-plan-card { flex-basis: calc(50% - 7px); }
}
.gp-feat-card {
flex-shrink: 0; width: 186px;
border-radius: 16px; overflow: hidden;
border: 1px solid var(--border); background: var(--sidebar);
scroll-snap-align: start;
transition: transform .2s, box-shadow .2s;
display: flex; flex-direction: column;
}
.gp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.gp-feat-top {
height: 116px; background: var(--input-bg);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.gp-feat-logo {
width: 72px; height: 72px; border-radius: 16px;
background: var(--sidebar); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gp-feat-logo img { width: 52px; height: 52px; object-fit: contain; }
.gp-feat-logo span { font-size: 30px; font-weight: 800; color: var(--accent); }
.gp-feat-badge {
position: absolute; top: 9px; right: 9px;
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
background: rgba(var(--accent-rgb),.12); color: var(--accent);
padding: 2px 7px; border-radius: 999px;
}
.gp-feat-body { padding: 10px 12px; flex: 1; }
.gp-feat-name {
font-size: 12.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-feat-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.gp-feat-action {
margin: 0 12px 12px; height: 28px; border-radius: 7px;
background: rgba(var(--accent-rgb),.1);
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 13px;
}
.gp-installed-txt { color: #22c55e; }
.gp-card {
flex-shrink: 0; width: 112px;
display: flex; flex-direction: column; padding: 10px 8px;
border-radius: 12px; text-decoration: none; color: inherit;
scroll-snap-align: start;
transition: background .15s;
}
.gp-card:hover { background: var(--sidebar-hover); }
.gp-card-icon {
width: 100%; aspect-ratio: 1/1; border-radius: 12px;
margin-bottom: 9px; position: relative;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: var(--sidebar); border: 0;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
.gp-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.gp-card-icon > span { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.gp-card-check {
position: absolute; bottom: 5px; right: 5px;
width: 17px; height: 17px; border-radius: 50%;
background: #22c55e; color: #fff; font-size: 8px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.gp-card-name {
font-size: 12px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3; margin-bottom: 2px;
}
.gp-card-type { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.gp-card-bottom { display: flex; align-items: center; gap: 4px; }
.gp-card-rating { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.gp-card-rating i { color: #f59e0b; font-size: 9px; }
.gp-card-price { font-size: 10.5px; color: var(--muted); }
.gp-price-installed { color: #22c55e !important; }
.gp-price-free {
display: inline-flex; align-items: center;
padding: 1px 9px; border-radius: 999px;
font-size: 11px; font-weight: 700; line-height: 1.5;
color: #16a34a; background: rgba(34,197,94,.14);
}
.gp-verified { color: var(--accent); }
.gp-verified-sm { font-size: 10px; }
.gp-star { color: #f59e0b; font-size: 10px; }
@media (max-width: 575.98px) {
.gp-porpagar-total {
width: 100%; text-align: left !important;
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.gp-porpagar .list-group-item { gap: 10px !important; }
.gp-porpagar-cuando {
min-width: 0 !important; width: 100%;
display: flex; align-items: center; gap: 8px;
}
.gp-porpagar-cuando > .small { margin-top: 0 !important; }
.gp-porpagar-monto {
width: 100%; margin-left: 0 !important;
justify-content: space-between; text-align: left !important;
}
}
@media (max-width: 768px) {
.gp-container { padding: 0 16px; }
.gp-block { padding: 20px 0 24px; }
}
.gp-burger {
display: none;
width: 38px; height: 38px; flex-shrink: 0; padding: 0;
border: none; background: none; color: var(--text);
font-size: 1.05rem; cursor: pointer; border-radius: 9px;
}
.gp-burger:hover { background: var(--sidebar-hover); }
.gp-nav-oc { width: min(290px, 86%); }
.gp-nav-oc-list { display: flex; flex-direction: column; padding: 6px 0; }
.gp-nav-oc-list > a {
display: flex; align-items: center; gap: 11px;
padding: 11px 18px; font-size: .92rem; text-decoration: none;
color: var(--text); transition: background .12s;
}
.gp-nav-oc-list > a:hover { background: var(--sidebar-hover); }
.gp-nav-oc-list > a.active { color: var(--accent); font-weight: 600; background: rgba(var(--accent-rgb),.10); }
.gp-nav-oc-list > a > i:first-child { color: var(--muted); font-size: .9rem; }
.gp-nav-oc-list > a.active > i:first-child { color: var(--accent); }
.gp-nav-oc-label {
padding: 14px 18px 5px; font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
@media (max-width: 600px) {
.gp-topbar { gap: 8px; padding: 0 12px; }
.gp-slide-btn { display: none; }
.gp-burger { display: inline-flex; align-items: center; justify-content: center; }
.gp-topbar-nav, .gp-topbar-end { display: none; }
.gp-search-wrap { flex: 1 1 auto; }
}
.lp-nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 16px;
padding: 0 32px; height: 60px;
background: rgba(0,0,0,.72);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
[data-bs-theme="light"] .lp-nav { background: rgba(241,245,249,.82); }
.lp-nav-brand {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex: 1;
}
.lp-nav-logo {
width: 28px; height: 28px; border-radius: 7px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.lp-nav-name {
font-size: 17px; font-weight: 700;
background: linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-nav-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 18px; border-radius: 7px; border: 1px solid var(--border);
background: none; color: var(--text); font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: border-color .15s, color .15s, background .15s;
}
.lp-nav-cta:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.lp-page { flex: 1; min-height: 0; overflow-y: auto; }
.lp-hero {
min-height: 88vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 80px 24px 60px;
position: relative; overflow: hidden;
}
.lp-hero-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.lp-stars {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
pointer-events: none; display: block;
}
.lp-hero-content { position: relative; z-index: 1; max-width: 740px; }
.lp-hero-logo {
display: block; margin: 0 auto 26px;
width: clamp(170px, 20vw, 250px); height: auto;
}
.lp-hero-logo--oscuro { display: none; }
[data-bs-theme="dark"] .lp-hero-logo--claro  { display: none; }
[data-bs-theme="dark"] .lp-hero-logo--oscuro { display: block; }
.lp-hero-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 999px; margin-bottom: 28px;
border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .1);
font-size: 12px; font-weight: 600; color: var(--accent2); letter-spacing: .03em;
}
.lp-hero-h1 {
font-size: clamp(30px, 5vw, 54px);
font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
color: var(--text); margin-bottom: 22px;
}
.lp-hero-h1 span {
background: linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-hero-sub {
font-size: clamp(15px, 2vw, 18px); color: var(--muted);
line-height: 1.6; margin-bottom: 40px; max-width: 580px; margin-left: auto; margin-right: auto;
}
.lp-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 30px; border-radius: 9px; border: none; cursor: pointer;
background: linear-gradient(90deg, var(--accent), var(--accent2));
color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
transition: opacity .2s, transform .15s;
box-shadow: 0 4px 18px rgba(var(--accent-rgb), .35);
}
.lp-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.lp-btn-secondary {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 28px; border-radius: 9px; cursor: pointer;
border: 1px solid var(--border); background: none;
color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
transition: border-color .15s, background .15s;
}
.lp-btn-secondary:hover { border-color: var(--muted); background: rgba(255,255,255,.03); }
.lp-features {
padding: 80px 32px;
background: rgba(255,255,255,.015);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
[data-bs-theme="light"] .lp-features { background: rgba(0,0,0,.025); }
.lp-features-title {
text-align: center; font-size: clamp(22px, 3vw, 34px);
font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -.02em;
}
.lp-features-sub { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 52px; }
.lp-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px; max-width: 1080px; margin: 0 auto;
}
.lp-feat-card {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 14px; padding: 28px 24px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-feat-card:hover {
border-color: var(--accent); transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(var(--accent-rgb), .12);
}
.lp-feat-icon {
width: 48px; height: 48px; border-radius: 12px;
background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .2);
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: var(--accent2); margin-bottom: 18px;
}
.lp-feat-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.lp-feat-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }
.lp-hero-trust {
display: flex; flex-wrap: wrap; gap: 10px 22px;
justify-content: center; margin-top: 28px;
}
.lp-hero-trust span {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--muted); font-weight: 500;
}
.lp-hero-trust i { color: var(--accent2); font-size: 12px; }
.lp-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.lp-eyebrow {
display: inline-block; margin-bottom: 12px;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent2);
}
.lp-section-title {
font-size: clamp(22px, 3vw, 34px); font-weight: 800;
color: var(--text); margin-bottom: 12px; letter-spacing: -.02em; line-height: 1.18;
}
.lp-section-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }
.lp-apps { padding: 80px 32px; }
.lp-apps-cat { max-width: 1080px; margin: 0 auto 44px; }
.lp-apps-cat:last-child { margin-bottom: 0; }
.lp-apps-cat-title {
display: flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 700; color: var(--text);
margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.lp-apps-cat-title i { color: var(--accent2); font-size: 13px; }
.lp-apps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.lp-app-card {
display: block; text-decoration: none;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 18px;
transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lp-app-card:hover {
border-color: var(--accent); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(var(--accent-rgb), .12);
}
.lp-app-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 17px; color: #fff; margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.lp-app-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.lp-app-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.lp-band {
padding: 56px 32px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.lp-band-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
max-width: 960px; margin: 0 auto; text-align: center;
}
.lp-stat-num { font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: #fff; line-height: 1; }
.lp-stat-label { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 8px; font-weight: 500; }
.lp-cta {
padding: 80px 24px; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.lp-cta-title {
font-size: clamp(24px, 3.5vw, 38px); font-weight: 800;
color: var(--text); margin-bottom: 12px; letter-spacing: -.02em;
}
.lp-cta-sub { font-size: 15px; color: var(--muted); margin-bottom: 32px; max-width: 540px; line-height: 1.6; }
@media (max-width: 640px) {
.lp-apps, .lp-features { padding: 56px 20px; }
.lp-band-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.lp-section-head { margin-bottom: 36px; }
.lp-app-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 14px;
padding: 14px 16px;
}
.lp-app-icon { grid-row: 1 / span 2; margin-bottom: 0; }
.lp-app-name { grid-column: 2; margin-bottom: 3px; }
.lp-app-desc { grid-column: 2; }
}
.lp-login-section {
padding: 80px 24px 60px;
display: flex; flex-direction: column; align-items: center;
}
.lp-login-section-title {
font-size: clamp(20px, 2.5vw, 30px); font-weight: 800;
color: var(--text); margin-bottom: 6px; text-align: center; letter-spacing: -.02em;
}
.lp-login-section-sub { font-size: 14px; color: var(--muted); margin-bottom: 36px; text-align: center; }
.lp-footer {
border-top: 1px solid var(--border);
padding: 24px 32px;
display: flex; align-items: center; justify-content: center; gap: 12px;
font-size: 12px; color: var(--muted);
}
.lp-footer-sep { opacity: 0.35; }
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--text); }
.cal-landing { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.cal-hero {
position: relative;
overflow: hidden;
min-height: 520px;
display: flex;
align-items: center;
}
.cal-hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
z-index: 0;
}
.cal-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 400px at 70% 50%, rgba(37,99,235,.18) 0%, transparent 70%),
radial-gradient(ellipse 300px 300px at 20% 80%, rgba(245,158,11,.12) 0%, transparent 60%);
}
.cal-hero-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 64px 32px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 768px) {
.cal-hero-inner { grid-template-columns: 1fr; padding: 48px 20px; }
.cal-hero-mockup { display: none; }
}
.cal-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,158,11,.15);
border: 1px solid rgba(245,158,11,.35);
color: #f59e0b;
font-size: .8rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 20px;
letter-spacing: .3px;
}
.cal-hero-h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -.5px;
}
.cal-hero-accent {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cal-hero-sub {
color: rgba(255,255,255,.65);
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 32px;
max-width: 480px;
}
.cal-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cal-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f59e0b;
color: #000;
font-weight: 700;
font-size: .95rem;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
transition: background .2s, transform .15s;
}
.cal-btn-primary:hover { background: #fbbf24; transform: translateY(-1px); color: #000; }
.cal-btn-primary.cal-btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.cal-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.85);
font-weight: 600;
font-size: .95rem;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
transition: background .2s;
}
.cal-btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
.cal-hero-mockup { perspective: 900px; }
.cal-mockup-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(8px);
transform: rotateY(-8deg) rotateX(4deg);
box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.cal-mockup-header {
background: rgba(255,255,255,.06);
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.cal-mockup-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.cal-mockup-month { color: rgba(255,255,255,.9); font-weight: 700; font-size: .85rem; }
.cal-mockup-arrows { display: flex; gap: 8px; color: rgba(255,255,255,.5); font-size: .9rem; cursor: default; }
.cal-mockup-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.cal-mockup-days span { color: rgba(255,255,255,.45); font-size: .65rem; font-weight: 600; }
.cal-mockup-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 8px 10px 12px;
}
.cal-mockup-cell {
min-height: 40px;
border-radius: 6px;
padding: 4px 5px;
font-size: .7rem;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.03);
}
.cal-mockup-other { color: rgba(255,255,255,.2); }
.cal-mockup-today {
background: rgba(245,158,11,.25);
color: #f59e0b;
font-weight: 700;
}
.cal-mock-chip {
font-size: .6rem;
padding: 2px 4px;
border-radius: 3px;
color: #fff;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cal-stats-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
padding: 20px 32px;
background: var(--header);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.cal-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 32px;
}
.cal-stat i { font-size: 1.4rem; color: #f59e0b; }
.cal-stat strong { display: block; font-size: .9rem; }
.cal-stat span { font-size: .78rem; color: var(--muted); }
.cal-stat-divider { width: 1px; height: 40px; background: var(--border); }
.cal-section {
padding: 72px 32px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.cal-section--alt { background: var(--header); max-width: 100%; }
.cal-section--alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cal-section-label {
font-size: .75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #f59e0b;
margin-bottom: 10px;
}
.cal-section-h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
margin-bottom: 40px;
letter-spacing: -.3px;
}
.cal-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.cal-feature-card {
display: flex;
align-items: flex-start;
gap: 18px;
background: var(--header);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 22px;
transition: box-shadow .2s, border-color .2s;
}
.cal-feature-card:hover {
border-color: rgba(245,158,11,.4);
box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.cal-feature-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 10px;
background: color-mix(in srgb, var(--fi-color, #3b82f6) 15%, transparent);
color: var(--fi-color, #3b82f6);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.cal-feature-content h4 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.cal-feature-content p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.55; }
.cal-how-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 700px) {
.cal-how-grid { grid-template-columns: 1fr; }
.cal-how-divider { display: none; }
}
.cal-how-col { display: flex; flex-direction: column; gap: 0; }
.cal-how-badge {
display: inline-flex;
align-items: center;
font-size: .8rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 99px;
margin-bottom: 24px;
width: fit-content;
}
.cal-step-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.cal-step-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-size: .78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.cal-step-connector {
width: 1px;
height: 28px;
background: var(--border);
margin-left: 13px;
}
.cal-how-divider {
width: 1px;
background: var(--border);
align-self: stretch;
}
.cal-cta-section {
background: linear-gradient(135deg, #1e293b 0%, #1e1b4b 100%);
padding: 72px 32px;
text-align: center;
}
.cal-cta-inner { max-width: 560px; margin: 0 auto; }
.cal-cta-h2 { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cal-cta-sub { color: rgba(255,255,255,.6); margin-bottom: 28px; font-size: 1rem; }
.cal-landing-footer {
border-top: 1px solid var(--border);
padding: 20px 32px;
text-align: center;
font-size: 12px;
color: var(--muted);
}
.cal-footer-sep { opacity: .35; margin: 0 8px; }
.cal-landing-footer a { color: var(--muted); text-decoration: none; }
.cal-landing-footer a:hover { color: var(--text); }
.cal-expl {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
background: var(--bg);
}
.cal-expl-header {
position: relative;
overflow: hidden;
flex-shrink: 0;
padding: 36px 32px 32px;
}
.cal-expl-header-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
z-index: 0;
}
.cal-expl-header-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 500px 300px at 80% 50%, rgba(37,99,235,.2) 0%, transparent 70%);
}
.cal-expl-header-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.cal-expl-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0; }
.cal-expl-subtitle { font-size: .85rem; color: rgba(255,255,255,.55); margin: 2px 0 0; }
.cal-expl-search-wrap { margin-top: 20px; max-width: 560px; }
.cal-expl-search {
position: relative;
display: flex;
align-items: center;
}
.cal-expl-search-icon {
position: absolute;
left: 14px;
color: rgba(255,255,255,.4);
font-size: .9rem;
pointer-events: none;
}
.cal-expl-search-input {
width: 100%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
padding: 11px 44px 11px 40px;
color: #fff;
font-size: .95rem;
outline: none;
transition: border-color .2s, background .2s;
}
.cal-expl-search-input::placeholder { color: rgba(255,255,255,.35); }
.cal-expl-search-input:focus {
border-color: rgba(245,158,11,.6);
background: rgba(255,255,255,.12);
}
.cal-expl-search-clear {
position: absolute;
right: 10px;
background: none;
border: none;
color: rgba(255,255,255,.4);
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
font-size: .85rem;
line-height: 1;
transition: color .15s;
}
.cal-expl-search-clear:hover { color: rgba(255,255,255,.8); }
.cal-expl-body { padding: 24px 32px 32px; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.cal-expl-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.cal-expl-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 99px;
border: 1px solid var(--border);
background: var(--header);
color: var(--muted);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
a.cal-filter-chip { text-decoration: none; }
.cal-filter-chip:hover { border-color: #f59e0b; color: var(--text); }
.cal-filter-chip--active {
background: #f59e0b;
border-color: #f59e0b;
color: #000;
}
.cal-expl-count { font-size: .82rem; color: var(--muted); }
.cal-expl-org + .cal-expl-org { margin-top: 8px; }
.cal-expl-org-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.cal-expl-org-logo {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 10px;
border: 1px solid var(--border);
background: #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: .8rem;
font-weight: 800;
color: #f59e0b;
}
.cal-expl-org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cal-expl-org-logo--ini { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
.cal-expl-org-info { min-width: 0; }
.cal-expl-org-nombre {
font-size: 1.05rem;
font-weight: 700;
margin: 0;
line-height: 1.25;
color: var(--text);
}
.cal-expl-org-meta { font-size: .78rem; color: var(--muted); }
.cal-expl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.cal-expl-card {
display: flex;
flex-direction: column;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--header);
text-decoration: none;
color: var(--text);
transition: border-color .2s, box-shadow .2s, transform .15s;
position: relative;
}
.cal-expl-card:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 8px 28px rgba(0,0,0,.14);
transform: translateY(-2px);
color: var(--text);
}
.cal-expl-card-accent {
height: 4px;
width: 100%;
flex-shrink: 0;
}
.cal-expl-card-inner { display: flex; flex-direction: column; flex: 1; }
.cal-expl-card-img {
height: 100px;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
}
.cal-expl-card-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.5));
}
.cal-expl-card-body {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.cal-expl-card-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.cal-cap-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .7rem;
font-weight: 600;
padding: 3px 8px;
border-radius: 99px;
}
.cal-cap-badge--evento {
background: rgba(59,130,246,.12);
color: #3b82f6;
border: 1px solid rgba(59,130,246,.25);
}
.cal-cap-badge--cita {
background: rgba(245,158,11,.12);
color: #f59e0b;
border: 1px solid rgba(245,158,11,.25);
}
.cal-expl-card-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.3;
}
.cal-expl-card-desc {
font-size: .82rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 14px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cal-expl-card-desc--empty { font-style: italic; }
.cal-expl-card-horario {
list-style: none;
padding: 0 0 0 20px;
margin: 0 0 14px;
font-size: .8rem;
line-height: 1.6;
position: relative;
}
.cal-expl-card-horario li { display: flex; gap: 8px; }
.cal-expl-card-horario .fa-clock { position: absolute; left: 0; top: .3em; font-size: .75rem; color: var(--muted); }
.cal-expl-card-horario-dias { color: var(--muted); min-width: 72px; }
.cal-expl-card-horario-horas { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-expl-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.cal-expl-card-tipo { font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.cal-expl-card-cta {
font-size: .8rem;
font-weight: 600;
color: var(--muted);
transition: color .15s;
}
.cal-expl-card:hover .cal-expl-card-cta { color: #f59e0b; }
.cal-expl-skeleton {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--header);
}
.cal-skel-bar {
height: 4px;
background: var(--border);
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
.cal-skel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-skel-line {
height: 12px;
border-radius: 6px;
background: var(--border);
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
.cal-skel-line--short { width: 40%; height: 10px; }
.cal-skel-line--title { width: 75%; height: 16px; }
.cal-skel-line--half  { width: 55%; }
.cal-skel-btn {
height: 32px;
border-radius: 8px;
background: var(--border);
margin-top: 8px;
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes cal-skel-pulse {
0%, 100% { opacity: 1; }
50%       { opacity: .45; }
}
.cal-expl-empty {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.cal-expl-empty i { font-size: 3rem; margin-bottom: 16px; display: block; opacity: .5; }
.cal-expl-empty h5 { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cal-expl-empty p { font-size: .9rem; line-height: 1.6; margin: 0; }
.cal-expl-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.cal-pag-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--header);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
transition: all .15s;
}
.cal-pag-btn:hover:not(:disabled) { border-color: #f59e0b; color: #f59e0b; }
.cal-pag-btn:disabled { opacity: .35; cursor: default; }
.cal-pag-info { font-size: .9rem; font-weight: 600; min-width: 60px; text-align: center; }
.cal-pag-sep { color: var(--muted); margin: 0 4px; }
.mc-body { max-width: 760px; }
.mc-seccion {
display: flex;
align-items: center;
gap: 8px;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
margin: 4px 0 10px;
}
.mc-seccion-n {
font-size: .7rem;
font-weight: 600;
padding: 1px 7px;
border-radius: 99px;
border: 1px solid var(--border);
background: var(--header);
}
.mc-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.mc-cita {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--header);
color: var(--text);
text-decoration: none;
transition: border-color .15s;
}
a.mc-cita[href]:hover { border-color: rgba(245,158,11,.5); color: var(--text); }
.mc-cita--pasada { opacity: .75; }
.mc-fecha {
width: 54px;
flex-shrink: 0;
text-align: center;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg);
}
.mc-fecha-mes { display: block; padding: 2px 0; font-size: .65rem; font-weight: 700; text-transform: uppercase; color: #fff; }
.mc-fecha-dia { display: block; padding-top: 2px; font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.mc-fecha-anio { display: block; padding-bottom: 3px; font-size: .62rem; color: var(--muted); }
.mc-info { flex: 1; min-width: 0; }
.mc-titulo { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: .8rem; }
.mc-meta i, .mc-dir i { width: 14px; margin-right: 5px; font-size: .72rem; color: var(--muted); }
.mc-org { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: .78rem; color: var(--muted); min-width: 0; }
.mc-org img { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; border-radius: 3px; background: #fff; }
.mc-org-txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mc-dir { margin-top: 2px; font-size: .78rem; color: var(--muted); }
.mc-lado { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mc-cuando,
.mc-estatus {
font-size: .7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
border: 1px solid var(--border);
color: var(--muted);
white-space: nowrap;
}
.mc-cuando { color: #f59e0b; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
.mc-estatus--realizada { color: #16a34a; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); }
.mc-estatus--cancelada { color: #dc2626; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
.mc-chev { font-size: .75rem; color: var(--muted); }
@media (max-width: 576px) {
.cal-expl-header { padding: 24px 16px 20px; }
.cal-expl-body { padding: 16px 16px 24px; }
.mc-cita { gap: 10px; padding: 10px 12px; }
}
.cal-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--header);
transition: box-shadow .2s;
}
.cal-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.cal-card-strip { height: 5px; }
.cal-card-body { padding: 16px; }
.cal-header {
background-size: cover;
background-position: center;
}
.cal-header-overlay {
background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
}
.cal-header-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.gcal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border: 1px solid var(--border);
overflow: hidden;
}
.gcal-day-header {
padding: 8px 4px;
text-align: center;
font-size: .75rem;
font-weight: 600;
color: var(--muted);
background: var(--header);
border-bottom: 1px solid var(--border);
}
.gcal-cell {
min-height: 90px;
padding: 6px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
vertical-align: top;
background: var(--bg);
transition: background .15s;
}
.gcal-cell:nth-child(7n) { border-right: none; }
.gcal-cell:hover { background: var(--sidebar-hover); }
.gcal-cell--other-month { opacity: .4; }
.gcal-cell--today .gcal-cell-num {
background: var(--accent);
color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.gcal-cell-num {
font-size: .8rem;
font-weight: 600;
margin-bottom: 4px;
color: var(--text);
}
.gcal-event-chip {
display: block;
font-size: .7rem;
padding: 1px 5px;
border-radius: 4px;
color: #fff;
margin-bottom: 2px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity .15s;
}
.gcal-event-chip:hover { opacity: .85; }
.gcal-event-time { opacity: .8; margin-right: 3px; }
.gcal-event-more { font-size: .68rem; padding: 1px 4px; }
.pay-page {
flex: 1;
overflow-y: auto;
background: var(--bg);
color: var(--text);
}
.pay-page .pay-hero {
background: linear-gradient(135deg, #5E17EB 0%, #3F12A6 100%);
position: relative; overflow: hidden;
}
.pay-page .pay-hero::before {
content: '';
position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,.06);
top: -160px; right: -120px; pointer-events: none;
}
.pay-page .pay-hero::after {
content: '';
position: absolute;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; left: -60px; pointer-events: none;
}
.pay-page .pay-card-mock {
background: linear-gradient(135deg, var(--accent), var(--accent2));
border-radius: 20px; padding: 28px 30px;
color: #fff; max-width: 320px;
box-shadow: 0 24px 48px rgba(0,0,0,.35);
position: relative; overflow: hidden;
}
.pay-page .pay-card-mock::before {
content: '';
position: absolute;
width: 180px; height: 180px; border-radius: 50%;
border: 32px solid rgba(255,255,255,.08);
top: -50px; right: -50px;
}
.pay-page .pay-card-chip {
width: 40px; height: 30px;
background: linear-gradient(135deg, #f0d060, #c8a820);
border-radius: 6px; margin-bottom: 28px;
}
.pay-page .pay-stats-strip { background: var(--input-bg); }
.pay-page .pay-stat-num {
font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1;
}
.pay-page .pay-method-icon {
width: 64px; height: 64px; border-radius: 16px;
background: rgba(var(--accent-rgb), .15);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
transition: transform .2s;
}
.pay-page .card:hover .pay-method-icon { transform: scale(1.1); }
.pay-page .pay-step-num {
width: 48px; height: 48px; border-radius: 50%;
background: var(--accent); color: #fff;
font-weight: 800; font-size: 1.1rem;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pay-page .pay-industry-card { border-top: 4px solid var(--accent) !important; }
.pay-page .pay-code-block {
background: #0d1117; border-radius: 12px; overflow: hidden;
}
.pay-page .pay-code-bar {
background: #161b22; padding: 10px 16px;
display: flex; align-items: center; gap: 8px;
}
.pay-page .pay-dot { width: 12px; height: 12px; border-radius: 50%; }
.pay-page .pay-code-body {
padding: 20px; font-family: 'Courier New', monospace;
font-size: .82rem; line-height: 1.7;
}
.pay-page .tok-key  { color: #79c0ff; }
.pay-page .tok-str  { color: #a5d6ff; }
.pay-page .tok-num  { color: #f8c555; }
.pay-page .tok-bool { color: #ff7b72; }
.pay-page .tok-punc { color: #8b949e; }
.pay-page .pay-webhook-icon {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: rgba(94,23,235,.12); color: #5E17EB; font-size: 1.05rem;
}
.pay-page .pay-webhook-text { min-width: 0; }
.pay-page .pay-trust-badge {
display: flex; align-items: center; gap: 8px;
font-size: .9rem; color: var(--muted);
}
.pay-page .pay-trust-badge i { color: var(--accent); font-size: 1.1rem; }
.pay-page .pay-section-white { background: var(--sidebar); }
.pay-page .pay-section-gray  { background: var(--input-bg); }
.pay-page .pay-cta {
background: linear-gradient(135deg, #3F12A6 0%, #5E17EB 100%);
position: relative; overflow: hidden;
}
.pay-page .pay-cta::before {
content: '';
position: absolute;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(255,255,255,.05);
top: -150px; left: -100px;
}
.pay-page .pay-cta::after {
content: '';
position: absolute;
width: 250px; height: 250px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; right: -60px;
}
.pay-page .card {
border: 1px solid var(--border);
background: var(--sidebar); color: var(--text);
}
.pay-page .pay-footer {
border-top: 1px solid var(--border);
padding: 20px 32px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--muted); background: var(--sidebar);
}
.pay-page .pay-footer a { color: var(--muted); text-decoration: none; }
.pay-page .pay-footer a:hover { color: var(--accent); }
.pay-page { --lp-accent: #5E17EB; --lp-accent-rgb: 94,23,235; }
.pay-page .pay-step-num      { background: var(--lp-accent); }
.pay-page .pay-stat-num      { color: var(--lp-accent); }
.pay-page .pay-industry-card { border-top-color: var(--lp-accent) !important; }
.pay-page .pay-method-icon   { background: rgba(var(--lp-accent-rgb),.15); }
.pay-page .pay-method-icon i { color: var(--lp-accent) !important; }
.pay-page .pay-trust-badge i { color: var(--lp-accent); }
.pay-page .pay-card-mock     { background: linear-gradient(135deg, #5E17EB, #8E5DF1); }
.pay-page .pay-footer a:hover { color: var(--lp-accent); }
.ce-page { --lp-accent: #059669; --lp-accent-rgb: 5,150,105; --accent: #059669; --accent-rgb: 5,150,105; --accent2: #10b981; }
.ce-page .pay-hero          { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.ce-page .pay-cta           { background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
.ce-page .pay-step-num      { background: #059669; }
.ce-page .pay-stat-num      { color: #059669; }
.ce-page .pay-industry-card { border-top-color: #059669 !important; }
.ce-page .pay-method-icon   { background: rgba(5,150,105,.15); }
.ce-page .pay-method-icon i { color: #059669 !important; }
.ce-page .pay-trust-badge i { color: #059669; }
.ce-db-mock {
background: #0d1117; border-radius: 14px; overflow: hidden;
box-shadow: 0 28px 56px rgba(0,0,0,.45);
}
.ce-db-bar {
background: #161b22; padding: 10px 16px;
display: flex; align-items: center; gap: 8px;
}
.ce-db-body { padding: 14px; }
.ce-db-head {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border-radius: 6px; margin-bottom: 2px;
font-size: .72rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #6ee7b7;
background: rgba(5,150,105,.2);
}
.ce-db-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 6px; margin-bottom: 2px;
font-size: .8rem; color: #c9d1d9; cursor: default;
}
.ce-db-row:hover { background: rgba(255,255,255,.04); }
.ce-db-name  { flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-db-grade { flex: 1; text-align: center; font-weight: 700; color: #f8c555; }
.ce-db-att   { flex: 1; text-align: center; }
.ce-db-ok   { display:inline-block; background:rgba(34,197,94,.2);  color:#4ade80; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-warn { display:inline-block; background:rgba(251,191,36,.2); color:#fbbf24; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-low  { display:inline-block; background:rgba(239,68,68,.2);  color:#f87171; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-sep { border-color: rgba(255,255,255,.06) !important; margin: 8px 0; }
.ce-db-footer {
padding: 10px 10px 4px;
display: flex; justify-content: space-between; align-items: center;
font-size: .72rem; color: #6e7681;
}
.ce-hero-cards { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ce-hero-card {
background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
padding: 14px 18px; color: #fff;
}
.ce-hero-card-icon {
width: 36px; height: 36px; border-radius: 10px;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
}
.ce-progress-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.ce-progress-fill { height: 100%; border-radius: 3px; background: #4ade80; }
.ce-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.ce-module-pill {
display: flex; align-items: center; gap: 10px;
padding: 13px 15px; border-radius: 10px;
border: 1px solid var(--border); background: var(--sidebar);
font-size: .83rem; color: var(--text);
transition: border-color .2s, transform .15s, box-shadow .15s;
text-decoration: none;
}
.ce-module-pill:hover {
border-color: #059669; transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(5,150,105,.15); color: var(--text);
}
.ce-module-pill i { color: #059669; font-size: 1rem; flex-shrink: 0; }
.ce-feat-strip {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; padding: 28px 0 8px;
}
.ce-feat-tag {
display: flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px;
border: 1px solid var(--border); background: var(--sidebar);
font-size: .82rem; color: var(--muted);
}
.ce-feat-tag i { color: #059669; }
.app-chip-icon {
width: 34px; height: 34px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--text); flex-shrink: 0; overflow: hidden;
}
.badge-app     { background: rgba(var(--accent-rgb),.2); color: var(--accent); }
.badge-plugin  { background: rgba(96,165,250,.15); color: #60a5fa; }
.badge-instalada { background: rgba(74,222,128,.15); color: #4ade80; }
.text-accent        { color: var(--accent) !important; }
.text-xs            { font-size: .78rem !important; }
.text-xxs           { font-size: .72rem !important; }
.mono-label         { font-size: .75rem; font-family: monospace; }
.badge-accent       { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-radius: .35rem; padding: 2px 8px; font-size: .8rem; font-weight: 600; }
.badge-accent-xs    { background: rgba(var(--accent-rgb), .15); color: var(--accent); border-radius: .35rem; padding: 1px 6px; font-size: .7rem;  font-weight: 600; }
.feature-check-icon { color: var(--accent); font-size: .85rem; margin-top: 2px; flex-shrink: 0; }
.feature-check-item { display: flex; align-items: flex-start; gap: 6px; }
.info-card-title    { font-weight: 600; font-size: .85rem; }
.info-card-desc     { color: var(--muted); font-size: .78rem; }
.page-blocked {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 24px; padding: 60px 32px; text-align: center;
}
.blocked-badge {
width: 72px; height: 72px; border-radius: 20px;
background: rgba(220, 53, 69, .1);
border: 1.5px solid rgba(220, 53, 69, .25);
display: flex; align-items: center; justify-content: center;
font-size: 2rem; color: #e05260;
}
.blocked-body { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.blocked-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; }
.blocked-sub { font-size: .875rem; color: var(--muted); margin: 0; line-height: 1.55; }
.page-root-hub {
padding: 18px 22px;
}
.root-hub-header {
display: flex; flex-direction: row; align-items: center;
gap: 12px; margin-bottom: 14px;
}
.root-hub-logo {
width: 38px; height: 38px; border-radius: 10px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 18px; flex-shrink: 0;
}
.root-hub-header-text {
display: flex; flex-direction: column; gap: 2px;
}
.root-hub-title {
font-size: 1.3rem; font-weight: 700; color: var(--text); letter-spacing: -.4px; margin: 0;
}
.root-hub-sub {
font-size: .875rem; color: var(--muted); margin: 0;
}
.nav-menu-loading {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; font-size: .78rem; color: var(--muted);
}
.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 14px;
background: transparent; border: none; border-radius: 7px;
color: var(--nav-text, var(--text)); font-size: .83rem; font-weight: 500;
cursor: pointer; text-align: left;
transition: background .15s, color .15s;
}
.nav-group-toggle:hover { background: var(--sidebar-hover); color: var(--text); }
.nav-group-toggle.open { color: var(--accent); }
.nav-group-toggle i:first-child { width: 18px; text-align: center; font-size: .85rem; flex-shrink: 0; }
.nav-chevron { margin-left: auto; font-size: .65rem; transition: transform .2s; }
.nav-chevron.up { transform: rotate(180deg); }
.nav-submenu {
display: flex; flex-direction: column; gap: 1px;
padding: 2px 8px 4px 36px;
}
.nav-submenu a {
display: block; padding: 7px 10px; border-radius: 6px;
font-size: .8rem; color: var(--muted); text-decoration: none !important;
transition: background .15s, color .15s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-submenu a:hover { background: var(--sidebar-hover); color: var(--text); }
.nav-submenu a.active { background: var(--accent-soft, rgba(99,102,241,.12)); color: var(--accent); font-weight: 600; }
.http-loading-bar {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 9999; pointer-events: none; overflow: hidden;
opacity: 0; transition: opacity .15s;
}
.http-loading-bar.active { opacity: 1; }
.http-loading-fill {
width: 100%; height: 100%; background: var(--accent);
transform: translateX(-100%);
animation: http-loading-slide 1.2s ease-in-out infinite;
}
@keyframes http-loading-slide {
0%   { transform: translateX(-100%); }
60%  { transform: translateX(20%); }
100% { transform: translateX(100%); }
}
.app-component-loading,
.app-component-empty {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 12px;
min-height: 200px; color: var(--muted); font-size: .85rem;
}
.app-embed-wrap  { position: relative; width: 100%; height: calc(100vh - var(--header-h)); }
.app-embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.app-nativa-content { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem; }
.app-nativa-content.nativa-panel { overflow: hidden !important; padding: 0 !important; display: flex; flex-direction: column; min-height: 0; }
.ce-admin-root, .web-admin-root { display: flex; flex: 1; min-height: 0; overflow: hidden; flex-direction: column; }
.ce-escolares-admin { position: relative; }
.ce-suspension {
position: absolute; inset: 0; z-index: 30;
display: flex; align-items: center; justify-content: center;
padding: 24px 16px; overflow-y: auto; background: var(--bg);
}
.ce-suspension-card {
width: 100%; max-width: 460px; text-align: center;
background: var(--card); border: 1px solid var(--border);
border-radius: 16px; padding: 40px 32px;
}
.ce-suspension-icon {
width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
background: rgba(220, 38, 38, .14); color: #dc2626; font-size: 1.7rem;
}
.ce-suspension-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.ce-suspension-text { color: var(--muted); font-size: .95rem; margin-bottom: 18px; line-height: 1.5; }
.ce-suspension-meta { margin-bottom: 22px; }
.ce-suspension-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ce-suspension-actions .btn-lg { min-width: 220px; }
.ce-suspension-hint { color: var(--muted); font-size: .8rem; margin: 22px 0 0; line-height: 1.45; }
.ce-picker {
flex: 1; display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 32px 16px; background: var(--bg);
}
.ce-picker-inner { width: 100%; max-width: 560px; }
.ce-picker-header { text-align: center; margin-bottom: 32px; }
.ce-picker-logo {
width: 60px; height: 60px; border-radius: 16px;
background: rgba(var(--accent-rgb), .12); color: var(--accent);
font-size: 1.5rem; display: inline-flex; align-items: center;
justify-content: center; margin-bottom: 14px;
}
.ce-picker-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.ce-picker-sub { color: var(--muted); font-size: .9rem; margin: 0; }
.ce-picker-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ce-picker-card {
display: flex; align-items: center; gap: 14px;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 16px 18px; cursor: pointer;
text-align: left; width: 100%; transition: border-color .15s, box-shadow .15s;
color: var(--text);
}
.ce-picker-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(var(--accent-rgb), .15); }
.ce-picker-card-icon {
width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
background: rgba(var(--accent-rgb), .1); color: var(--accent);
display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ce-picker-card-body { flex: 1; min-width: 0; }
.ce-picker-card-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-picker-card-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ce-picker-card-arrow { color: var(--muted); font-size: .75rem; flex-shrink: 0; }
.ce-picker-empty { text-align: center; padding: 32px 0; color: var(--muted); }
.ce-picker-empty i { font-size: 2.5rem; opacity: .2; display: block; margin-bottom: 12px; }
.ce-picker-empty p { margin: 0 0 4px; font-size: .9rem; }
.ce-picker-empty small { font-size: .78rem; }
.ce-picker-footer { text-align: center; }
.ce-picker-nueva {
background: transparent; border: 1.5px dashed var(--border);
color: var(--muted); border-radius: 10px; padding: 12px 28px;
font-size: .88rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.ce-picker-nueva:hover { background: var(--sidebar-hover); border-color: var(--text); }
.ce-admin-school-active {
display: flex; align-items: center; gap: 6px;
background: var(--sidebar-hover); border-radius: 8px;
padding: 8px 10px; font-size: .84rem;
}
.ce-admin {
display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative;
background: var(--bg);
}
.ce-admin-sidebar {
width: 260px; flex-shrink: 0;
background: var(--sidebar); border-right: 1px solid var(--border);
display: flex; flex-direction: column; overflow: hidden;
transition: transform .25s;
}
.ce-admin-sidebar-hd {
padding: 14px 16px 12px; flex-shrink: 0;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.ce-admin-sidebar-hd .fw-bold {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ce-admin-sidebar-hd .ce-admin-logo,
.cta-aside-hd .ce-admin-logo {
width: 30px; height: 30px; border-radius: 8px; background: rgba(37,99,235,.12);
display: flex; align-items: center; justify-content: center;
color: #2563eb; font-size: .9rem; flex-shrink: 0;
}
.cta-aside-hd .ce-admin-logo,
.org-settings-container .ce-admin-logo {
background: rgba(var(--accent-rgb), .12);
color: var(--accent);
}
.ce-admin-school-sel {
padding: 10px 12px; flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.ce-admin-school-label {
font-size: .62rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); margin-bottom: 6px;
}
.ce-admin-nueva-btn {
width: 100%; background: transparent; font-size: .78rem;
border: 1px dashed var(--border); color: var(--muted);
border-radius: 6px; padding: 5px 10px; cursor: pointer;
transition: background .15s, border-color .15s;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ce-admin-nueva-btn:hover { background: var(--sidebar-hover); border-color: var(--text); }
.ce-cal-section {
flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--border);
padding: 10px 8px 8px;
display: flex; flex-direction: column; overflow: hidden;
}
.ce-cal-section-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 0 8px 6px;
}
.ce-cal-add {
width: 24px; height: 24px; border-radius: 6px; border: none;
background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
.ce-cal-add:hover { background: var(--sidebar-hover); color: var(--text); }
.ce-cal-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ce-cal-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 7px; margin: 1px 0; transition: background .12s;
}
.ce-cal-item:hover { background: var(--sidebar-hover); }
.ce-cal-item.active { background: rgba(var(--accent-rgb), .12); }
.ce-cal-dot {
width: 17px; height: 17px; border-radius: 5px; border: 2px solid; background: transparent;
flex-shrink: 0; cursor: pointer; padding: 0; color: #fff; font-size: .58rem;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
.ce-cal-name {
flex: 1; min-width: 0; font-size: .84rem; color: var(--text); cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-cal-item.active .ce-cal-name { font-weight: 600; }
.ce-cal-gicon { color: #4caf50; font-size: .66rem; flex-shrink: 0; opacity: .9; }
.ce-cal-menu-wrap { flex-shrink: 0; position: relative; }
.ce-cal-menu-btn {
width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent;
color: var(--muted); cursor: pointer; font-size: .82rem; opacity: .55;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s, opacity .12s;
}
.ce-cal-item:hover .ce-cal-menu-btn, .ce-cal-item.active .ce-cal-menu-btn { opacity: 1; }
.ce-cal-menu-btn:hover { background: var(--border); color: var(--text); }
.ce-cal-empty { padding: 12px; text-align: center; font-size: .78rem; color: var(--muted); }
.ce-cal-menu-pop {
position: fixed; z-index: 1090;
background: var(--sidebar, #fff);
border: 1px solid var(--border, #dee2e6);
border-radius: 9px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
padding: 5px;
display: flex; flex-direction: column; gap: 1px;
}
[data-bs-theme="dark"] .ce-cal-menu-pop { box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.ce-cal-menu-pop button {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
border: none; background: transparent; color: var(--text); font-size: .82rem; text-align: left;
border-radius: 6px; cursor: pointer; transition: background .12s; white-space: nowrap;
}
.ce-cal-menu-pop button:hover { background: var(--sidebar-hover); }
.ce-cal-menu-pop button i { width: 14px; opacity: .7; }
.ce-cal-menu-sep { height: 1px; background: var(--border, #dee2e6); margin: 4px 2px; }
.ce-cal-menu-pop button.ce-cal-menu-danger { color: #dc3545; }
.ce-cal-menu-pop button.ce-cal-menu-danger i { opacity: .85; }
.ce-cal-menu-pop button.ce-cal-menu-danger:hover { background: rgba(220,53,69,.1); }
.ce-admin-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 8px; }
.ce-admin-nav-label {
font-size: .6rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); padding: 10px 18px 4px;
}
.ce-admin-nav a {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; font-size: .87rem; color: var(--text);
text-decoration: none; cursor: pointer; border-radius: 6px;
margin: 1px 8px; transition: background .12s;
}
.ce-admin-nav a:hover { background: var(--sidebar-hover); }
.ce-admin-nav a.active {
background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 600;
}
.ce-admin-nav a.ce-nav-disabled { opacity: .38; pointer-events: none; cursor: default; }
.ce-admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ce-admin-topbar {
height: 52px; flex-shrink: 0; background: var(--sidebar);
border-bottom: 1px solid var(--border);
padding: 0 16px; gap: 12px;
display: none; align-items: center;
}
.ce-admin-topbar-title { font-size: .9rem; font-weight: 600; }
.ce-admin-topbar-school { font-size: .75rem; color: var(--muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ce-admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1049; }
.ce-admin-welcome { flex: 1; overflow-y: auto; padding: 28px 24px; }
.ce-admin-school-card {
background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 62%, #000) 100%);
border-radius: 14px; padding: 22px 24px; color: #fff; margin-bottom: 24px;
}
.ce-admin-mod-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.ce-admin-mod-card {
background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px;
padding: 20px 16px; cursor: pointer; text-align: center;
transition: border-color .18s, transform .15s, box-shadow .15s;
color: var(--text); text-decoration: none; display: block;
}
.ce-admin-mod-card:hover {
border-color: var(--accent); transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(var(--accent-rgb), .12); color: var(--text);
}
.ce-admin-mod-card i { font-size: 1.5rem; color: var(--accent); margin-bottom: 10px; display: block; }
.ce-admin-mod-card span { font-size: .85rem; font-weight: 600; }
.ce-tablero {
--tb-surface: var(--card);
--tb-c-h:  #2a78d6;
--tb-c-m:  #e0559a;
--tb-c-o:  #b8bec7;
--tb-c-tm: #eda100;
--tb-c-tv: #4a3aa7;
--tb-c-1:  #059669;
--tb-c-1s: rgba(5,150,105,.14);
--tb-ok:   #188038;
--tb-warn: #b26a00;
--tb-bad:  #c5221f;
--tb-grid: rgba(127,127,127,.15);
}
[data-bs-theme="dark"] .ce-tablero {
--tb-c-h:  #3987e5;
--tb-c-m:  #e8729f;
--tb-c-o:  #3d4a53;
--tb-c-tm: #c98500;
--tb-c-tv: #9085e9;
--tb-c-1:  #10b981;
--tb-c-1s: rgba(16,185,129,.16);
--tb-ok:   #34c46a;
--tb-warn: #f0a52a;
--tb-bad:  #f26b66;
--tb-grid: rgba(255,255,255,.08);
}
.ce-tablero .min-w-0 { min-width: 0; }
.ce-tablero .tb-muted { font-size: .74rem; color: var(--muted); }
.ce-tablero .tb-chip {
display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--muted);
border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
}
.ce-tablero .tb-escuela {
display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
background: var(--tb-surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px;
}
.ce-tablero .tb-escuela-logo {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.ce-tablero .tb-escuela-logo img { width: 100%; height: 100%; object-fit: contain; }
.ce-tablero .tb-escuela-logo > i {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: var(--tb-c-1s); color: var(--tb-c-1);
}
.ce-tablero .tb-escuela-nombre { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.ce-tablero .tb-estatus { font-size: .72rem; font-weight: 600; color: var(--tb-ok); white-space: nowrap; }
.ce-tablero .tb-estatus i { font-size: .5rem; margin-right: 6px; vertical-align: middle; }
.ce-tablero .tb-skel {
border-radius: 12px; margin-bottom: 12px; border: 1px solid var(--border);
background: linear-gradient(90deg, var(--tb-surface) 0%, var(--tb-grid) 50%, var(--tb-surface) 100%);
background-size: 200% 100%; animation: tb-skel 1.3s linear infinite;
}
.ce-tablero .tb-skel--kpis { height: 96px; }
.ce-tablero .tb-skel--fila { height: 230px; }
@keyframes tb-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ce-tablero .tb-kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; margin-bottom: 10px;
}
.ce-tablero .tb-kpi {
background: var(--tb-surface); border: 1px solid var(--border); border-radius: 12px;
padding: 8px 12px; text-decoration: none; color: var(--text);
display: flex; flex-direction: column; gap: 1px; transition: border-color .15s; min-width: 0;
}
.ce-tablero .tb-kpi:hover { border-color: var(--tb-c-1); color: var(--text); }
.ce-tablero .tb-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ce-tablero .tb-kpi-lbl { font-size: .74rem; color: var(--muted); font-weight: 500; }
.ce-tablero .tb-kpi-ico { font-size: .8rem; color: var(--tb-c-1); opacity: .85; }
.ce-tablero .tb-kpi-val { font-size: 1.4rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ce-tablero .tb-kpi-val small { font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 6px; }
.ce-tablero .tb-kpi-sub { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-tablero .tb-kpi-flags { display: inline-flex; gap: 7px; font-size: .72rem; color: var(--muted); opacity: .7; }
.ce-tablero .tb-kpi-flags .is-on { color: var(--tb-ok); opacity: 1; }
.ce-tablero .tb-up { color: var(--tb-ok); font-weight: 600; }
.ce-tablero .tb-up i { font-size: .62rem; margin-right: 4px; }
.ce-tablero .tb-meter { height: 6px; border-radius: 3px; background: var(--tb-grid); overflow: hidden; margin-top: 4px; }
.ce-tablero .tb-meter-fill { height: 100%; border-radius: 3px; transition: width .6s ease; background: var(--tb-c-1); }
.ce-tablero .tb-meter-fill.is-ok   { background: var(--tb-ok); }
.ce-tablero .tb-meter-fill.is-warn { background: var(--tb-warn); }
.ce-tablero .tb-meter-fill.is-bad  { background: var(--tb-bad); }
.ce-tablero .tb-t-ok   { color: var(--tb-ok); }
.ce-tablero .tb-t-warn { color: var(--tb-warn); }
.ce-tablero .tb-t-bad  { color: var(--tb-bad); }
.ce-tablero .tb-grid { display: grid; gap: 10px; margin-bottom: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.ce-tablero .tb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-tablero .tb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ce-tablero .tb-span-2  { grid-column: span 2; }
}
.ce-tablero .tb-card {
background: var(--tb-surface); border: 1px solid var(--border); border-radius: 12px;
padding: 10px 14px; display: flex; flex-direction: column; min-width: 0;
}
.ce-tablero .tb-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ce-tablero .tb-card-hd h3 { font-size: .86rem; font-weight: 650; margin: 0; line-height: 1.3; }
.ce-tablero .tb-card-hd p  { font-size: .72rem; color: var(--muted); margin: 2px 0 0; }
.ce-tablero .tb-hd-num { text-align: right; line-height: 1.1; flex-shrink: 0; }
.ce-tablero .tb-hd-num b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ce-tablero .tb-hd-num span { font-size: .68rem; color: var(--muted); }
.ce-tablero .tb-hd-link { font-size: .74rem; font-weight: 600; color: var(--tb-c-1); text-decoration: none; flex-shrink: 0; }
.ce-tablero .tb-vacio { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .8rem; min-height: 100px; }
.ce-tablero .tb-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .72rem; color: var(--muted); justify-content: flex-end; }
.ce-tablero .tb-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ce-tablero .tb-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.ce-tablero .tb-c-h  { background: var(--tb-c-h); }
.ce-tablero .tb-c-m  { background: var(--tb-c-m); }
.ce-tablero .tb-c-o  { background: var(--tb-c-o); }
.ce-tablero .tb-c-tm { background: var(--tb-c-tm); }
.ce-tablero .tb-c-tv { background: var(--tb-c-tv); }
.ce-tablero .tb-cols { flex: 1; display: flex; align-items: stretch; min-height: 120px; max-height: 150px; }
.ce-tablero .tb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ce-tablero .tb-col-val { height: 16px; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-tablero .tb-col-area {
flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
padding: 0 5px; border-bottom: 1px solid var(--border);
}
.ce-tablero .tb-cols--fino .tb-col-area { padding: 0 3px; }
.ce-tablero .tb-col-bar {
width: 100%; max-width: 64px; min-height: 2px; display: flex; flex-direction: column; gap: 2px;
transition: height .6s ease; cursor: default;
}
.ce-tablero .tb-seg { width: 100%; min-height: 2px; }
.ce-tablero .tb-seg:first-child { border-radius: 4px 4px 0 0; }
.ce-tablero .tb-col-bar--uno { background: var(--tb-c-1); border-radius: 4px 4px 0 0; opacity: .72; min-height: 0; }
.ce-tablero .tb-col.is-actual .tb-col-bar--uno { opacity: 1; }
.ce-tablero .tb-col:hover .tb-col-bar { filter: brightness(1.1); }
.ce-tablero .tb-col-lbl {
font-size: .68rem; color: var(--muted); padding-top: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ce-tablero .tb-col.is-actual .tb-col-lbl { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
.ce-tablero .tb-cols--fino .tb-col:nth-child(odd) .tb-col-lbl { visibility: hidden; }
.ce-tablero .tb-cols--fino .tb-col-val { font-size: .58rem; }
}
.ce-tablero .tb-donas { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; }
.ce-tablero .tb-dona-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; min-width: 0; }
.ce-tablero .tb-dona { width: 84px; height: 84px; display: block; }
.ce-tablero .tb-dona-track { fill: none; stroke: var(--tb-grid); stroke-width: 5; }
.ce-tablero .tb-dona-seg { fill: none; stroke-width: 5; transition: stroke-width .15s; }
.ce-tablero .tb-dona-seg:hover { stroke-width: 6.5; }
.ce-tablero .tb-s-h  { stroke: var(--tb-c-h); }
.ce-tablero .tb-s-m  { stroke: var(--tb-c-m); }
.ce-tablero .tb-s-o  { stroke: var(--tb-c-o); }
.ce-tablero .tb-s-tm { stroke: var(--tb-c-tm); }
.ce-tablero .tb-s-tv { stroke: var(--tb-c-tv); }
.ce-tablero .tb-dona-centro {
position: absolute; left: 50%; top: 42px; width: 84px; transform: translate(-50%, -50%);
text-align: center; line-height: 1.05; pointer-events: none;
}
.ce-tablero .tb-dona-centro b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ce-tablero .tb-dona-centro span { font-size: .62rem; color: var(--muted); }
.ce-tablero .tb-dona-ley { list-style: none; margin: 0; padding: 0; font-size: .72rem; display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 180px; }
.ce-tablero .tb-dona-ley li { display: flex; align-items: center; gap: 7px; }
.ce-tablero .tb-dona-ley b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ce-tablero .tb-tira {
flex: 1; position: relative; display: flex; align-items: flex-end; gap: 2px;
min-height: 100px; max-height: 130px; border-bottom: 1px solid var(--border);
}
.ce-tablero .tb-tira-bar {
flex: 1 1 0; min-width: 3px; background: var(--tb-c-1); opacity: .72;
border-radius: 3px 3px 0 0; transition: height .6s ease;
}
.ce-tablero .tb-tira.is-densa { gap: 1px; }
.ce-tablero .tb-tira.is-densa .tb-tira-bar { min-width: 2px; border-radius: 2px 2px 0 0; }
.ce-tablero .tb-tira-bar:hover { opacity: 1; }
.ce-tablero .tb-tira-bar.is-fuera { background: var(--tb-warn); opacity: 1; }
.ce-tablero .tb-tira-ref {
position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--muted); opacity: .55; z-index: 1;
}
.ce-tablero .tb-nota { margin-top: 6px; font-size: .74rem; display: flex; gap: 7px; align-items: flex-start; }
.ce-tablero .tb-nota--warn { color: var(--tb-warn); }
.ce-tablero .tb-nota a { margin-left: auto; font-weight: 600; color: inherit; flex-shrink: 0; }
.ce-tablero .tb-hbars { display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: center; }
.ce-tablero .tb-hbar { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ce-tablero .tb-hbar-txt { display: contents; font-size: .72rem; }
.ce-tablero .tb-hbar-txt span { min-width: 0; font-size: .72rem; }
.ce-tablero .tb-hbar-txt b { order: 3; font-size: .72rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 2.2em; }
.ce-tablero .tb-hbar-track { order: 2; height: 10px; border-radius: 4px; background: var(--tb-grid); overflow: hidden; }
.ce-tablero .tb-hbar-fill { height: 100%; border-radius: 4px; background: var(--tb-c-1); transition: width .6s ease; }
.ce-tablero .tb-hbar-fill.is-otras { background: var(--tb-c-o); }
.ce-tablero .tb-calidad { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ce-tablero .tb-cal { text-decoration: none; color: var(--text); display: block; }
.ce-tablero .tb-cal:hover .tb-cal-txt span { color: var(--tb-c-1); }
.ce-tablero .tb-cal-txt { display: flex; justify-content: space-between; font-size: .78rem; }
.ce-tablero .tb-cal-txt i { color: var(--muted); margin-right: 6px; }
.ce-tablero .tb-cal-txt b { font-variant-numeric: tabular-nums; }
.ce-tablero .tb-cal-falta { display: none; }
.ce-tablero .tb-cal-extra {
margin-top: auto; padding-top: 7px; border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 4px; font-size: .74rem;
}
.ce-tablero .tb-cal-extra > div { display: flex; align-items: center; gap: 7px; }
.ce-tablero .tb-cal-extra i { width: 14px; text-align: center; opacity: .8; }
.ce-tablero .tb-cal-extra b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ce-tablero .tb-cal-extra .fa-star { color: var(--tb-c-tm); opacity: 1; }
.ce-tablero .tb-tip {
display: flex; align-items: flex-start; gap: 9px; font-size: .78rem; line-height: 1.4;
padding: 5px 9px; border-radius: 8px; margin-bottom: 4px; border-left: 3px solid currentColor;
background: var(--tb-grid);
}
.ce-tablero .tb-tip:last-child { margin-bottom: 0; }
.ce-tablero .tb-tip > i { margin-top: 2px; }
.ce-tablero .tb-tip > span { color: var(--text); }
.ce-tablero .tb-tip--success { color: var(--tb-ok); }
.ce-tablero .tb-tip--warning { color: var(--tb-warn); }
.ce-tablero .tb-tip--danger  { color: var(--tb-bad); }
.ce-tablero .tb-tip--info    { color: var(--tb-c-h); }
.ce-tablero .tb-tip-link { flex-shrink: 0; font-size: .72rem; font-weight: 600; text-decoration: none; color: inherit; white-space: nowrap; }
.ce-tablero .tb-tip-link:hover { text-decoration: underline; }
.ce-tablero .tb-alumnos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; }
@media (min-width: 700px) { .ce-tablero .tb-alumnos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ce-tablero .tb-alumno { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; background: var(--tb-grid); min-width: 0; }
.ce-tablero .tb-alumno-nom { font-size: .8rem; font-weight: 600; }
.ce-tablero .tb-avatar {
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: flex;
align-items: center; justify-content: center; font-size: .68rem; font-weight: 700;
background: var(--tb-c-1s); color: var(--tb-c-1);
}
.ce-admin-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: var(--muted); padding: 40px;
}
.ce-admin-empty i { font-size: 3rem; opacity: .2; margin-bottom: 14px; }
.ce-admin-empty p { margin: 0; font-size: .9rem; }
.ce-admin-empty small { font-size: .78rem; opacity: .7; }
@media (max-width: 991.98px) {
.ce-admin-topbar { display: flex; }
.ce-admin-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
z-index: 1050; width: 280px;
transform: translateX(-100%);
}
.ce-admin-sidebar.open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0,0,0,.4);
}
}
@media (min-width: 992px) {
.ce-admin-sidebar-close { display: none !important; }
}
.ce-admin-collapse-btn {
margin-left: auto; flex-shrink: 0;
width: 28px; height: 28px; border: none; background: transparent;
color: var(--muted); border-radius: 7px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1;
transition: background .12s, color .12s;
}
.ce-admin-collapse-btn:hover { background: var(--sidebar-hover); color: var(--text); }
.ce-admin-sidebar { transition: width .2s ease, transform .25s; }
.ce-admin.ce-collapsed .ce-admin-sidebar { width: 62px; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd {
flex-direction: column; justify-content: center; align-items: center;
gap: 8px; padding: 12px 0 10px;
}
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > span,
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > a { justify-content: center; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-collapse-btn { margin: 0; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-school-sel,
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-cal-section { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav-label { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a { justify-content: center; padding: 9px 0; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a > i.ms-auto { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child {
justify-content: center; padding-left: 0 !important; padding-right: 0 !important;
}
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a {
flex: 1; align-self: stretch;
display: flex; align-items: center; justify-content: center;
}
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a:hover { background: var(--sidebar-hover); }
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a > i { margin: 0 !important; }
@media (max-width: 1199.98px) {
.ce-admin-collapse-btn { display: none; }
}
.iot-admin .ce-picker-logo { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-picker-card:hover { border-color: #22c55e; box-shadow: 0 2px 12px rgba(34,197,94,.15); }
.iot-admin .ce-picker-card-icon { background: rgba(34,197,94,.1); color: #22c55e; }
.iot-admin .ce-picker-nueva:hover { border-color: #22c55e; }
.iot-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-admin-nav a.active { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-admin-school-card { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }
.iot-admin .ce-admin-mod-card i { color: #22c55e; }
.iot-admin .ce-admin-mod-card:hover { border-color: #22c55e; box-shadow: 0 6px 18px rgba(34,197,94,.12); }
.ce-escolares-admin {
--bs-primary: #059669;
--bs-primary-rgb: 5,150,105;
--accent: #059669;
--accent-rgb: 5,150,105;
--accent2: #22c55e;
}
.ce-escolares-admin .btn-primary {
--bs-btn-bg: #059669;          --bs-btn-border-color: #059669;
--bs-btn-hover-bg: #047857;    --bs-btn-hover-border-color: #047857;
--bs-btn-active-bg: #047857;   --bs-btn-active-border-color: #047857;
--bs-btn-disabled-bg: #059669; --bs-btn-disabled-border-color: #059669;
}
.ce-escolares-admin .ce-suspension .btn-primary {
--bs-btn-bg: #2563eb;          --bs-btn-border-color: #2563eb;
--bs-btn-hover-bg: #1d4ed8;    --bs-btn-hover-border-color: #1d4ed8;
--bs-btn-active-bg: #1d4ed8;   --bs-btn-active-border-color: #1d4ed8;
--bs-btn-disabled-bg: #2563eb; --bs-btn-disabled-border-color: #2563eb;
}
.ce-escolares-admin .ce-picker-logo        { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-picker-card:hover  { border-color: #059669; box-shadow: 0 2px 12px rgba(5,150,105,.15); }
.ce-escolares-admin .ce-picker-card-icon   { background: rgba(5,150,105,.1); color: #059669; }
.ce-escolares-admin .ce-picker-nueva:hover { border-color: #059669; }
.ce-escolares-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-admin-nav a.active { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-cal-item.active    { background: rgba(5,150,105,.12); }
.ce-escolares-admin .ce-admin-school-card  { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.ce-escolares-admin .ce-admin-mod-card i   { color: #059669; }
.ce-escolares-admin .ce-admin-mod-card:hover { border-color: #059669; box-shadow: 0 6px 18px rgba(5,150,105,.12); }
.ce-escolares-admin .form-check-input:checked { background-color: #059669; border-color: #059669; }
.ce-escolares-admin .form-check-input:focus   { border-color: #8fd3bd; box-shadow: 0 0 0 .25rem rgba(5,150,105,.25); }
.ce-escolares-admin .form-control:focus, .ce-escolares-admin .form-select:focus { border-color: #8fd3bd; box-shadow: 0 0 0 .25rem rgba(5,150,105,.2); }
.ce-escolares-admin .ce-admin-topbar { gap: 8px; }
.ce-escolares-admin .ce-topbar-btn {
display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
padding: 6px 11px; border-radius: 7px; font-size: .82rem; font-weight: 500;
border: 1px solid var(--border); background: transparent; color: var(--text);
transition: border-color .15s, background .15s;
}
.ce-escolares-admin .ce-topbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.ce-escolares-admin .ce-topbar-miga {
display: inline-flex; align-items: center; gap: 7px; min-width: 0;
font-size: .82rem; color: var(--muted);
padding-left: 12px; border-left: 1px solid var(--border);
}
.ce-escolares-admin .ce-topbar-miga > .fa-fw { color: var(--muted); flex-shrink: 0; }
.ce-escolares-admin .ce-miga-sec { white-space: nowrap; flex-shrink: 0; }
.ce-escolares-admin .ce-miga-sep { opacity: .45; flex-shrink: 0; }
.ce-escolares-admin .ce-miga-act {
font-weight: 600; color: var(--text); max-width: 260px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-escolares-admin .ce-topbar-school-name {
font-weight: 600; max-width: 210px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-escolares-admin .ce-topbar-school-clave {
font-size: .72rem; color: var(--muted); letter-spacing: .02em; flex-shrink: 0;
white-space: nowrap;
}
.ce-escolares-admin .ce-topbar-link {
display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
padding: 6px 11px; border-radius: 7px; font-size: .82rem;
color: var(--muted); text-decoration: none; transition: background .15s, color .15s;
}
.ce-escolares-admin .ce-topbar-link:hover  { background: var(--sidebar-hover); color: var(--text); }
.ce-escolares-admin .ce-topbar-link.active { background: rgba(5,150,105,.12); color: #059669; font-weight: 600; }
.ce-escolares-admin .ce-admin-main { min-height: 0; }
.ce-escolares-admin .ce-portada { display: flex; flex-direction: column; }
.ce-escolares-admin .ce-portada-hola { text-align: center; padding: 26px 0 24px; }
.ce-escolares-admin .ce-portada-hola h1 {
font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; margin: 0;
}
.ce-escolares-admin .ce-portada-hola p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.ce-escolares-admin .ce-tareas {
display: grid; grid-template-columns: 1fr; gap: 12px;
width: 100%; max-width: 1160px; margin: 0 auto;
}
@media (min-width: 576px)  { .ce-escolares-admin .ce-tareas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ce-escolares-admin .ce-tareas { grid-template-columns: repeat(4, 1fr); } }
.ce-escolares-admin .ce-tarea {
position: relative; display: flex; align-items: center; gap: 14px;
padding: 16px 16px; border-radius: 10px;
background: var(--card); border: 1px solid var(--border);
color: var(--text); text-decoration: none;
transition: border-color .15s, background .15s;
}
.ce-escolares-admin .ce-tarea:hover { border-color: #059669; color: var(--text); }
.ce-escolares-admin .ce-tarea:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.ce-escolares-admin .ce-tarea-ic {
position: relative; width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(5,150,105,.1); color: #059669; font-size: 1.05rem;
transition: background .15s;
}
.ce-escolares-admin .ce-tarea:hover .ce-tarea-ic { background: rgba(5,150,105,.18); }
.ce-escolares-admin .ce-tarea-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ce-escolares-admin .ce-tarea-t { font-size: .93rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ce-escolares-admin .ce-tarea-d { font-size: .76rem; color: var(--muted); line-height: 1.4; }
.ce-escolares-admin .ce-tarea-insignia {
position: absolute; top: 0; right: 12px; transform: translateY(-50%);
padding: 1px 8px; border-radius: 20px; font-size: .68rem; font-weight: 600;
border: 1px solid; white-space: nowrap;
}
.ce-escolares-admin .ce-tarea-insignia.is-warn {
background: linear-gradient(rgba(180,120,10,.14), rgba(180,120,10,.14)), var(--card);
border-color: rgba(180,120,10,.4); color: #b4780a;
}
.ce-escolares-admin .ce-tarea-insignia.is-crit {
background: linear-gradient(rgba(197,34,31,.13), rgba(197,34,31,.13)), var(--card);
border-color: rgba(197,34,31,.4); color: #c5221f;
}
.ce-escolares-admin .ce-tarea--bloqueada { opacity: .58; cursor: not-allowed; }
.ce-escolares-admin .ce-tarea--bloqueada:hover { border-color: var(--border); }
.ce-escolares-admin .ce-tarea--bloqueada .ce-tarea-ic,
.ce-escolares-admin .ce-tarea--bloqueada:hover .ce-tarea-ic { background: var(--sidebar-hover); color: var(--muted); }
.ce-escolares-admin .ce-tarea-candado {
position: absolute; right: -6px; bottom: -6px;
width: 19px; height: 19px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--card); border: 1px solid var(--border);
color: #b4780a; font-size: .58rem;
}
.ce-escolares-admin .ce-tarea-sk {
display: flex; align-items: center; gap: 14px;
padding: 16px 16px; border-radius: 10px;
background: var(--card); border: 1px solid var(--border);
}
.ce-escolares-admin .ce-tarea-sk .ce-tarea-txt { gap: 8px; }
.ce-escolares-admin .ce-tarea-sk .sk { background: var(--border); border-radius: 6px; animation: cePulso 1.4s ease-in-out infinite; }
.ce-escolares-admin .ce-tarea-sk .sk-ic { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; }
.ce-escolares-admin .ce-tarea-sk .sk-t  { height: 13px; width: 70%; }
.ce-escolares-admin .ce-tarea-sk .sk-d  { height: 10px; width: 92%; }
@keyframes cePulso { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ce-escolares-admin .ce-tarea-sk .sk { animation: none; } }
.ce-escolares-admin .ce-portada-pie {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 12px; padding: 22px 0 26px;
}
.ce-escolares-admin .ce-portada-link {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: 0; padding: 0;
font-size: .82rem; color: #059669; text-decoration: none;
}
.ce-escolares-admin .ce-portada-link:hover { text-decoration: underline; color: #047857; }
.ce-escolares-admin .ce-cinta {
display: flex; flex-direction: column;
margin: auto -24px -28px; background: var(--card);
border-top: 1px solid var(--border);
}
.ce-escolares-admin .ce-cinta-dato {
display: flex; align-items: baseline; gap: 9px;
padding: 12px 24px; text-decoration: none; color: var(--text);
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ce-escolares-admin .ce-cinta-dato:last-child { border-bottom: 0; }
.ce-escolares-admin .ce-cinta-dato:hover { background: var(--sidebar-hover); color: var(--text); }
.ce-escolares-admin .ce-cinta-val {
font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.ce-escolares-admin .ce-cinta-lbl { font-size: .8rem; color: var(--muted); }
.ce-escolares-admin .ce-cinta-dato.is-warn .ce-cinta-val, .ce-escolares-admin .ce-cinta-dato.is-warn .ce-cinta-lbl { color: #b4780a; }
.ce-escolares-admin .ce-cinta-dato.is-crit .ce-cinta-val, .ce-escolares-admin .ce-cinta-dato.is-crit .ce-cinta-lbl { color: #c5221f; }
.ce-escolares-admin .ce-cinta-dato.is-ok   .ce-cinta-val, .ce-escolares-admin .ce-cinta-dato.is-ok   .ce-cinta-lbl { color: #059669; }
@media (min-width: 768px) {
.ce-escolares-admin .ce-cinta { flex-direction: row; border-bottom: 1px solid var(--border); }
.ce-escolares-admin .ce-cinta-dato {
flex: 1; border-bottom: 0; border-right: 1px solid var(--border);
}
.ce-escolares-admin .ce-cinta-dato:last-child { border-right: 0; }
}
.dev-admin {
--bs-primary: #8b5cf6;
--bs-primary-rgb: 139,92,246;
--accent: #8b5cf6;
--accent-rgb: 139,92,246;
--accent2: #a78bfa;
}
.dev-admin .btn-primary {
--bs-btn-bg: #8b5cf6;          --bs-btn-border-color: #8b5cf6;
--bs-btn-hover-bg: #7c3aed;    --bs-btn-hover-border-color: #7c3aed;
--bs-btn-active-bg: #7c3aed;   --bs-btn-active-border-color: #7c3aed;
--bs-btn-disabled-bg: #8b5cf6; --bs-btn-disabled-border-color: #8b5cf6;
}
.dev-admin .list-group {
--bs-list-group-active-bg: #8b5cf6;
--bs-list-group-active-border-color: #8b5cf6;
}
.dev-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(139,92,246,.12); color: #8b5cf6; }
.dev-admin .ce-admin-nav a.active { background: rgba(139,92,246,.12); color: #8b5cf6; }
.dev-admin .ce-admin-school-card  { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.dev-admin .ce-admin-mod-card i   { color: #8b5cf6; }
.dev-admin .ce-admin-mod-card:hover { border-color: #8b5cf6; box-shadow: 0 6px 18px rgba(139,92,246,.12); }
.dev-admin .form-check-input:checked { background-color: #8b5cf6; border-color: #8b5cf6; }
.dev-admin .form-check-input:focus   { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(139,92,246,.25); }
.dev-admin .form-control:focus, .dev-admin .form-select:focus { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(139,92,246,.2); }
tr.feat-dragging { opacity: .45; }
tr.feat-dragover td { box-shadow: inset 0 2px 0 var(--bs-primary, #2563eb); }
.ce-admin-school-card.ce-admin-school-card--plain {
background: var(--card, #fff);
color: var(--text, #0f172a);
border: 1px solid var(--border, #dee2e6);
}
.ce-admin-school-card--plain .ce-school-card-logo { background: var(--surface, #f8fafc); }
.ce-admin-school-card--plain .ce-school-card-meta { color: var(--muted); }
.ce-admin-school-card--slim { padding: 9px 14px; margin-bottom: 10px; border-radius: 12px; }
.nativa-panel-wrap    { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.nativa-panel-header  { flex-shrink: 0; padding: 13px 20px 12px; border-bottom: 1px solid var(--border, #dee2e6); }
.nativa-panel-body    { flex: 1; overflow-y: auto; min-height: 0; }
.nativa-panel-body table thead th { position: sticky; top: 0; z-index: 2; background-color: var(--sidebar) !important; }
.nativa-panel-body .p-3  > .card > .table-responsive,
.nativa-panel-body .px-3 > .card > .table-responsive,
.nativa-panel-body .py-3 > .card > .table-responsive,
.nativa-panel-body.p-3   > .card > .table-responsive { overflow: visible; }
.nativa-panel-footer  { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border, #dee2e6); padding: 8px 20px; min-height: 47px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; }
.nativa-tabla-1linea { table-layout: fixed; }
.nativa-tabla-1linea > thead > tr > th,
.nativa-tabla-1linea > tbody > tr > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nativa-pag-btn { background: var(--sidebar); border: 1px solid var(--border); color: var(--muted); min-width: 30px; padding: 2px 7px; border-radius: 6px; font-size: .78rem; transition: background .12s, color .12s; }
.nativa-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.nativa-pag-btn:disabled { opacity: .4; cursor: default; }
.nativa-pag-btn--active { background: rgba(var(--accent-rgb), .15) !important; color: var(--accent) !important; border-color: transparent !important; }
.text-border-var   { color: var(--border); }
.bg-accent-var     { background: var(--accent); }
.bg-sidebar-var    { background: var(--sidebar); }
.text-muted-xs     { color: var(--muted); font-size: .75rem; }
.text-mono-muted   { color: var(--muted); font-size: 11px; font-family: monospace; }
.sidebar-mobile-toggle { display: none; }
.sidebar-mobile-backdrop {
display: none; position: fixed; inset: 0; top: var(--header-h);
background: rgba(0,0,0,.55); z-index: 599;
}
:root { --bottomnav-h: calc(78px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav { display: none; }
.mbn-item {
flex: 1 1 0; min-width: 0; height: 56px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
background: none; border: none; cursor: pointer; text-decoration: none;
color: var(--muted); padding: 6px 2px 4px; position: relative;
transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.mbn-item.active { color: var(--accent); background: none; }
.mbn-item.active::after {
content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 999px;
background: currentColor; opacity: .75; pointer-events: none;
}
.mbn-item:active .mbn-icon { transform: scale(.92); }
.mbn-icon { transition: transform .12s; }
.mbn-icon { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.mbn-label { font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }
.mbn-bell-wrap { position: relative; }
.mbn-badge {
position: absolute; top: -6px; right: -10px;
background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
border-radius: 999px; min-width: 15px; height: 15px; padding: 0 4px;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mbn-avatar {
width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; border: 2px solid transparent;
}
.mbn-avatar.avatar--verified { background: linear-gradient(135deg, #16a34a, #22c55e); }
.mbn-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mbn-item--profile.active .mbn-avatar { border-color: var(--accent); }
@media (max-width: 767.98px) {
:root { --header-h: 52px; }
header { padding: 0 12px; gap: 10px; }
header .header-icon-btn,
header .header-ctx-btn,
header .header-search-btn,
header .notif-btn,
header .brand-btn,
header .header-login-btn,
header .header-user-chip { height: 34px; font-size: 14px; padding: 0 10px; border-radius: 8px; }
header .header-login-btn { font-size: 13px; }
@media (max-width: 420px) {
header .header-login-btn span { display: none; }
header .header-login-btn { gap: 0; }
}
header .notif-badge { top: -5px; right: -5px; box-shadow: none; }
.brand-ico { width: 22px; height: 22px; }
header .menubar-app, .menubar-item--menu { display: none; }
header .menubar-item--org { display: flex; }
header .menubar-item--org .menubar-menu { display: none; }
header .menubar-item--org .header-ctx-btn { max-width: 42vw; }
header .avatar--sm { width: 28px; height: 28px; font-size: 11px; }
header .header-user-chip { padding: 4px 6px; gap: 6px; }
header .notif-badge { top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: 10px; }
.header-user-name,
.header-title { display: none; }
.sidebar-mobile-toggle { display: flex; }
aside {
position: fixed !important;
top: var(--header-h); left: 0;
height: calc(100dvh - var(--header-h));
width: 260px !important;
z-index: 600;
transform: translateX(-100%);
transition: transform .25s ease !important;
box-shadow: 4px 0 32px rgba(0,0,0,.5);
}
aside:not(.collapsed) { transform: translateX(0); }
.sidebar-mobile-backdrop { display: block; }
.soluciones-dropdown {
width: min(300px, calc(100vw - 16px));
right: 0; left: auto;
max-height: min(380px, calc(100dvh - 80px));
}
.soluciones-item-icon { width: 44px; height: 44px; font-size: 18px; }
.soluciones-grid { gap: 2px; padding: 4px 6px; }
.user-menu--header {
min-width: 0;
width: min(300px, calc(100vw - 16px));
right: -4px;
}
.mobile-bottom-nav {
display: flex; align-items: stretch;
flex-shrink: 0;
margin: 10px;
margin-bottom: calc(env(safe-area-inset-bottom) + 10px);
height: 58px;
border-radius: 20px;
background: hsla(var(--mac-claro-hsl), .62);
color: hsl(var(--mac-oscuro-hsl));
border: 1px solid rgba(255, 255, 255, .28);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
box-shadow: 0 10px 34px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.30);
overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.mobile-bottom-nav { background: hsla(var(--mac-claro-hsl), .95); }
}
.mbn-item { height: auto; }
.mbn-item { color: hsla(var(--mac-oscuro-hsl), .62); }
body.has-bottomnav { padding-bottom: 0; }
body.has-bottomnav .header-search-btn,
body.has-bottomnav .notif-wrapper > .notif-btn,
body.has-bottomnav .header-user-wrap,
body.has-bottomnav .soluciones-wrapper > .header-icon-btn,
body.has-bottomnav .soluciones-wrapper > .sol-launcher-dot { display: none; }
body.has-bottomnav .notif-wrapper,
body.has-bottomnav .soluciones-wrapper { display: contents; }
body.has-bottomnav .soluciones-dropdown {
position: fixed; left: 8px; right: 8px; top: auto;
bottom: calc(var(--bottomnav-h) + 8px);
width: auto; max-height: min(60dvh, calc(100dvh - 150px));
}
body.has-bottomnav .cookie-banner { bottom: var(--bottomnav-h); }
body.has-bottomnav aside { height: calc(100dvh - var(--header-h) - var(--bottomnav-h)); }
}
.update-banner {
position: fixed; left: var(--marco); bottom: var(--dock-mid, 52px); z-index: 1035;
transform: translateY(50%);
display: flex; align-items: center; gap: 12px; text-align: left;
max-width: min(340px, calc(100vw - 32px));
height: var(--dock-alto, 52px);
padding: 0 18px 0 6px; font: inherit;
background: var(--bs-card-bg, #fff); color: var(--bs-body-color, #0f172a);
border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .22); cursor: pointer;
animation: update-banner-in .35s ease;
}
.update-banner:hover { border-color: var(--accent); }
.update-banner:hover .update-banner-icon i { animation: update-spin .9s linear infinite; }
.update-banner-icon {
flex-shrink: 0; border-radius: 50%;
width:  calc(var(--dock-alto, 52px) - 14px);
height: calc(var(--dock-alto, 52px) - 14px);
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff; font-size: 1.05rem;
}
.update-banner-text {
display: flex; flex-direction: column; line-height: 1.25; min-width: 0;
white-space: nowrap;
}
.update-banner-title { font-weight: 600; font-size: .92rem; }
.update-banner-sub { font-size: .8rem; color: var(--muted); }
@keyframes update-spin { to { transform: rotate(360deg); } }
@keyframes update-banner-in {
from { opacity: 0; transform: translateY(calc(50% + 12px)); }
to   { opacity: 1; transform: translateY(50%); }
}
@media (max-width: 767.98px) {
.update-banner {
left: 12px; right: 12px; bottom: 16px; max-width: none; transform: none;
height: auto; padding: 10px 18px 10px 10px;
}
.update-banner-icon { width: 42px; height: 42px; }
.update-banner-text { white-space: normal; }
body.has-bottomnav .update-banner { bottom: calc(var(--bottomnav-h) + 12px); }
@keyframes update-banner-in {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: none; }
}
}
.dh-dock-menu,
.dh-desk-menu,
.dh-dock-stack-panel,
.user-menu,
.soluciones-dropdown,
.soluciones-modal,
.dropdown-menu {
background: color-mix(in srgb, var(--sidebar) var(--vidrio-op-flotante), transparent);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
}
.amelia-modal,
.modal-content {
background: var(--card);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.offcanvas {
background: color-mix(in srgb, var(--sidebar) var(--vidrio-op-flotante), transparent) !important;
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.dh-dock-menu, .dh-dock-stack-panel, .user-menu, .soluciones-dropdown,
.soluciones-modal, .dropdown-menu { background: var(--sidebar); }
.offcanvas                      { background: var(--sidebar) !important; }
}
.menubar-menu,
.dh-dock-menu,
.dh-desk-menu,
.user-menu,
.dropdown-menu {
background: hsla(var(--mac-claro-hsl), .3);
-webkit-backdrop-filter: blur(var(--menu-blur));
backdrop-filter: blur(var(--menu-blur));
color: hsla(var(--mac-oscuro-hsl), 1);
text-shadow: none;
border: 0; border-radius: var(--menu-radio);
padding: 0; overflow: hidden;
box-shadow: var(--menu-sombra);
}
.menubar-menu,
.dh-dock-menu,
.dh-desk-menu,
.user-menu {
font-family: var(--mac-fuente);
letter-spacing: .4px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.menubar-menu, .dh-dock-menu, .dh-desk-menu, .user-menu, .dropdown-menu {
background: color-mix(in srgb, var(--sidebar) var(--vidrio-op-sin-blur), transparent);
}
}
.dropdown-menu {
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: var(--menu-radio);
--bs-dropdown-box-shadow: none;
--bs-dropdown-font-size: var(--menu-tam);
--bs-dropdown-item-border-radius: 0;
--bs-dropdown-item-padding-x: .75rem;
--bs-dropdown-item-padding-y: .2rem;
--bs-dropdown-color: hsla(var(--mac-oscuro-hsl), 1);
--bs-dropdown-link-color: hsla(var(--mac-oscuro-hsl), 1);
--bs-dropdown-link-hover-color: #fff;
--bs-dropdown-link-hover-bg: var(--accent);
--bs-dropdown-link-active-color: #fff;
--bs-dropdown-link-active-bg: var(--accent);
--bs-dropdown-divider-bg: hsla(var(--mac-oscuro-hsl), .3);
--bs-dropdown-divider-margin-y: 2px;
--bs-dropdown-header-color: hsla(var(--mac-oscuro-hsl), .6);
--bs-dropdown-header-padding-x: .75rem;
--bs-dropdown-header-padding-y: .2rem;
}
.dropdown-menu {
background: var(--sidebar);
-webkit-backdrop-filter: none;
backdrop-filter: none;
--bs-dropdown-color:        var(--bs-body-color);
--bs-dropdown-link-color:   var(--bs-body-color);
--bs-dropdown-header-color: var(--bs-secondary-color);
--bs-dropdown-divider-bg:   var(--bs-border-color);
}
.dropdown-menu.shadow-sm,
.dropdown-menu.shadow { box-shadow: var(--menu-sombra) !important; }
.dh-dock-menu-item,
.dh-desk-back,
.user-menu .user-menu-item {
width: 100%; margin: 0; padding: .2rem .75rem;
border-radius: 0; font-size: var(--menu-tam); font-weight: 400;
font-family: inherit; color: inherit;
}
.dh-dock-menu-item:hover,
.dh-desk-back:hover,
.user-menu .user-menu-item:hover,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: var(--accent); color: #fff; }
.dh-dock-menu-item:hover i,
.dh-desk-back:hover i,
.user-menu .user-menu-item:hover i,
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i { color: inherit; }
.dh-dock-menu-label,
.user-menu .user-menu-label {
padding: .2rem .75rem; font-size: .7rem; font-weight: 600;
letter-spacing: .06em; color: hsla(var(--mac-oscuro-hsl), .6);
}
.dh-dock-menu-title,
.dh-desk-back {
padding: .2rem .75rem; font-size: var(--menu-tam); font-weight: 700;
color: hsla(var(--mac-oscuro-hsl), 1);
}
.dh-dock-menu-sep,
.user-menu .user-menu-divider,
.dropdown-menu .dropdown-divider {
height: 1px; margin: 2px 0; padding: 0; border: 0; opacity: 1;
background: hsla(var(--mac-oscuro-hsl), .3);
}
.soluciones-overlay:not(.pago-aviso-overlay) {
z-index: 900;
background: rgba(0,0,0,.42);
-webkit-backdrop-filter: blur(30px) saturate(150%);
backdrop-filter: blur(30px) saturate(150%);
align-items: flex-start; overflow-y: auto;
padding: calc(var(--header-h) + 18px) 24px calc(28px + var(--dock-h, 0px));
}
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-modal {
max-width: 1180px; max-height: none;
background: none; border: 0; border-radius: 0; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
overflow: visible; color: #fff;
}
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-modal-body { overflow: visible; padding: 0; }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner { margin: 0 0 18px; }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner {
background: rgba(180, 105, 8, .55);
border-color: rgba(253, 186, 116, .55);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner:hover {
background: rgba(180, 105, 8, .68);
border-color: rgba(253, 186, 116, .80);
}
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner-title { color: #fff; }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner-sub   { color: rgba(255,255,255,.85); }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner-cta   { color: #fff; background: rgba(255,255,255,.20); }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-pago-banner:hover .sol-pago-banner-cta { background: rgba(255,255,255,.32); }
.lp-buscar {
display: grid; grid-template-columns: 1fr min(320px, 40vw) 1fr; align-items: center;
gap: 10px; padding: 2px 0 14px; margin-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.22);
}
.lp-acciones { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.lp-acciones .amelia-esc-btn {
padding: 7px 14px; border-radius: 999px;
font-size: .85rem; line-height: 1.5;
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
color: #fff; backdrop-filter: blur(10px);
}
.lp-acciones .amelia-esc-btn:hover { background: rgba(255,255,255,.28); color: #fff; }
.lp-acciones .lp-cerrar {
padding: 7px 0; width: 36px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.lp-buscar-caja {
grid-column: 2;
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 7px 14px; border-radius: 999px;
background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
color: #fff; backdrop-filter: blur(10px);
}
.lp-instalar {
grid-column: 1; justify-self: start;
display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
padding: 7px 16px; border-radius: 999px;
background: var(--accent, #0d6efd); border: 1px solid transparent;
color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none;
box-shadow: 0 6px 18px rgba(0,0,0,.28);
transition: filter .15s;
}
.lp-instalar:hover { filter: brightness(1.1); color: #fff; }
@media (max-width: 575.98px) {
.lp-buscar {
display: flex; flex-wrap: nowrap; align-items: center;
gap: 6px; padding-bottom: 8px; margin-bottom: 6px;
}
.lp-instalar {
order: 1; flex: 1 1 auto; min-width: 0; justify-content: center;
padding: 7px 12px;
}
.lp-acciones { order: 2; flex: 0 0 auto; }
.soluciones-overlay:not(.pago-aviso-overlay) {
padding-top: calc(var(--header-h) + 8px);
padding-bottom: 76px;
align-items: flex-start;
}
.soluciones-overlay:not(.pago-aviso-overlay) .lp-vista .row,
.soluciones-overlay:not(.pago-aviso-overlay) .lp-vista-fav .row { padding: 4px !important; }
.soluciones-overlay:not(.pago-aviso-overlay) .lp-buscar-caja {
position: fixed; left: 12px; right: 12px; bottom: 24px;
z-index: 2; width: auto;
background: rgba(255,255,255,.22);
box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
}
.lp-buscar-caja i { font-size: .8rem; opacity: .8; }
.lp-buscar-caja input {
flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
color: #fff; font-size: .85rem;
}
.lp-buscar-caja input::placeholder { color: rgba(255,255,255,.65); }
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item-icon {
width: 66px; height: 66px; border-radius: 16px; font-size: 27px;
box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
@supports (corner-shape: squircle) {
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item-icon { corner-shape: squircle; }
}
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item {
gap: 9px; padding: 14px 6px 12px; border-radius: 14px;
}
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item:hover { background: rgba(255,255,255,.14); }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-item-name {
color: #fff; font-size: .8rem; font-weight: 500;
text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
@media (min-width: 576px) {
.soluciones-overlay:not(.pago-aviso-overlay).lp-compacto .soluciones-item-icon {
width: 56px; height: 56px; border-radius: 14px; font-size: 23px;
}
.soluciones-overlay:not(.pago-aviso-overlay).lp-compacto .soluciones-item {
gap: 7px; padding: 10px 6px 8px;
}
.soluciones-overlay:not(.pago-aviso-overlay).lp-compacto .sol-item-name { font-size: .76rem; }
}
@media (max-width: 575.98px) {
.soluciones-overlay:not(.pago-aviso-overlay) { padding-left: 12px; padding-right: 12px; }
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item-icon {
width: var(--lp-ico, 44px); height: var(--lp-ico, 44px);
border-radius: 12px; font-size: calc(var(--lp-ico, 44px) * .43);
}
.soluciones-overlay:not(.pago-aviso-overlay) .soluciones-item { gap: 5px; padding: 5px 2px 5px; }
.soluciones-overlay:not(.pago-aviso-overlay) .sol-item-name { font-size: .7rem; }
}
.soluciones-overlay:not(.pago-aviso-overlay) .text-body,
.soluciones-overlay:not(.pago-aviso-overlay) .fw-semibold { color: #fff !important; }
.soluciones-overlay:not(.pago-aviso-overlay) .text-body-secondary {
color: rgba(255,255,255,.72) !important; text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.soluciones-overlay:not(.pago-aviso-overlay) hr { border-color: rgba(255,255,255,.22); opacity: 1; }
.soluciones-overlay:not(.pago-aviso-overlay) .rounded.border {
background: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.20) !important;
}
.soluciones-overlay:not(.pago-aviso-overlay) .row { justify-content: flex-start; }
.lp-vista { overflow: hidden; }
.lp-tira {
display: flex; align-items: flex-start;
transition: transform .38s cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.lp-pagina { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .lp-tira { transition: none; } }
.lp-puntos { display: flex; justify-content: center; align-items: center; gap: 2px; height: 34px; }
.lp-puntos button {
width: 22px; height: 22px; padding: 0; border: 0; background: none;
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lp-puntos button::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,.35);
box-shadow: 0 1px 2px rgba(0,0,0,.35);
transition: background .18s, transform .18s;
}
.lp-puntos button:hover::before { background: rgba(255,255,255,.6); }
.lp-puntos button.is-on::before { background: #fff; transform: scale(1.05); }
.lp-puntos-fav { height: 18px; }
.lp-puntos-fav button { width: 16px; height: 16px; }
.lp-puntos-fav button::before { width: 5px; height: 5px; }
@media (max-width: 575.98px) {
.lp-puntos { height: 22px; }
.lp-puntos button { width: 18px; height: 18px; }
.lp-puntos-fav { height: 14px; }
.lp-puntos-fav button { width: 14px; height: 14px; }
}
@media (min-width: 992px) {
.soluciones-overlay:not(.pago-aviso-overlay) .row-cols-sm-4 > .col { flex: 0 0 auto; width: 16.6666%; }
}
@media (min-width: 1280px) {
.soluciones-overlay:not(.pago-aviso-overlay) .row-cols-sm-4 > .col { width: 14.2857%; }
}
@media (min-width: 1600px) {
.soluciones-overlay:not(.pago-aviso-overlay) .row-cols-sm-4 > .col { width: 12.5%; }
}
.modal-backdrop.show,
.offcanvas-backdrop.show { opacity: .32; }
.sin-conexion-capa {
position: fixed; inset: 0; z-index: 20050;
display: flex; align-items: center; justify-content: center; padding: 24px;
background: color-mix(in srgb, var(--bg) 88%, transparent);
-webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
backdrop-filter: blur(var(--vidrio-blur)) saturate(var(--vidrio-sat));
opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.sin-conexion-capa.is-on { opacity: 1; pointer-events: auto; }
.sin-conexion-caja {
max-width: 380px; text-align: center; color: var(--text);
}
.sin-conexion-icono { font-size: 40px; color: var(--muted); margin-bottom: 18px; }
.sin-conexion-titulo { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sin-conexion-texto { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.interrupcion-codigo {
display: inline-block; margin: -6px 0 16px; padding: 3px 10px; border-radius: 999px;
border: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5;
}
.interrupcion-cod { font-family: var(--bs-font-monospace); font-weight: 600; color: var(--text); }
.interrupcion-logo { display: block; height: 34px; width: auto; margin: 0 auto 26px; }
.interrupcion-logo--oscuro { display: none; }
[data-bs-theme="dark"] .interrupcion-logo--claro  { display: none; }
[data-bs-theme="dark"] .interrupcion-logo--oscuro { display: block; }
.interrupcion-frase {
display: flex; align-items: center; justify-content: center; min-height: 3em;
font-size: 15px; line-height: 1.5; font-style: italic; color: var(--text); margin: -4px 0 4px;
}
.interrupcion-ico, .interrupcion-frase { transition: opacity .3s ease; }
.broma-saliendo .interrupcion-ico, .broma-saliendo .interrupcion-frase { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.interrupcion-ico, .interrupcion-frase { transition: none; }
}
.sin-conexion-capa.es-servicio { background: color-mix(in srgb, var(--bg) 96%, transparent); }
.interrupcion-estado {
font-size: 13px; color: var(--muted); margin-bottom: 14px; min-height: 1.5em;
font-variant-numeric: tabular-nums;
}
.sin-conexion-icono.interrupcion-ok { color: var(--bs-success); }
.dock-toast,
.toast-container.position-fixed.bottom-0.end-0,
.position-fixed.bottom-0.end-0:has(> .toast) {
position: fixed; left: 16px !important; right: auto !important; top: auto;
bottom: calc(var(--dock-mid, 52px) - 20px) !important; z-index: 1036;
padding: 0 !important;
}
.dock-toast--apilado { bottom: calc(var(--dock-mid, 52px) + 44px) !important; }
@media (max-width: 767.98px) {
.dock-toast,
.toast-container.position-fixed.bottom-0.end-0,
.position-fixed.bottom-0.end-0:has(> .toast) { left: 12px !important; bottom: 16px !important; }
.dock-toast--apilado { bottom: 92px !important; }
body.has-bottomnav .dock-toast,
body.has-bottomnav .toast-container.position-fixed.bottom-0.end-0,
body.has-bottomnav .position-fixed.bottom-0.end-0:has(> .toast) { bottom: calc(var(--bottomnav-h) + 12px) !important; }
body.has-bottomnav .dock-toast--apilado { bottom: calc(var(--bottomnav-h) + 88px) !important; }
}
#modalSistemaAnterior .modal-content { background: var(--card); }
#modalSistemaAnterior .modal-body { padding: 22px 20px 18px; text-align: center; }
.sa-icono {
width: 58px; height: 58px; margin: 0 auto 12px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--accent), var(--accent2, var(--accent)));
color: #fff; font-size: 1.5rem;
box-shadow: 0 4px 14px rgba(var(--accent-rgb), .35);
}
@supports (corner-shape: squircle) { .sa-icono { corner-shape: squircle; } }
.sa-titulo { margin: 0 0 6px; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.sa-lead   { margin: 0 0 6px; font-size: .82rem; font-weight: 500; line-height: 1.35; }
.sa-texto  { margin: 0 0 14px; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.sa-lista {
list-style: none; margin: 0 0 16px; padding: 0; text-align: left;
background: hsla(var(--mac-oscuro-hsl), .05);
border-radius: 10px; overflow: hidden;
}
.sa-lista li {
display: flex; gap: 9px; align-items: flex-start;
padding: 8px 12px; font-size: .76rem; line-height: 1.35;
}
.sa-lista li + li { border-top: 1px solid hsla(var(--mac-oscuro-hsl), .08); }
.sa-lista i { flex: 0 0 15px; margin-top: 2px; text-align: center; font-size: .76rem; color: var(--accent); }
.sa-acciones { display: flex; flex-direction: column; gap: 7px; }
.sa-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
font-size: .78rem; font-weight: 600; white-space: nowrap;
text-decoration: none; cursor: pointer;
background: hsla(var(--mac-oscuro-hsl), .10); color: var(--text);
}
.sa-btn:hover { background: hsla(var(--mac-oscuro-hsl), .16); color: var(--text); }
.sa-btn--primario, .sa-btn--primario:hover { background: var(--accent); color: #fff; }
.sa-btn--primario:hover { filter: brightness(1.08); }
#modalAcercaDe .modal-dialog { max-width: 600px; }
#modalAcercaDe .modal-content {
background: var(--card); border: 1px solid hsla(var(--mac-oscuro-hsl), .18);
border-radius: 11px; overflow: hidden;
box-shadow: 0 22px 70px rgba(0,0,0,.35), 0 0 0 .5px rgba(0,0,0,.2);
}
#modalAcercaDe .modal-body { padding: 30px 36px 12px; }
.ad-barra {
position: relative; display: flex; align-items: center; justify-content: center;
height: 38px; padding: 0 12px;
background: linear-gradient(to bottom, hsla(var(--mac-oscuro-hsl), .05), hsla(var(--mac-oscuro-hsl), .10));
border-bottom: 1px solid hsla(var(--mac-oscuro-hsl), .14);
}
.ad-semaforos { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.ad-sem {
width: 12px; height: 12px; padding: 0; border-radius: 50%;
border: .5px solid rgba(0,0,0,.18);
}
.ad-sem--rojo     { background: #ff5f57; cursor: pointer; }
.ad-sem--amarillo { background: #febc2e; }
.ad-sem--off      { background: hsla(var(--mac-oscuro-hsl), .18); }
.ad-sem--rojo:hover::after { content: "×"; display: block; font: 700 10px/11px system-ui; color: rgba(0,0,0,.55); }
.ad-segmentos {
display: flex; border-radius: 6px; overflow: hidden;
border: 1px solid hsla(var(--mac-oscuro-hsl), .22);
background: var(--card);
}
.ad-segmentos button {
border: 0; background: transparent; color: var(--text);
padding: 2px 14px; font-size: .74rem; line-height: 1.5;
}
.ad-segmentos button + button { border-left: 1px solid hsla(var(--mac-oscuro-hsl), .18); }
.ad-segmentos button.activo { background: hsla(var(--mac-oscuro-hsl), .62); color: #fff; }
.ad-cuerpo { display: flex; align-items: center; gap: 34px; }
.ad-disco {
flex: 0 0 160px; width: 160px; height: 160px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 35%, #fff 0%, #eef3fb 70%, #dfe7f3 100%);
border: 6px solid #f4f4f6;
box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.18), inset 0 2px 6px rgba(0,0,0,.08);
}
.ad-disco img { width: 96px; height: 96px; object-fit: contain; }
.ad-info { flex: 1 1 auto; min-width: 0; }
.ad-titulo { margin: 0; font-size: 2rem; font-weight: 300; letter-spacing: -.01em; line-height: 1.1; }
.ad-titulo strong { font-weight: 700; }
.ad-version { margin: 2px 0 16px; font-size: .86rem; user-select: all; }
.ad-datos { margin: 0 0 18px; font-size: .84rem; line-height: 1.35; }
.ad-datos > div { padding: 3px 0; }
.ad-datos dt { display: inline; font-weight: 600; margin-right: 8px; }
.ad-datos dd { display: inline; margin: 0; overflow-wrap: anywhere; }
.ad-datos-modelo dd { font-weight: 600; }
.ad-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.ad-btn {
display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
border-radius: 5px; font-size: .8rem; white-space: nowrap;
text-decoration: none; cursor: pointer; color: var(--text);
background: var(--card);
border: 1px solid hsla(var(--mac-oscuro-hsl), .22);
box-shadow: 0 1px 1px rgba(0,0,0,.06);
}
.ad-btn:hover { color: var(--text); background: hsla(var(--mac-oscuro-hsl), .05); }
.ad-btn:active { background: hsla(var(--mac-oscuro-hsl), .12); }
.ad-pie { margin-top: 26px; text-align: center; font-size: .72rem; color: var(--muted); opacity: .8; }
.ad-firma { display: flex; justify-content: center; margin-top: 8px; }
@media (max-width: 575.98px) {
#modalAcercaDe .modal-body { padding: 22px 20px 12px; }
.ad-cuerpo { flex-direction: column; gap: 16px; text-align: center; }
.ad-disco { flex-basis: auto; width: 116px; height: 116px; }
.ad-disco img { width: 70px; height: 70px; }
.ad-acciones { justify-content: center; }
.ad-segmentos button { padding: 2px 10px; }
}
:root { --em-accent:#0ea5e9; --em-accent2:#0284c7; }
.em-page .pay-hero    { background: linear-gradient(135deg, #0c1a2e 0%, #0a2a4a 100%); }
.em-page .pay-cta     { background: linear-gradient(135deg, #0a2a4a 0%, #0c1a2e 100%); }
.em-page .pay-step-num      { background: var(--em-accent); }
.em-page .pay-stat-num      { color: var(--em-accent); }
.em-page .pay-method-icon   { background: rgba(14,165,233,.15); }
.em-page .pay-method-icon i { color: var(--em-accent) !important; }
.em-page .pay-trust-badge i { color: var(--em-accent); }
.em-mockup-card { background:rgba(255,255,255,.06); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px; color:#fff; max-width:340px; width:100%; }
.em-mockup-tag { font-size:.7rem; font-weight:700; opacity:.7; margin-bottom:6px; }
.em-tag--work { color:#7dd3fc; } .em-tag--student { color:#86efac; }
.em-mockup-title { font-size:1rem; font-weight:700; margin-bottom:4px; }
.em-mockup-meta { font-size:.75rem; color:#94a3b8; margin-bottom:10px; }
.em-mockup-chips { display:flex; gap:6px; flex-wrap:wrap; }
.em-chip { font-size:.68rem; font-weight:600; padding:3px 10px; border-radius:99px; }
.em-chip--green  { background:rgba(34,197,94,.18);  color:#86efac; }
.em-chip--blue   { background:rgba(14,165,233,.18); color:#7dd3fc; }
.em-chip--purple { background:rgba(139,92,246,.18); color:#c4b5fd; }
.em-mockup-sep { border-top:1px solid rgba(255,255,255,.1); margin:16px 0; }
.em-puestos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.em-puesto-card { background:var(--sidebar); border:1px solid var(--border); border-radius:14px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .18s,transform .14s,border-color .18s; color:inherit; }
.em-puesto-card:hover { box-shadow:0 8px 28px rgba(14,165,233,.14); border-color:var(--em-accent); transform:translateY(-2px); }
.em-puesto-card-header { padding:14px 16px 0; display:flex; gap:8px; flex-wrap:wrap; }
.em-tipo-badge,.em-enfoque-badge { font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.em-tipo--presencial  { background:rgba(14,165,233,.1); color:#0284c7; }
.em-tipo--remoto      { background:rgba(34,197,94,.1);  color:#16a34a; }
.em-tipo--ambos       { background:rgba(139,92,246,.1); color:#7c3aed; }
.em-enfoque--trabajo    { background:rgba(245,158,11,.1); color:#b45309; }
.em-enfoque--estudiante { background:rgba(139,92,246,.1); color:#7c3aed; }
.em-puesto-card-body { padding:14px 16px; flex:1; }
.em-puesto-empresa { font-size:.75rem; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.em-puesto-titulo { font-size:1rem; font-weight:700; margin:0 0 8px; color:inherit; line-height:1.3; }
.em-puesto-desc { font-size:.82rem; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.em-puesto-footer { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.em-contrato-chip { font-size:.68rem; background:var(--input-bg); padding:2px 8px; border-radius:6px; font-weight:600; }
.em-salario { font-size:.78rem; color:#22c55e; font-weight:700; }
.em-salario-freq { font-weight:400; color:var(--muted); }
[ng-view], [data-ng-view] { min-width: 0; }
@media (max-width: 767.98px) {
.form-control, .form-select, .form-control-sm, .form-select-sm {
font-size: 16px !important;
}
}
@media (max-width: 767.98px) {
.nativa-panel-header { padding: 10px 12px; }
.nativa-panel-header > .d-flex { flex-wrap: wrap; gap: 6px; }
.nativa-panel-header .input-group { flex: 1 1 140px; min-width: 140px; }
.nativa-panel-header .d-flex { flex-wrap: wrap; }
.nativa-panel-header .ms-auto { margin-left: 0 !important; }
.nativa-panel-header .vr { display: none; }
.nativa-panel-header .btn { white-space: nowrap; }
}
@media (max-width: 767.98px) {
.nativa-panel-body:not([style*="overflow"]) { overflow-x: auto; }
}
@media (max-width: 767.98px) {
.nativa-panel-footer { padding: 6px 12px; flex-wrap: wrap; font-size: .73rem; }
.nativa-panel-footer > span:first-child { display: none; }
}
.btn-xs {
padding: .1rem .35rem;
font-size: .75rem;
line-height: 1.4;
border-radius: .2rem;
}
@media (max-width: 767.98px) {
.btn:not(.btn-sm):not(.btn-xs) { min-height: 40px; }
.nativa-pag-btn { min-width: 34px; min-height: 30px; }
}
@media (max-width: 575.98px) {
.modal-dialog {
margin: 0.25rem;
max-width: calc(100vw - 0.5rem);
}
.modal-dialog.modal-lg,
.modal-dialog.modal-xl {
height: calc(100dvh - 2rem);
max-height: calc(100dvh - 2rem);
display: flex;
flex-direction: column;
}
.modal-dialog.modal-lg .modal-content,
.modal-dialog.modal-xl .modal-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-dialog.modal-lg .modal-body,
.modal-dialog.modal-xl .modal-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-body { padding: 1rem; }
.modal-header, .modal-footer { padding: 0.75rem 1rem; }
}
@media (max-width: 767.98px) {
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
width: min(340px, calc(100vw - 32px)) !important;
}
}
@media (max-width: 767.98px) {
.ayuda-subheader { padding: 8px 14px; gap: 8px; }
}
.ca-app-page, .ca-tema-page, .ca-articulo-page { --ca-acento: #4f46e5; --ca-acento-bg: rgba(79, 70, 229, .08); }
.ca-app-page, .ca-tema-page, .ca-articulo-page { flex-shrink: 0; }
:where(#shell)[data-bs-theme="light"] :is(.ca-app-page, .ca-tema-page, .ca-articulo-page) { --ca-acento: #4f46e5; --ca-acento-bg: rgba(79, 70, 229, .08); }
:where(#shell)[data-bs-theme="dark"]  :is(.ca-app-page, .ca-tema-page, .ca-articulo-page) { --ca-acento: #a5b4fc; --ca-acento-bg: rgba(129, 140, 248, .15); }
.ca-docs-wrap { max-width: 1360px; margin: 0 auto; padding: 0 1.25rem; }
.ca-docs-top { background: var(--input-bg); border-bottom: 1px solid var(--border); }
.ca-docs-top-in {
display: flex; align-items: center; justify-content: space-between;
gap: .5rem 1rem; flex-wrap: wrap; min-height: 56px; padding-top: .5rem; padding-bottom: .5rem;
}
.ca-docs-top-migas { display: flex; align-items: center; min-width: 0; font-size: .8rem; }
.ca-docs-top-ca { color: var(--muted); text-decoration: none; white-space: nowrap; }
.ca-docs-top-ca:hover { color: var(--text); }
.ca-docs-top-sep { color: var(--muted); margin: 0 .55rem; }
.ca-docs-top-app {
display: inline-flex; align-items: center; gap: .45rem; min-width: 0;
color: var(--text); font-weight: 600; text-decoration: none;
}
.ca-docs-top-app span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-docs-top-app:hover { color: var(--ca-acento); }
.ca-docs-buscar {
display: flex; align-items: center; gap: .4rem; flex: 0 1 300px; min-width: 0;
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
padding: .2rem .2rem .2rem .7rem;
}
.ca-docs-buscar > i { color: var(--muted); font-size: .8rem; }
.ca-docs-buscar input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
color: var(--text); font-size: .85rem; padding: .2rem 0;
}
.ca-docs-buscar input::placeholder { color: var(--muted); }
.ca-docs-buscar button {
width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 6px;
background: #6366f1; color: #fff; font-size: .75rem;
display: flex; align-items: center; justify-content: center;
}
.ca-docs-buscar button:hover { background: #4f46e5; }
@media (max-width: 575.98px) { .ca-docs-buscar { flex-basis: 100%; } }
.ca-docs {
display: grid; gap: 0 2.5rem; padding: 1.5rem 0 3rem;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "toggle" "nav" "main";
}
.ca-docs-toggle { grid-area: toggle; }
.ca-docs-nav    { grid-area: nav; display: none; }
.ca-docs-main   { grid-area: main; min-width: 0; }
.ca-docs-aside  { grid-area: toc; display: none; }
.ca-docs-nav.abierta { display: block; margin-bottom: 1.25rem; }
@media (min-width: 992px) {
.ca-docs:has(> .ca-docs-nav) { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "nav main"; }
.ca-docs-toggle { display: none !important; }
.ca-docs-nav, .ca-docs-nav.abierta { display: block; margin-bottom: 0; }
}
@media (min-width: 1280px) {
.ca-docs:has(> .ca-docs-nav):has(.ca-toc) { grid-template-columns: 250px minmax(0, 1fr) 200px; grid-template-areas: "nav main toc"; }
.ca-docs:not(:has(> .ca-docs-nav)):has(.ca-toc) { grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "main toc"; }
.ca-docs-aside:has(.ca-toc) { display: block; }
}
ca-docs-nav, ca-docs-toc { display: block; position: sticky; top: 1rem; }
.ca-docs-toggle {
display: flex; align-items: center; gap: .55rem; width: 100%;
margin-bottom: 1rem; padding: .55rem .85rem;
border: 1px solid var(--border); border-radius: 8px;
background: var(--card); color: var(--text); font-size: .85rem; font-weight: 600; text-align: left;
}
.ca-docs-toggle > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-docs-toggle-chev { font-size: .7rem; color: var(--muted); transition: transform .15s; }
.ca-docs-toggle[aria-expanded="true"] .ca-docs-toggle-chev { transform: rotate(180deg); }
.ca-docs-migas {
display: inline-block; margin-bottom: .35rem;
font-size: .78rem; font-weight: 600; color: var(--ca-acento); text-decoration: none;
}
.ca-docs-migas:hover { color: var(--ca-acento); text-decoration: underline; }
.ca-docs-h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.25; margin: 0 0 .5rem; color: var(--text); }
.ca-docs-meta {
display: flex; flex-wrap: wrap; gap: .35rem 1rem;
font-size: .75rem; color: var(--muted);
margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.ca-articulo-content :is(h1, h2, h3) { scroll-margin-top: 1rem; }
.ca-dn {
max-height: calc(var(--ca-docs-alto, 100vh) - 2rem); overflow-y: auto;
scrollbar-width: thin; font-size: .84rem; padding: 0 .25rem .75rem 0;
}
.ca-dn-filtro {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem;
padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px;
background: var(--card); cursor: text;
}
.ca-dn-filtro > i { color: var(--muted); font-size: .72rem; }
.ca-dn-filtro input {
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
color: var(--text); font-size: .82rem;
}
.ca-dn-filtro input::placeholder { color: var(--muted); }
.ca-dn-tema {
display: flex; align-items: center; gap: .45rem; width: 100%;
padding: .42rem .5rem; border: 0; border-radius: 6px; background: none;
color: var(--text); font-size: .84rem; font-weight: 600; text-align: left; line-height: 1.3;
}
.ca-dn-tema:hover { background: var(--input-bg); }
.ca-dn-chev { width: .7rem; flex-shrink: 0; font-size: .58rem; color: var(--muted); transition: transform .15s; }
.ca-dn-tema.abierto .ca-dn-chev { transform: rotate(90deg); }
.ca-dn-tema-txt { flex: 1; min-width: 0; }
.ca-dn-tema.actual .ca-dn-tema-txt { color: var(--ca-acento); }
.ca-dn-num { font-size: .7rem; font-weight: 500; color: var(--muted); }
.ca-dn-arts { margin: .1rem 0 .45rem .85rem; border-left: 1px solid var(--border); }
.ca-dn-art {
display: block; margin-left: -1px; padding: .3rem .55rem .3rem .8rem;
border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
color: var(--muted); text-decoration: none; line-height: 1.35;
}
.ca-dn-art:hover { color: var(--text); background: var(--input-bg); }
.ca-dn-art.activo {
color: var(--ca-acento); background: var(--ca-acento-bg);
border-left-color: var(--ca-acento); font-weight: 600;
}
.ca-dn-vacio { color: var(--muted); font-size: .8rem; padding: .25rem .5rem; margin: 0; }
.ca-toc { max-height: calc(var(--ca-docs-alto, 100vh) - 2rem); overflow-y: auto; scrollbar-width: thin; font-size: .8rem; }
.ca-toc-titulo {
margin: 0 0 .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--muted);
}
.ca-toc-link {
display: block; padding: .28rem 0 .28rem .8rem;
border-left: 2px solid var(--border);
color: var(--muted); text-decoration: none; line-height: 1.35;
}
.ca-toc-link.sub { padding-left: 1.55rem; }
.ca-toc-link:hover { color: var(--text); }
.ca-toc-link.activo { color: var(--ca-acento); border-left-color: var(--ca-acento); font-weight: 600; }
.ca-pn { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2rem; max-width: 760px; }
.ca-pn-item {
display: flex; flex-direction: column; gap: .15rem; min-width: 0;
padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px;
background: var(--card); color: var(--text); text-decoration: none;
transition: border-color .15s;
}
.ca-pn-item:hover { border-color: var(--ca-acento); color: var(--text); }
.ca-pn-next { grid-column: 2; align-items: flex-end; text-align: right; }
.ca-pn-dir { font-size: .72rem; color: var(--muted); }
.ca-pn-titulo { font-size: .9rem; font-weight: 600; color: var(--ca-acento); line-height: 1.35; }
.ca-pn-tema { font-size: .72rem; color: var(--muted); }
@media (max-width: 575.98px) {
.ca-pn { grid-template-columns: 1fr; }
.ca-pn-next { grid-column: 1; }
}
@media (max-width: 767.98px) {
.em-puestos-grid { grid-template-columns: 1fr; gap: 12px; }
.pay-hero-inner { padding: 36px 16px; }
.pay-hero-mockup { display: none; }
}
@media (max-width: 767.98px) {
.fs-5 { font-size: 0.95rem !important; }
}
.tour-overlay { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
.tour-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
pointer-events: all;
}
.tour-highlight-ring {
position: fixed; z-index: 8002;
border-radius: 10px;
border: 2px solid var(--accent);
box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px rgba(var(--accent-rgb), .25), 0 0 24px rgba(var(--accent-rgb), .35);
pointer-events: none;
transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
.tour-card {
position: fixed; z-index: 8003;
width: 310px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 20px 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.45);
pointer-events: all;
display: flex; gap: 14px;
animation: tour-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tour-pop {
from { opacity: 0; transform: scale(.92); }
to   { opacity: 1; transform: scale(1); }
}
.tour-card-icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(var(--accent-rgb), .12);
display: flex; align-items: center; justify-content: center;
color: var(--accent2); font-size: 17px;
}
.tour-card-body { flex: 1; min-width: 0; }
.tour-progress { display: flex; gap: 5px; margin-bottom: 10px; }
.tour-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--border); transition: background .2s, width .2s;
}
.tour-dot.active { width: 18px; border-radius: 3px; background: var(--accent); }
.tour-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tour-card-desc  { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.tour-card-actions { display: flex; flex-direction: column; gap: 10px; }
.tour-btn-skip {
font-size: 11px; color: var(--muted); background: none; border: none;
padding: 0; cursor: pointer; text-align: left;
}
.tour-btn-skip:hover { color: var(--text); text-decoration: underline; }
.tour-nav { display: flex; gap: 6px; align-items: center; }
.tour-btn-prev {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
.tour-btn-prev:disabled { opacity: .35; cursor: default; }
.tour-btn-prev:not(:disabled):hover { background: var(--hover); }
.tour-btn-next {
flex: 1; height: 32px; padding: 0 14px; border-radius: 8px;
background: var(--accent); border: none;
color: #fff; font-size: 13px; font-weight: 600;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tour-btn-next:hover { opacity: .88; }
.tour-close {
position: absolute; top: 10px; right: 10px;
width: 24px; height: 24px; border-radius: 6px;
background: none; border: none; color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 13px;
}
.tour-close:hover { background: var(--hover); color: var(--text); }
.header-search-btn {
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent; background: none;
color: inherit; cursor: pointer; box-shadow: none;
}
[ng-cloak] { display: none !important; }
@keyframes agente-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes agente-slide-in { from { transform: translateY(-12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.agente-hint, .agente-no-results {
display: flex; align-items: center; gap: 10px;
padding: 20px 18px; color: var(--muted); font-size: 13px;
}
.agente-hint i, .agente-no-results i { font-size: 15px; flex-shrink: 0; }
.agente-lista { padding: 6px; }
.agente-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 10px; cursor: pointer;
text-decoration: none; color: var(--text);
transition: background .12s;
}
.agente-item:hover, .agente-item--active {
background: rgba(var(--accent-rgb), .09);
}
.agente-item-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.agente-item-title {
font-size: 14px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agente-item-desc {
font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agente-item-path {
font-size: 11px; color: var(--muted);
background: rgba(var(--accent-rgb), .1);
border-radius: 6px; padding: 2px 8px;
white-space: nowrap; font-family: monospace;
}
.agente-section-label {
padding: 6px 12px 2px;
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted);
}
.agente-section-label--smart { color: var(--accent); display: flex; align-items: center; gap: 5px; }
.agente-ayuda-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px; font-size: 13px; color: var(--muted);
cursor: pointer; text-decoration: none;
transition: background .12s, color .12s;
}
.agente-ayuda-link:hover {
background: rgba(var(--accent-rgb), .07); color: var(--accent);
}
.agente-ayuda-link i:first-child { font-size: 14px; flex-shrink: 0; }
.agente-ayuda-link span { flex: 1; }
.agente-ayuda-arrow { font-size: 11px; margin-left: auto; }
.agente-footer {
display: flex; align-items: center; gap: 16px;
padding: 10px 18px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--muted);
}
.agente-footer kbd {
background: var(--border); border-radius: 4px;
padding: 1px 5px; font-family: inherit;
}
.amelia-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
padding: 24px 16px;
animation: agente-fade-in .12s ease;
}
.amelia-modal {
width: 100%; max-width: 600px; margin: 0 16px;
border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
overflow: hidden;
display: flex; flex-direction: column;
height: 400px;
max-height: calc(100dvh - 48px);
animation: agente-slide-in .14s ease;
transition: max-width .2s ease, height .2s ease, max-height .2s ease;
}
.amelia-modal--chat {
max-width: 780px;
height: calc(100dvh - 48px);
max-height: 820px;
}
.amelia-modal--guia {
max-width: 880px;
height: calc(100dvh - 48px);
max-height: 860px;
}
.amelia-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-top: 1px solid var(--border);
flex-shrink: 0; order: 2;
position: relative; z-index: 20;
background: color-mix(in srgb, var(--card) var(--vidrio-op-interior), transparent);
}
.amelia-header-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#7c3aed,#a855f7);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-style: italic; font-size: 13px;
}
#amelia-input {
flex: 1; min-width: 0; outline: none;
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: 22px;
padding: 9px 16px;
color: var(--text); font-size: 15px;
transition: border-color .15s, box-shadow .15s;
}
#amelia-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
#amelia-input::placeholder { color: var(--muted); }
.amelia-adjunto-strip {
order: 2; flex-shrink: 0;
padding: 8px 14px 0;
position: relative; z-index: 20;
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--card) var(--vidrio-op-interior), transparent);
}
.amelia-adjunto-strip + .amelia-header { border-top: none; }
.amelia-attach { position: relative; flex-shrink: 0; }
.amelia-plus-btn {
width: 36px; height: 36px; border-radius: 50%;
background: none; border: none; color: var(--muted);
font-size: 16px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: background-color .15s, color .15s, transform .15s;
}
.amelia-plus-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
.amelia-plus-btn:disabled { opacity: .5; cursor: default; }
.amelia-plus-btn--open { transform: rotate(45deg); color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.amelia-attach-menu {
position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 30;
width: 248px; max-width: calc(100vw - 120px); padding: 8px;
background: var(--card); border: 1px solid var(--border);
border-radius: 14px; box-shadow: 0 14px 38px rgba(0,0,0,.30);
animation: amelia-menu-in .12s ease;
}
@keyframes amelia-menu-in { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.amelia-attach-item {
display: flex; align-items: center; gap: 12px; width: 100%;
background: none; border: none; border-radius: 10px;
padding: 9px 10px; cursor: pointer; text-align: left;
color: var(--text); font-family: inherit;
transition: background-color .12s;
}
.amelia-attach-item:hover { background: rgba(var(--accent-rgb),.10); }
.amelia-attach-ico { width: 22px; flex-shrink: 0; text-align: center; font-size: 17px; }
.amelia-attach-ico--xls { color: #21a366; }
.amelia-attach-ico--csv { color: #3b82f6; }
.amelia-attach-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.amelia-attach-t { font-size: 14px; }
.amelia-attach-d { font-size: 11.5px; color: var(--muted); }
.amelia-campo { flex: 1; min-width: 0; position: relative; display: flex; }
.amelia-send-btn {
position: absolute; right: 5px; top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff;
border: none; border-radius: 50%;
width: 31px; height: 31px; padding: 0;
font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
animation: amelia-send-in .12s ease;
transition: opacity .15s;
}
.amelia-campo:has(.amelia-send-btn) #amelia-input { padding-right: 42px; }
.amelia-send-btn:disabled { opacity: .4; cursor: default; }
@keyframes amelia-send-in { from { opacity: 0; transform: translateY(-50%) scale(.6) } to { opacity: 1; transform: translateY(-50%) scale(1) } }
.amelia-esc-btn {
background: var(--border); color: var(--muted);
border: none; border-radius: 6px; padding: 3px 8px;
font-size: 11px; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.amelia-esc-btn:hover { background: rgba(var(--accent-rgb),.15); color: var(--accent); }
.amelia-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.amelia-panel {
position: absolute; inset: 0; overflow-y: auto;
background: none;
}
.amelia-panel--routes { z-index: 5; overflow-y: hidden; display: flex; flex-direction: column; }
.agente-lista { overflow-y: auto; flex: 1; min-height: 0; padding: 6px; }
.amelia-chat {
position: absolute; inset: 0;
display: flex; flex-direction: column;
background: none;
}
.amelia-messages {
flex: 1; overflow-y: auto; padding: 14px 16px;
display: flex; flex-direction: column; gap: 12px;
}
.amelia-chat-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px; border-top: 1px solid var(--border); flex-shrink: 0; gap: 8px;
}
.amelia-kb-footer {
flex-shrink: 0; border-top: 1px solid var(--border); order: 3;
background: color-mix(in srgb, var(--card) var(--vidrio-op-interior), transparent);
}
.amelia-nueva-btn {
background: none; border: 1px solid var(--border); border-radius: 8px;
padding: 4px 12px; font-size: 12px; color: var(--muted); cursor: pointer;
display: flex; align-items: center; gap: 6px; white-space: nowrap;
transition: border-color .15s, color .15s;
}
.amelia-nueva-btn:hover { border-color: var(--accent); color: var(--accent); }
.amelia-uso {
padding: 4px 16px 8px;
}
.amelia-kb-footer .agente-footer { border-top: none; }
.amelia-uso-top {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.amelia-uso-label { font-size: 11px; color: var(--muted); }
.amelia-uso-right { display: flex; align-items: center; gap: 4px; }
.amelia-uso-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.amelia-uso-pct   { font-size: 11px; color: var(--muted); opacity: .7; font-variant-numeric: tabular-nums; }
.amelia-uso-reset { font-size: 11px; color: var(--muted); opacity: .7; }
.amelia-uso-count--warn { color: #d97706; }
.amelia-uso-count--danger { color: #dc2626; font-weight: 600; }
.amelia-uso-bar {
height: 4px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.amelia-uso-fill {
height: 100%; background: #7c3aed; border-radius: 99px;
transition: width .4s ease, background .4s ease;
min-width: 0;
}
.amelia-uso-fill--warn  { background: #d97706; }
.amelia-uso-fill--danger { background: #dc2626; }
.welcome-search-box--trigger {
cursor: pointer; user-select: none;
transition: border-color .15s, box-shadow .15s;
}
.welcome-search-box--trigger:hover {
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.welcome-search-placeholder { flex: 1; color: var(--muted); font-size: 14px; }
.ca-kb-col {
background: var(--bs-tertiary-bg);
border-radius: 10px;
padding: 10px 8px 10px;
transition: background .15s ease, outline .15s ease;
}
.ca-kb-col.ca-kb-drop-over {
background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-tertiary-bg));
outline: 2px dashed var(--bs-primary);
outline-offset: -2px;
}
.ca-kb-card {
background: var(--bs-body-bg);
transition: opacity .15s ease;
}
.ca-kb-card.ca-kb-dragging {
opacity: .35;
cursor: grabbing;
}
.ca-kb-empty {
border-style: dashed !important;
}
.ca-kb-arch-btn {
position: absolute; top: 6px; right: 6px;
padding: 2px 5px; line-height: 1;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
opacity: 0; transition: opacity .15s ease;
pointer-events: none;
}
.ca-kb-card:hover .ca-kb-arch-btn {
opacity: 1;
pointer-events: auto;
}
.ca-kb-arch-btn:hover {
color: var(--bs-danger);
border-color: var(--bs-danger);
}
.ca-usr-result:hover {
background: var(--bs-tertiary-bg) !important;
}
.ca-kb-card.ca-kb-selected {
outline: 2px solid var(--bs-primary);
outline-offset: -1px;
background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
}
@media (max-width: 767.98px) {
.container > .row.g-5,
.container-fluid > .row.g-5 { --bs-gutter-x: 1.5rem; }
}
@media (max-width: 767.98px) {
.mensajes-sidebar { width: 100% !important; border-right: 0 !important; }
}
.mensajes-chat-bg {
background-color: #e5ddd5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' opacity='.08'%3E%3Cpath d='M40 2L78 40L40 78L2 40Z'/%3E%3Cpath d='M40 22L58 40L40 58L22 40Z'/%3E%3C/g%3E%3C/svg%3E");
}
:where(#shell)[data-bs-theme='dark'] .mensajes-chat-bg {
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1' opacity='.05'%3E%3Cpath d='M40 2L78 40L40 78L2 40Z'/%3E%3Cpath d='M40 22L58 40L40 58L22 40Z'/%3E%3C/g%3E%3C/svg%3E");
}
.log-json-pre, .log-raw-pre {
background: #0d1117;
color: #e6edf3;
font-size: .78rem;
line-height: 1.6;
padding: .75rem 1rem 1rem;
overflow-x: auto;
border-radius: 0 0 .375rem .375rem;
max-height: 480px;
overflow-y: auto;
white-space: pre;
word-break: normal;
}
.log-json-pre .json-key  { color: #79c0ff; }
.log-json-pre .json-str  { color: #a5d6ff; }
.log-json-pre .json-num  { color: #ffa657; }
.log-json-pre .json-bool { color: #ff7b72; }
.log-json-pre .json-null { color: #8b949e; }
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 0.9rem 1rem;
border-top: 1px solid var(--border);
animation: cookie-slide-up 0.35s cubic-bezier(.22,.68,0,1.2) both;
}
[data-bs-theme="dark"] .cookie-banner {
background: #0d1418;
box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .cookie-banner {
background: #ffffff;
box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
}
@keyframes cookie-slide-up {
from { transform: translateY(100%); opacity: 0; }
to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner-inner {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.cookie-banner-icon {
color: var(--accent);
font-size: 1.25rem;
flex-shrink: 0;
}
.cookie-banner-text {
flex: 1;
min-width: 200px;
font-size: 0.875rem;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
.cookie-banner-text strong {
color: var(--text);
}
.cookie-banner-link {
color: var(--accent);
text-decoration: underline;
font-weight: 500;
}
.cookie-banner-link:hover { opacity: 0.8; }
.cookie-banner-btn {
flex-shrink: 0;
padding: 0.5rem 1.4rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)));
color: #fff;
transition: opacity 0.18s;
}
.cookie-banner-btn:hover { opacity: 0.87; }
.pt-section {
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 0.6rem;
padding: 0.85rem 1rem 1rem;
background: var(--bs-body-bg, #fff);
transition: opacity 0.15s ease;
}
.pt-section.pt-off { opacity: 0.6; }
.pt-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.65);
z-index: 5;
border-radius: 0.5rem;
}
.acciones-offcanvas { padding: 0.4rem 0; }
.acciones-offcanvas .acc-group-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: var(--bs-secondary-color, #6b7280);
padding: 0.7rem 1.1rem 0.25rem;
}
.acciones-offcanvas .acc-item {
display: flex;
align-items: center;
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 0.6rem 1.1rem;
font-size: 0.9rem;
color: var(--bs-body-color);
transition: background-color 0.12s ease;
}
.acciones-offcanvas .acc-item:hover,
.acciones-offcanvas .acc-item:focus { background-color: var(--bs-tertiary-bg, #f1f3f5); }
.acciones-offcanvas .acc-item .acc-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
margin-right: 0.7rem;
flex-shrink: 0;
}
.acciones-offcanvas .acc-item.text-danger:hover { background-color: var(--bs-danger-bg-subtle, #f8d7da); }
.acciones-offcanvas .acc-item.text-danger .acc-ic { color: inherit; }
.acciones-offcanvas .acc-divider {
height: 1px;
background: var(--bs-border-color, #e5e7eb);
margin: 0.4rem 1.1rem;
}
.dh-fac-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-bottom: 14px;
}
.dh-fac-tab {
padding: 4px 16px; border-radius: 999px;
border: 1px solid var(--bs-border-color, #e5e7eb); background: transparent;
font-size: 13px; color: var(--bs-secondary-color, #6c757d); cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.dh-fac-tab:hover { background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color); }
.dh-fac-tab.active {
background: rgba(139,92,246,.1); border-color: #8b5cf6;
color: #8b5cf6; font-weight: 600;
}
.dh-plan-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.9rem;
}
.dh-plan-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bs-card-bg, #fff);
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dh-plan-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.dh-plan-card--danger { border-color: var(--bs-danger, #dc3545) !important; }
.dh-plan-card-hd {
padding: 18px 14px 16px; font-size: 15px; font-weight: 700; text-align: center;
background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color);
}
.dh-plan-card-body {
padding: 14px 14px 10px; flex: 1;
display: flex; flex-direction: column; align-items: center;
background: var(--bs-card-bg, #fff);
}
.dh-plan-price {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.dh-plan-amount {
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
color: var(--bs-body-color);
}
.dh-plan-cur {
font-size: 0.72rem;
color: var(--bs-secondary-color, #6c757d);
display: flex;
flex-direction: column;
line-height: 1.1;
}
.dh-plan-cur small { font-size: 0.7rem; }
.dh-plan-actions {
display: flex;
gap: 0.4rem;
padding: 0.7rem 0.9rem;
border-top: 1px solid var(--bs-border-color, #e5e7eb);
background: var(--bs-card-bg, #fff);
}
.dh-plan-confirm {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
min-height: 140px;
padding: 1rem;
}
.dh-plan-card--add {
align-items: center;
justify-content: center;
text-align: center;
border-style: dashed;
color: var(--bs-secondary-color, #6c757d);
cursor: pointer;
min-height: 140px;
background: transparent;
padding: 1rem;
}
.dh-plan-card--add:hover {
color: #8b5cf6;
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.05);
}
.dh-plan-form {
background: var(--bs-card-bg, #fff);
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 14px;
padding: 1.2rem;
}
.dh-plan-card.plan-estilo-amarillo, .sp-card.plan-estilo-amarillo { border-color:#eab308; }
.sp-card.plan-estilo-amarillo { border-top-color:#eab308; }
.plan-estilo-amarillo .dh-plan-card-hd { background:rgba(234,179,8,.12); }
.plan-estilo-amarillo .dh-plan-card-hd, .plan-estilo-amarillo .dh-plan-amount,
.plan-estilo-amarillo .sp-name, .plan-estilo-amarillo .sp-amount { color:#ca8a04; }
.plan-estilo-amarillo .sp-btn { background:#eab308; color:#1f2937; }
.plan-estilo-amarillo .sp-btn:hover { background:#ca8a04; color:#1f2937; }
.dh-plan-card.plan-estilo-verde, .sp-card.plan-estilo-verde { border-color:#16a34a; }
.sp-card.plan-estilo-verde { border-top-color:#16a34a; }
.plan-estilo-verde .dh-plan-card-hd { background:rgba(22,163,74,.12); }
.plan-estilo-verde .dh-plan-card-hd, .plan-estilo-verde .dh-plan-amount,
.plan-estilo-verde .sp-name, .plan-estilo-verde .sp-amount { color:#15803d; }
.plan-estilo-verde .sp-btn { background:#16a34a; }
.plan-estilo-verde .sp-btn:hover { background:#15803d; }
.dh-plan-card.plan-estilo-azul, .sp-card.plan-estilo-azul { border-color:#2563eb; }
.sp-card.plan-estilo-azul { border-top-color:#2563eb; }
.plan-estilo-azul .dh-plan-card-hd { background:rgba(37,99,235,.12); }
.plan-estilo-azul .dh-plan-card-hd, .plan-estilo-azul .dh-plan-amount,
.plan-estilo-azul .sp-name, .plan-estilo-azul .sp-amount { color:#1d4ed8; }
.plan-estilo-azul .sp-btn { background:#2563eb; }
.plan-estilo-azul .sp-btn:hover { background:#1d4ed8; }
.sp-badge-actual { background:#0d6efd; }
.sp-card.sp-actual.plan-estilo-amarillo, .sp-card.sp-popular.plan-estilo-amarillo { border-color:#eab308 !important; }
.sp-card.sp-actual.plan-estilo-verde,    .sp-card.sp-popular.plan-estilo-verde    { border-color:#16a34a !important; }
.sp-card.sp-actual.plan-estilo-azul,     .sp-card.sp-popular.plan-estilo-azul     { border-color:#2563eb !important; }
.plan-estilo-amarillo .sp-badge-pop { background:#eab308; color:#1f2937; }
.plan-estilo-verde .sp-badge-pop    { background:#16a34a; }
.plan-estilo-azul .sp-badge-pop     { background:#2563eb; }
.sp-popular.plan-estilo-amarillo .sp-btn { background:#eab308; color:#1f2937; }
.sp-popular.plan-estilo-amarillo .sp-btn:hover { background:#ca8a04; color:#1f2937; }
.sp-popular.plan-estilo-verde .sp-btn { background:#16a34a; }
.sp-popular.plan-estilo-verde .sp-btn:hover { background:#15803d; }
.sp-popular.plan-estilo-azul .sp-btn { background:#2563eb; }
.sp-popular.plan-estilo-azul .sp-btn:hover { background:#1d4ed8; }
:where(#shell)[data-bs-theme="dark"] .plan-estilo-amarillo .dh-plan-card-hd,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-amarillo .dh-plan-amount,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-amarillo .sp-name,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-amarillo .sp-amount { color:#facc15; }
:where(#shell)[data-bs-theme="dark"] .plan-estilo-verde .dh-plan-card-hd,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-verde .dh-plan-amount,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-verde .sp-name,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-verde .sp-amount { color:#4ade80; }
:where(#shell)[data-bs-theme="dark"] .plan-estilo-azul .dh-plan-card-hd,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-azul .dh-plan-amount,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-azul .sp-name,
:where(#shell)[data-bs-theme="dark"] .plan-estilo-azul .sp-amount { color:#60a5fa; }
.sp-wrap { max-width: 1060px; margin: 0 auto; padding: 60px 16px; text-align: center; }
.sp-eyebrow { display:inline-block; background:color-mix(in srgb, var(--lp-accent,#0d6efd) 12%, transparent); color:var(--lp-accent,#0d6efd); font-size:.8rem; font-weight:600; padding:.35rem .95rem; border-radius:999px; margin-bottom:.7rem; }
.sp-title { font-weight:800; font-size:2.3rem; color:var(--lp-accent, var(--accent,#0d6efd)); margin:0 0 .45rem; }
.sp-tienda {
--bs-btn-color: var(--lp-accent, var(--bs-primary)); --bs-btn-border-color: var(--lp-accent, var(--bs-primary));
--bs-btn-hover-bg: var(--lp-accent, var(--bs-primary)); --bs-btn-hover-border-color: var(--lp-accent, var(--bs-primary));
--bs-btn-active-bg: var(--lp-accent, var(--bs-primary)); --bs-btn-active-border-color: var(--lp-accent, var(--bs-primary));
--bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
:where(#shell)[data-bs-theme="dark"] .sp-title   { color: color-mix(in srgb, var(--lp-accent, var(--accent,#0d6efd)) 65%, #fff); }
:where(#shell)[data-bs-theme="dark"] .sp-eyebrow { color: color-mix(in srgb, var(--lp-accent,#0d6efd) 60%, #fff); }
.sp-comparar { --bs-btn-color: var(--lp-accent, var(--bs-link-color)); --bs-btn-hover-color: var(--lp-accent, var(--bs-link-hover-color)); --bs-btn-active-color: var(--lp-accent, var(--bs-link-hover-color)); }
.sp-sub { color:#6b7280; font-size:1.05rem; margin:0 0 2.6rem; }
.sp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:860px){ .sp-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
@media (min-width:861px){
.sp-grid--1 { grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; }
.sp-grid--2 { grid-template-columns:repeat(2,1fr); max-width:720px; margin-left:auto; margin-right:auto; }
.sp-grid--4 > .sp-card:last-child, .sp-grid--7 > .sp-card:last-child { grid-column: 2; }
}
.sp-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-top:4px solid #94a3b8; border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; text-align:left; }
.sp-card--sel { border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.18); }
.sp-tier-1 { border-top-color:#6366f1; }
.sp-tier-2 { border-top-color:#0f172a; }
.sp-popular { border-color:#22c55e; }
.sp-actual { border-color:#0d6efd !important; }
.sp-modelo { font-size:.72rem; color:#6b7280; font-weight:600; margin:-.5rem 0 .9rem; }
@media (min-width:861px){ .sp-popular{ transform:scale(1.05);} }
.sp-badge-pop { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#22c55e; color:#fff; font-size:.72rem; font-weight:700; padding:.28rem .85rem; border-radius:999px; letter-spacing:.03em; white-space:nowrap; }
.sp-name { font-weight:700; font-size:1.2rem; color:#111827; margin-bottom:.5rem; }
.sp-price { display:flex; align-items:baseline; gap:.4rem; margin:.1rem 0 1.1rem; }
.sp-amount { font-weight:800; font-size:2.7rem; line-height:1; color:#111827; }
.sp-cur { color:#6b7280; font-size:.85rem; font-weight:600; }
.sp-off { display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; margin:-.75rem 0 1.1rem; padding:.22rem .6rem; border-radius:999px; background:rgba(34,197,94,.14); color:#15803d; font-size:.75rem; font-weight:700; }
.sp-antes { font-size:.8rem; color:#6b7280; font-weight:600; margin:0 0 .15rem; }
.sp-antes s { color:#9ca3af; }
.sp-modelo--org { color:#2563eb; }
.sp-desc { color:#6b7280; font-size:.85rem; margin-bottom:1.1rem; }
.sp-feats { list-style:none; padding:0; margin:0 0 1.6rem; flex:1; }
.sp-feats li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:#374151; padding:.4rem 0; border-top:1px solid #f1f5f9; }
.sp-feats li:first-child { border-top:0; }
.sp-feats li.sp-no { color:#9ca3af; }
.sp-feats i { margin-top:.2rem; font-size:.95rem; }
.sp-btn { display:block; width:100%; border:0; text-align:center; background:#0d6efd; color:#fff; font-weight:600; font-size:1rem; padding:.8rem 1rem; border-radius:12px; text-decoration:none; transition:background .15s ease; }
.sp-btn:hover { background:#0b5ed7; color:#fff; }
.sp-btn--actual { cursor:default; opacity:.72; pointer-events:none; }
.sp-popular .sp-btn { background:#22c55e; }
.sp-popular .sp-btn:hover { background:#16a34a; }
.sp-factabs { display:inline-flex; gap:6px; background:#eef2f7; border-radius:999px; padding:5px; margin:0 0 2.2rem; }
.sp-factab { border:0; background:transparent; color:#475569; font-weight:600; font-size:.85rem; padding:.45rem 1.15rem; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.sp-factab:hover { color:#0d6efd; }
.sp-factab.active { background:#fff; color:#0d6efd; box-shadow:0 2px 6px rgba(0,0,0,.10); }
:where(#shell)[data-bs-theme="dark"] .sp-card {
background:var(--card,#0d1418);
border-left-color:var(--bs-border-color,#1f2c33);
border-right-color:var(--bs-border-color,#1f2c33);
border-bottom-color:var(--bs-border-color,#1f2c33);
}
:where(#shell)[data-bs-theme="dark"] .sp-card.sp-popular { border-color:#22c55e; }
:where(#shell)[data-bs-theme="dark"] .sp-card.plan-estilo-amarillo { border-color:#eab308; }
:where(#shell)[data-bs-theme="dark"] .sp-card.plan-estilo-verde { border-color:#16a34a; }
:where(#shell)[data-bs-theme="dark"] .sp-card.plan-estilo-azul { border-color:#2563eb; }
:where(#shell)[data-bs-theme="dark"] .sp-name, :where(#shell)[data-bs-theme="dark"] .sp-amount { color:var(--bs-body-color,#e9edef); }
:where(#shell)[data-bs-theme="dark"] .sp-cur, :where(#shell)[data-bs-theme="dark"] .sp-desc,
:where(#shell)[data-bs-theme="dark"] .sp-antes, :where(#shell)[data-bs-theme="dark"] .sp-modelo { color:var(--bs-secondary-color,#b0bec5); }
:where(#shell)[data-bs-theme="dark"] .sp-antes s { color:#64748b; }
:where(#shell)[data-bs-theme="dark"] .sp-feats li { color:#cbd5e1; border-top-color:rgba(255,255,255,.08); }
:where(#shell)[data-bs-theme="dark"] .sp-feats li.sp-no { color:#64748b; }
:where(#shell)[data-bs-theme="dark"] .sp-factabs { background:#111c22; }
:where(#shell)[data-bs-theme="dark"] .sp-factab { color:#b0bec5; }
:where(#shell)[data-bs-theme="dark"] .sp-factab.active { background:var(--card,#0d1418); color:#60a5fa; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.sp-compact .sp-title { font-size:1.6rem; margin-bottom:.35rem; }
.sp-compact .sp-sub { font-size:.9rem; margin-bottom:1.6rem; }
.sp-compact .sp-factabs { margin-bottom:1.6rem; }
.sp-compact.sp-grid, .sp-compact .sp-grid { gap:16px; }
.sp-compact .sp-card { padding:20px 18px; border-radius:14px; border-top-width:3px; }
.sp-compact .sp-name { font-size:1rem; margin-bottom:.35rem; }
.sp-compact .sp-price { margin:.1rem 0 .75rem; }
.sp-compact .sp-amount { font-size:1.9rem; }
.sp-compact .sp-cur { font-size:.75rem; }
.sp-compact .sp-off { margin:-.45rem 0 .75rem; font-size:.7rem; padding:.18rem .5rem; }
.sp-compact .sp-modelo { font-size:.68rem; margin:-.35rem 0 .6rem; }
.sp-compact .sp-antes { font-size:.72rem; }
.sp-compact .sp-desc { font-size:.78rem; margin-bottom:.75rem; }
.sp-compact .sp-feats { margin-bottom:1rem; }
.sp-compact .sp-feats li { font-size:.82rem; padding:.3rem 0; gap:.5rem; }
.sp-compact .sp-feats i { font-size:.85rem; }
.sp-compact .sp-badge-pop { font-size:.66rem; padding:.24rem .7rem; top:-11px; }
.sp-compact .sp-btn { font-size:.9rem; padding:.6rem 1rem; border-radius:10px; }
.sp-feats .sp-feat-txt { flex:1; min-width:0; }
.sp-feat-info { margin-left:.15rem; font-size:.8em; opacity:.5; cursor:help; vertical-align:middle; }
.sp-feats i.sp-feat-info { margin-top:0; font-size:.8em; }
.dh-plan-wrap { display:flex; flex-direction:column; gap:.45rem; width:100%; }
.dh-plan-btn { display:flex; width:100%; align-items:center; gap:.6rem; padding:.6rem .7rem; border:1px solid var(--bs-border-color,#dee2e6); border-radius:12px; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529); cursor:pointer; line-height:1.15; text-align:left; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.dh-plan-btn:hover { border-color:#0d6efd; box-shadow:0 4px 14px rgba(13,110,253,.18); }
.dh-plan-btn:active { transform:translateY(1px); }
.dh-plan-btn-ico { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:#0d6efd; color:#fff; font-size:1rem; flex-shrink:0; }
.dh-plan-btn-txt { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; }
.dh-plan-btn-txt small { font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#6c757d); line-height:1; }
.dh-plan-btn-txt strong { font-size:1rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.dh-plan-btn-gear { font-size:.85rem; color:var(--muted,#6c757d); margin-left:auto; flex-shrink:0; }
.dh-plan-btn--alert { border-color:#f59e0b; }
.dh-plan-btn--alert .dh-plan-btn-ico { background:#f59e0b; }
.dh-plan-btn--danger { border-color:#ef4444; }
.dh-plan-btn--danger .dh-plan-btn-ico { background:#ef4444; }
.dh-plan-btn--loading { cursor:default; }
.dh-plan-btn--loading:hover { border-color:var(--bs-border-color,#dee2e6); box-shadow:none; }
.dh-plan-btn--loading .dh-plan-btn-ico { background:var(--muted,#6c757d); }
.dh-plan-skeleton { color:var(--muted,#6c757d); animation:dhPlanPulse 1s ease-in-out infinite; }
@keyframes dhPlanPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.dh-plan-alert { display:flex; width:100%; align-items:center; justify-content:center; border:0; border-radius:9px; padding:.4rem .6rem; font-size:.74rem; font-weight:600; cursor:pointer; }
.dh-plan-alert--warn { background:rgba(245,158,11,.16); color:#b45309; }
.dh-plan-alert--danger { background:rgba(239,68,68,.16); color:#dc2626; }
dh-plan-badge { display:block; }
.dh-plan-wrap--banner { margin:0 0 .85rem; }
.dh-plan-wrap--banner .dh-plan-alert { justify-content:space-between; gap:1rem; padding:.6rem 1rem; font-size:.82rem; border-radius:10px; }
.dh-plan-alert-cta { display:inline-flex; align-items:center; font-weight:700; white-space:nowrap; }
dh-plan-badge[chip] { display:contents; }
.dh-plan-chip { display:inline-flex; align-items:center; gap:.35rem; max-width:180px; padding:.22rem .6rem; border:1px solid var(--bs-border-color,#dee2e6); border-radius:999px; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529); font-size:.75rem; font-weight:600; line-height:1.15; cursor:pointer; transition:filter .15s; }
.dh-plan-chip:hover { filter:brightness(.97); }
.dh-plan-chip > i { font-size:.72rem; opacity:.7; flex-shrink:0; }
.dh-plan-chip-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-plan-chip--warn { border-color:#f59e0b; background:rgba(245,158,11,.14); color:#b45309; }
.dh-plan-chip--danger { border-color:#ef4444; background:rgba(239,68,68,.14); color:#dc2626; }
.dh-plan-chip--warn > i, .dh-plan-chip--danger > i { opacity:1; }
@media (max-width: 575.98px) {
.dh-plan-chip:not(.dh-plan-chip--warn):not(.dh-plan-chip--danger) { display:none; }
.dh-plan-chip { max-width:130px; }
}
dh-plan-badge[menu] { display:contents; }
dh-plan-badge[host] { display:contents; }
.dh-dock-menu-item.dh-plan-menu--warn:not(:hover),
.dh-dock-menu-item.dh-plan-menu--warn:not(:hover) i   { color:#b45309; }
.dh-dock-menu-item.dh-plan-menu--danger:not(:hover),
.dh-dock-menu-item.dh-plan-menu--danger:not(:hover) i { color:#dc2626; }
.dh-plan-sub { border:1px solid var(--bs-border-color,#dee2e6); border-radius:12px; padding:1rem 1.1rem; background:var(--bs-tertiary-bg,#f8f9fa); }
.dh-plan-sub-hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.85rem; }
.dh-plan-sub-grid { display:flex; flex-direction:column; gap:0; }
.dh-plan-sub-item { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--bs-border-color,#dee2e6); }
.dh-plan-sub-item:last-child { border-bottom:0; }
.dh-plan-sub-item small { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#6c757d); white-space:nowrap; }
.dh-plan-sub-item strong { font-size:.92rem; text-align:right; }
.dh-plan-sub-dias { display:block; font-size:.72rem; font-weight:500; color:var(--muted,#6c757d); }
.dh-plan-sub-item strong.text-danger  .dh-plan-sub-dias,
.dh-plan-sub-item strong.text-warning .dh-plan-sub-dias { color:inherit; }
.dh-plan-sub-note { margin-top:.85rem; font-size:.8rem; font-weight:600; padding:.5rem .75rem; border-radius:9px; line-height:1.3; }
.dh-plan-sub-note--warn { background:rgba(245,158,11,.14); color:#b45309; }
.dh-plan-sub-note--danger { background:rgba(239,68,68,.14); color:#b91c1c; }
.dh-foto-av { width:150px; height:150px; object-fit:cover; }
.dh-foto-ph { width:150px; height:150px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:var(--bs-tertiary-bg,#f1f3f5); border:1px solid var(--bs-border-color,#dee2e6); color:var(--bs-secondary-color,#6c757d); }
.dh-avwrap { position:relative; display:inline-flex; cursor:pointer; border-radius:50%; }
.dh-avwrap .ov { position:absolute; inset:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:.7rem;
display:none; align-items:center; justify-content:center; }
.dh-avwrap:hover .ov { display:flex; }
.ctrlc-tableta-tx {
display: flex; align-items: center; gap: 8px;
font-family: var(--mac-fuente); font-size: var(--menu-tam);
color: hsla(var(--mac-oscuro-hsl), 1); cursor: pointer;
}
.ctrlc-tableta-tx i { width: 15px; text-align: center; opacity: .6; }
html.modo-tableta {
--header-h: 46px;
--menu-tam: .95rem;
--menu-radio: .65rem;
}
html.modo-tableta header .menubar-app,
html.modo-tableta header .header-icon-btn,
html.modo-tableta header .header-ctx-btn,
html.modo-tableta header .header-search-btn,
html.modo-tableta header .brand-btn,
html.modo-tableta header .notif-btn,
html.modo-tableta header .header-user-chip {
font-size: 1rem; padding: 0 .7rem;
}
html.modo-tableta header .avatar--sm { width: 30px; height: 30px; font-size: 13px; }
html.modo-tableta header .brand-ico  { width: 24px; height: 24px; }
html.modo-tableta .notif-badge {
font-size: 9px; min-width: 15px; height: 15px;
}
html.modo-tableta .dh-dock-menu-item,
html.modo-tableta .dh-desk-back,
html.modo-tableta .user-menu .user-menu-item,
html.modo-tableta .dropdown-menu .dropdown-item {
padding: .55rem .9rem;
}
html.modo-tableta .dh-dock-menu-item i { width: 19px; font-size: 15px; }
html.modo-tableta .soluciones-item-icon {
width: 68px; height: 68px; border-radius: 18px; font-size: 28px;
}
html.modo-tableta .sol-ic-jba { font-size: 19px; }
html.modo-tableta .sol-item-name { font-size: .92rem; }
html.modo-tableta .lp-buscar-caja,
html.modo-tableta .lp-instalar,
html.modo-tableta .lp-acciones .amelia-esc-btn {
padding: 11px 18px; font-size: 1rem;
}
html.modo-tableta .dh-dock          { --dock-ic: 52px; }
html.modo-tableta .dh-dock--chico   { --dock-ic: 40px; }
html.modo-tableta .dh-dock--grande  { --dock-ic: 64px; }
html.modo-tableta #shell .btn-sm,
html.modo-tableta #shell .form-control-sm,
html.modo-tableta #shell .form-select-sm {
font-size: .9rem; padding: .4rem .75rem; min-height: 38px;
}
html.modo-tableta #shell .form-check-input { width: 1.25em; height: 1.25em; }