*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ── App loader ── */
#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; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Variables
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
	--bg:           #000000;
	--sidebar:      #000000;
	--sidebar-hover:#0d1418;
	--accent:       #2563eb;
	--accent2:      #60a5fa;
	--accent-rgb:   37,99,235;
	--text:         #e9edef;
	--muted:        #b0bec5;
	--border:       #1f2c33;
	--input-bg:     #0d1418;
	--header:       #000000;
}

body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Bootstrap 5 – Dark Mode Global
   Aplica a cualquier modal, card, form, table, etc. sin necesidad de
   reglas por ID.  Las vistas específicas pueden sobreescribir con mayor
   especificidad si lo necesitan.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Modal ── */
.modal-content                 { background: var(--sidebar);     border-color: var(--border);  color: var(--text); }
.modal-header                  { background: var(--sidebar);     border-color: var(--border); }
.modal-footer                  { background: var(--sidebar);     border-color: var(--border); }
.modal-body                    { background: var(--sidebar); }
.btn-close                     { filter: invert(1) grayscale(1) brightness(2); }

/* ── Forms ── */
.form-control,
.form-select,
textarea.form-control          { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.form-control:focus,
.form-select:focus             { background: var(--input-bg); border-color: var(--accent); color: var(--text);
                                 box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .2); }
.form-control::placeholder     { color: var(--muted); opacity: 1; }
.form-control:disabled,
.form-select:disabled          { background: var(--input-bg) !important; opacity: .5; color: var(--muted); }
.form-control[readonly]        { background: var(--input-bg); color: var(--muted); }

.form-label                    { font-size: .75rem; color: var(--muted); margin-bottom: 4px;
                                 font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.form-text                     { color: var(--muted); }

.input-group-text              { background: var(--sidebar-hover); border-color: var(--border); color: var(--muted); }

.form-check-input              { background-color: var(--input-bg); border-color: var(--border); }
.form-check-input:checked      { background-color: var(--accent);   border-color: var(--accent); }
.form-check-input:focus        { box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .2); border-color: var(--accent); }
.form-check-label              { color: var(--text); font-size: .85rem; }

option                         { background: var(--sidebar); color: var(--text); }

/* Validation */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid        { border-color: #dc3545; background-image: none; }
.invalid-feedback              { color: #f87171; font-size: .78rem; }
.valid-feedback                { color: #4ade80; font-size: .78rem; }

/* ── Card ── */
.card                          { background: var(--sidebar); border-color: var(--border); color: var(--text); }
.card-header                   { background: rgba(255,255,255,.03); border-color: var(--border); }
.card-footer                   { background: rgba(255,255,255,.02); border-color: var(--border); }
.card-body                     { color: var(--text); }

/* ── Table ── */
.table                         { --bs-table-bg: transparent; --bs-table-color: var(--text);
                                 color: var(--text); border-color: var(--border); }
.table > :not(caption) > * > * { border-color: var(--border); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--sidebar-hover); color: var(--text); }
.table-light                   { --bs-table-bg: rgba(255,255,255,.03); --bs-table-color: var(--muted); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.02); }
.table th                      { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── Alert ── */
.alert                         { background: var(--sidebar-hover); border-color: var(--border); color: var(--text); }
.alert-danger                  { background: rgba(220,53,69,.12);  border-color: rgba(220,53,69,.3);  color: #f87171; }
.alert-warning                 { background: rgba(255,193,7,.12);  border-color: rgba(255,193,7,.3);  color: #fbbf24; }
.alert-success                 { background: rgba(25,135,84,.12);  border-color: rgba(25,135,84,.3);  color: #4ade80; }
.alert-info                    { background: rgba(13,202,240,.1);  border-color: rgba(13,202,240,.3); color: #67e8f9; }

/* ── Dropdown ── */
.dropdown-menu                 { background: var(--sidebar); border-color: var(--border); }
.dropdown-item                 { color: var(--text); }
.dropdown-item:hover,
.dropdown-item:focus           { background: var(--sidebar-hover); color: var(--text); }
.dropdown-header               { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.dropdown-divider              { border-color: var(--border); }

/* ── List group ── */
.list-group-item               { background: var(--sidebar); border-color: var(--border); color: var(--text); }
.list-group-item-action:hover,
.list-group-item-action:focus  { background: var(--sidebar-hover); color: var(--text); }
.list-group-item.active        { background: rgba(var(--accent-rgb),.15); border-color: var(--accent); color: var(--accent); }

/* ── Nav tabs / pills ── */
.nav-tabs                      { border-color: var(--border); }
.nav-tabs .nav-link            { color: var(--muted); border-color: transparent; }
.nav-tabs .nav-link:hover      { color: var(--text); border-color: transparent; }
.nav-tabs .nav-link.active     { background: var(--sidebar); border-color: var(--border) var(--border) var(--sidebar); color: var(--accent); }
.nav-pills .nav-link           { color: var(--muted); }
.nav-pills .nav-link.active    { background: rgba(var(--accent-rgb),.15); color: var(--accent); }

/* ── Pagination ── */
.page-link                     { background: var(--sidebar); border-color: var(--border); color: var(--muted); }
.page-link:hover               { background: var(--sidebar-hover); border-color: var(--border); color: var(--text); }
.page-item.active .page-link   { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item.disabled .page-link { background: var(--sidebar); border-color: var(--border); color: var(--muted); opacity: .5; }

/* ── Badge ── */
.badge.bg-secondary            { background: var(--sidebar-hover) !important; color: var(--muted) !important; }
.badge.bg-light                { background: var(--sidebar-hover) !important; color: var(--text) !important; }

/* ── Miscellaneous ── */
hr                             { border-color: var(--border); opacity: 1; }
.text-muted                    { color: var(--muted) !important; }
.border, [class*="border-"]    { border-color: var(--border) !important; }
.progress                      { background: var(--border); }
.progress-bar                  { background: var(--accent); }

.btn-outline-secondary         { border-color: var(--border); color: var(--muted); }
.btn-outline-secondary:hover   { background: var(--sidebar-hover); color: var(--text); border-color: var(--muted); }
.btn-outline-secondary:active  { background: var(--sidebar-hover) !important; color: var(--text) !important; }

/* Subtle colors */
.bg-warning-subtle             { background-color: rgba(255,193,7,.1)    !important; }
.bg-danger-subtle              { background-color: rgba(220,53,69,.1)    !important; }
.bg-success-subtle             { background-color: rgba(25,135,84,.1)    !important; }
.bg-primary-subtle             { background-color: rgba(var(--accent-rgb),.1) !important; }
.bg-secondary-subtle           { background-color: rgba(108,117,125,.12) !important; }
.bg-info-subtle                { background-color: rgba(13,202,240,.1)   !important; }
.text-warning-emphasis         { color: #ffd86b !important; }
.text-danger-emphasis          { color: #ff8a8a !important; }
.text-success-emphasis         { color: #4ade80 !important; }
.text-primary-emphasis         { color: #7eb3ff !important; }

/* Scrollbars globales */
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: var(--bg); }
::-webkit-scrollbar-thumb      { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--sidebar-hover); }

/* login-btn se mantiene: usado en lock screen (index.html) y webstore/detalle.html */
.login-btn {
	width: 100%; padding: 12px; border-radius: 8px; border: none; cursor: pointer;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
	color: #fff; font-size: 15px; font-weight: 600; margin-top: 8px;
	transition: opacity .2s;
}
.login-btn:hover { opacity: .88; }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NIP overlay
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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 screen ── */
.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;
}
.login-btn--danger {
	background: #ef4444;
}
.login-btn--danger:hover:not(:disabled) { background: #dc2626; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   App layout
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#shell { flex: 1; min-height: 0; display: flex; overflow: hidden; }
#login-screen { flex: 1; overflow-y: auto; }

header {
	height: 56px; background: var(--header); border-bottom: 1px solid var(--border);
	display: flex; align-items: center; padding: 0 20px; gap: 16px; flex-shrink: 0;
}
.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); }
.header-brand {
	font-size: 17px; font-weight: 700; text-decoration: none;
	background: linear-gradient(90deg, var(--accent), var(--accent2));
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	white-space: nowrap;
}
.header-brand:hover { opacity: .85; }
.header-title { font-size: 14px; color: var(--muted); margin-left: 4px; }
.header-spacer { flex: 1; }
.help-btn {
	display: flex; align-items: center; text-decoration: none;
	background: none; border: 1px solid var(--border); cursor: pointer;
	color: var(--muted); padding: 6px 14px; border-radius: 6px; font-size: 13px;
	transition: all .15s; white-space: nowrap;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); }

.header-icon-btn {
	background: none; border: 1px solid var(--border); cursor: pointer; text-decoration: none;
	color: var(--muted); padding: 6px 10px; border-radius: 6px; font-size: 14px;
	display: flex; align-items: center; transition: all .15s;
}
.header-icon-btn:hover, .header-icon-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── Header ctx (org + app selectors) ── */
.header-ctx { display: flex; align-items: center; gap: 2px; }
.header-ctx-sep { color: var(--border); font-size: 16px; margin: 0 1px; flex-shrink: 0; }
.header-ctx-btn {
	display: flex; align-items: center; gap: 5px;
	background: none; border: none; cursor: pointer;
	color: var(--text); padding: 4px 8px; border-radius: 6px;
	font-size: 13px; transition: background .15s; max-width: 150px; white-space: nowrap;
}
.header-ctx-btn:hover { background: var(--sidebar-hover); }
.header-ctx-btn--disabled { opacity: .45; pointer-events: none; }
.header-ctx-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.header-ctx-app-wrap { position: relative; }
.ctx-app-dot--xs {
	width: 18px; height: 18px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.ctx-app-dot--xs img { width: 100%; height: 100%; object-fit: cover; }

/* ── Header user wrap ── */
.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-chip:hover, .header-user-chip.open { background: var(--sidebar-hover); }
.header-user-name {
	font-size: 13px; color: var(--text); white-space: nowrap;
	max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.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;
}
.user-menu--header {
	position: absolute; top: calc(100% + 8px); right: 0;
	background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
	min-width: 210px; z-index: 1100; overflow: hidden; padding: 6px;
}

/* ctx-dropdown posicionado cuando está dentro del header */
.header-ctx-app-wrap .ctx-dropdown {
	position: absolute; top: calc(100% + 6px); left: 0;
	background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.22);
	min-width: 200px; max-height: 260px; overflow-y: auto; z-index: 1100;
}

/* ── Header login button ── */
.header-login-btn {
	display: flex; align-items: center; gap: 6px; text-decoration: none;
	padding: 6px 14px; border-radius: 6px; border: 1px solid var(--accent);
	color: var(--accent); font-size: 13px; font-weight: 500;
	transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.header-login-btn:hover { background: rgba(37,99,235,.08); }

/* Notificaciones */
.notif-wrapper { position: relative; }
.notif-btn {
	background: none; border: 1px solid var(--border); cursor: pointer;
	color: var(--muted); padding: 6px 10px; border-radius: 6px; font-size: 14px;
	display: flex; align-items: center; gap: 4px; transition: all .15s; position: relative;
}
.notif-btn:hover { border-color: var(--accent); color: var(--accent); }
.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-dropdown {
	position: absolute; top: calc(100% + 8px); right: 0;
	width: 320px; background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
	z-index: 1000; overflow: hidden;
}
.notif-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px; border-bottom: 1px solid var(--border);
	font-size: 13px; font-weight: 600; color: var(--text);
}
.notif-count-label { font-size: 11px; color: var(--accent); font-weight: 500; }
/* Lista */
.notif-list { max-height: 340px; 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; }
/* Botón eliminar en lista */
.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; }
/* Estados vacío / cargando */
.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; }
/* Vista detalle */
.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 dropdown */
.soluciones-wrapper { position: relative; }
.soluciones-dropdown {
	position: absolute; top: calc(100% + 8px); right: 0;
	width: 240px; background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
	z-index: 1000; overflow: hidden;
}
.soluciones-header {
	padding: 11px 16px; border-bottom: 1px solid var(--border);
	font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.soluciones-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; text-decoration: none; transition: background .12s;
}
.soluciones-item:hover { background: var(--sidebar-hover); }
.soluciones-item-icon {
	width: 34px; height: 34px; border-radius: 8px; background: #5E17EB;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 15px; flex-shrink: 0;
}
.soluciones-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.soluciones-item-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.notif-footer a:hover { text-decoration: underline; }

.layout { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ── */
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; }

.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.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 (dropup) */
.user-menu {
	position: absolute; bottom: calc(100% + 4px); left: 8px; right: 8px;
	background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 -8px 24px rgba(0,0,0,.4);
	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-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; }

/* ── Content ── */
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; }

.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 ── */
.welcome-screen {
	flex: 1; background: var(--bg);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 12px; color: var(--muted);
	min-height: 100%;
}
.welcome-screen svg { opacity: .25; }
.welcome-screen .welcome-icon { opacity: .3; 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; }
.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: var(--accent); color: #fff; border: none; border-radius: 8px;
	padding: 6px 18px; font-size: 13px; font-weight: 500; cursor: pointer;
	flex-shrink: 0; transition: opacity .15s;
}
.welcome-search-box button:hover { opacity: .85; }

/* ── Shell gate (bloqueo sin org) ── */
.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 ── */
.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; }

/* Cotizador icon override */
.cot-icon { width: 46px; height: 46px; }
.cot-empty-icon { width: 72px; height: 72px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Tabla genérica reutilizable  (.usr-*)
   Usada por: Usuarios · Alumnos (y cualquier módulo futuro con usr-container)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.usr-container {
	display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
	font-size: .88rem;
}

/* Toolbar */
.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); }

/* Table */
.usr-table-wrap { flex: 1; overflow-y: auto; }
.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; }

/* Badges */
.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); }

/* Avatar */
.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; }

/* Pagination */
.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); }

/* Tabs del modal */
.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; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Organizaciones (.org-*)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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; }

/* ── Org Settings (/org) ── */
.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(37,99,235,.12); color: var(--accent);
	border-color: rgba(37,99,235,.25);
}
.org-settings-body {
	flex: 1; overflow-y: auto; padding: 24px 28px;
}
.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;
}
@media (max-width: 600px) {
	.org-settings-grid { grid-template-columns: 1fr; }
	.org-settings-field--full { grid-column: 1; }
	.org-settings-body { padding: 16px; }
}
.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: 9px 12px; vertical-align: middle; color: var(--text); }

.org-cell-name { font-weight: 600; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-cell-sub  { font-size: .74rem; color: var(--muted); }
.org-cell-mono { font-family: monospace; font-size: .78rem; }

.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); }

.org-modal-tabs {
	display: flex; gap: 4px; padding: 12px 16px 0; flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
}
.org-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;
}
.org-modal-tab:hover  { color: var(--text); background: var(--sidebar-hover); }
.org-modal-tab.active { color: var(--accent); background: var(--bg); border-color: var(--border); }

.org-tab-pane        { display: none; padding: 16px; }
.org-tab-pane.active { display: block; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Gestión (.ges-*)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ges-view { overflow-y: auto; }
.ges-view .panel {
	background: var(--sidebar) !important; border: 1px solid var(--border);
	border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.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); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Inventario (.inv-*)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.inv-view { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.inv-view .layout       { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.inv-view .col-cuentas  { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
.inv-view .col-main     { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.inv-view .r-subtabs   { display: flex; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; overflow-x: auto; }
.inv-view .r-subtab    { padding: 6px 12px; font-size: .72rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.inv-view .r-subtab:hover { color: var(--text); }
.inv-view .r-subtab.active { color: var(--accent2); border-bottom-color: var(--accent2); font-weight: 600; }
.inv-view .r-subtab.disabled { opacity: .45; cursor: not-allowed; }

.inv-view .sub-pane        { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.inv-view .sub-pane.active { display: flex; }
.inv-view .panel-head      { background: var(--sidebar); border-bottom: 1px solid var(--border); padding: 8px 10px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.inv-view .section-title   { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }

.inv-view .r-tabs          { display: flex; border-bottom: 1px solid var(--border); background: var(--sidebar); flex-shrink: 0; overflow-x: auto; }
.inv-view .r-tab           { padding: 8px 14px; font-size: .75rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.inv-view .r-tab:hover     { color: var(--text); }
.inv-view .r-tab.active    { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.inv-view .tab-pane        { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.inv-view .tab-pane.active { display: flex; }

.inv-view .list-scroll     { overflow-y: auto; flex: 1; }
.inv-view .list-item       { padding: .45rem .75rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.inv-view .list-item:last-child { border-bottom: none; }
.inv-view .list-item:hover      { background: var(--sidebar-hover); }
.inv-view .list-item.active     { background: rgba(var(--accent-rgb),.12); border-left: 3px solid var(--accent); }

.inv-view .item-name  { font-weight: 600; font-size: .82rem; line-height: 1.3; }
.inv-view .item-sub   { font-size: .7rem; color: var(--muted); }
.inv-view .item-code  { font-family: monospace; font-size: .7rem; color: var(--muted); }
.inv-view .empty-state { color: var(--muted); font-size: .8rem; padding: 2.5rem 1rem; text-align: center; }
.inv-view .empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; }

.inv-view .badge-activo   { background: rgba(25,135,84,.2);  color: #4ade80; border: 1px solid #198754; }
.inv-view .badge-inactivo { background: rgba(220,53,69,.15); color: #f87171; border: 1px solid #dc3545; }
.inv-view .badge-compra   { background: rgba(25,135,84,.18); color: #4ade80; }
.inv-view .badge-venta    { background: rgba(255,193,7,.15);  color: #fbbf24; }
.inv-view .badge-baja     { background: rgba(220,53,69,.15); color: #f87171; }
.inv-view .b-pill         { display: inline-block; padding: 1px 6px; border-radius: 20px; font-size: .62rem; font-weight: 700; }
.inv-view .qty-chip       { display: inline-flex; align-items: center; gap: 3px; background: rgba(var(--accent-rgb),.12); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 20px; padding: 1px 8px; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.inv-view .qty-chip.zero  { background: rgba(220,53,69,.1); color: #f87171; border-color: rgba(220,53,69,.3); }

.inv-view .form-label      { font-size: .7rem; color: var(--muted); margin-bottom: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.inv-view .btn-icon        { padding: 1px 5px; font-size: .73rem; line-height: 1.6; }
.inv-view .sub-item        { padding: .4rem .75rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; transition: background .1s; }
.inv-view .sub-item:hover  { background: var(--sidebar-hover); }
.inv-view .sub-item:last-child { border-bottom: none; }
.inv-view .pat-toolbar     { background: var(--sidebar); border-bottom: 1px solid var(--border); padding: 7px 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.inv-view .progress        { background: var(--border) !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   view-padded (herramientas, cotizador, etc.)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.view-padded .btn-check:checked + .btn-outline-warning {
	background: rgba(255,193,7,.15); border-color: #ffc107; color: #ffc107;
}

/* ── Chat de ayuda (welcome-screen modo chat) ─────────────────────────────── */
.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; }
.chat-panel {
	position: relative; 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-spacer { width: 28px; flex-shrink: 0; }
.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; }
}
.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;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Modo automático — sin data-theme, el navegador decide según el sistema
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-color-scheme: light) {
	html:not([data-theme]) {
		--bg:           #f1f5f9;
		--sidebar:      #ffffff;
		--sidebar-hover:#e8edf3;
		--text:         #0f172a;
		--muted:        #374151;
		--border:       #d1d9e0;
		--input-bg:     #f8fafc;
		--header:       #ffffff;
	}
	html:not([data-theme]) body             { background: var(--bg); color: var(--text); }
	html:not([data-theme]) #login-screen    { background: var(--bg); }
	html:not([data-theme]) .user-menu       { box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
	html:not([data-theme]) header           { box-shadow: 0 1px 0 var(--border); }
	html:not([data-theme]) ::-webkit-scrollbar-track { background: var(--bg); }
	html:not([data-theme]) ::-webkit-scrollbar-thumb { background: var(--border); }
	html:not([data-theme]) .nav-section     { color: #1e293b; }
	html:not([data-theme]) nav a            { color: #374151; }
	html:not([data-theme]) nav a:hover      { color: var(--text); }
	html:not([data-theme]) .user-role       { color: #4b5563; }
	html:not([data-theme]) .user-chip-arrow { color: #4b5563; }
	html:not([data-theme]) .header-title    { color: #4b5563; }
	html:not([data-theme]) .help-btn        { color: #374151; }
	html:not([data-theme]) .toggle-btn      { color: #374151; }
	html:not([data-theme]) .usr-table thead th,
	html:not([data-theme]) .org-table thead th { color: #1e293b; background: #f8fafc; }
	html:not([data-theme]) .usr-cell-sub,
	html:not([data-theme]) .org-cell-sub   { color: #4b5563; }
	html:not([data-theme]) .inv-view .item-sub,
	html:not([data-theme]) .inv-view .item-code { color: #4b5563; }
	html:not([data-theme]) .welcome-screen  { color: #374151; }
	html:not([data-theme]) .welcome-screen h2 { color: var(--text); }
	html:not([data-theme]) .form-label      { color: #374151; }
	html:not([data-theme]) .input-group-text { background: var(--sidebar-hover); color: #374151; }
	html:not([data-theme]) .tooltip-inner   { background: #1e293b; color: #f8fafc; }
	html:not([data-theme]) .tooltip .tooltip-arrow::before { border-right-color: #1e293b; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Modo claro explícito (data-theme="light")
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html[data-theme="light"] {
	--bg:           #f1f5f9;
	--sidebar:      #ffffff;
	--sidebar-hover:#e8edf3;
	--text:         #0f172a;
	--muted:        #374151;
	--border:       #d1d9e0;
	--input-bg:     #f8fafc;
	--header:       #ffffff;
}

/* Fondo de página y body */
html[data-theme="light"] body             { background: var(--bg); color: var(--text); }
html[data-theme="light"] #login-screen    { background: var(--bg); }

/* Sombra del menú de usuario más suave */
html[data-theme="light"] .user-menu       { box-shadow: 0 -8px 24px rgba(0,0,0,.12); }

/* Header y aside con borde más visible */
html[data-theme="light"] header           { box-shadow: 0 1px 0 var(--border); }

/* Scrollbar más sutil */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); }

/* Sección de nav — etiquetas PRINCIPAL / MÓDULOS más oscuras */
html[data-theme="light"] .nav-section     { color: #1e293b; }

/* Links de navegación en reposo más oscuros */
html[data-theme="light"] nav a            { color: #374151; }
html[data-theme="light"] nav a:hover      { color: var(--text); }

/* Footer del sidebar */
html[data-theme="light"] .user-role       { color: #4b5563; }
html[data-theme="light"] .user-chip-arrow { color: #4b5563; }

/* Header auxiliar */
html[data-theme="light"] .header-title    { color: #4b5563; }
html[data-theme="light"] .help-btn        { color: #374151; }
html[data-theme="light"] .toggle-btn      { color: #374151; }

/* Tablas — header de columnas */
html[data-theme="light"] .usr-table thead th,
html[data-theme="light"] .org-table thead th { color: #1e293b; background: #f8fafc; }

/* Celdas sub-texto */
html[data-theme="light"] .usr-cell-sub,
html[data-theme="light"] .org-cell-sub   { color: #4b5563; }

/* Inventario sub-texto */
html[data-theme="light"] .inv-view .item-sub,
html[data-theme="light"] .inv-view .item-code { color: #4b5563; }

/* Welcome screen */
html[data-theme="light"] .welcome-screen  { color: #374151; }
html[data-theme="light"] .welcome-screen h2 { color: var(--text); }

/* Formularios */
html[data-theme="light"] .form-label      { color: #374151; }
html[data-theme="light"] .input-group-text { background: var(--sidebar-hover); color: #374151; }

/* Tooltip Bootstrap en modo claro */
html[data-theme="light"] .tooltip-inner   { background: #1e293b; color: #f8fafc; }
html[data-theme="light"] .tooltip .tooltip-arrow::before { border-right-color: #1e293b; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   App switcher & context selectors
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* App switcher */
.app-switcher {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; cursor: pointer; flex-shrink: 0;
	border-bottom: 1px solid var(--border); transition: background .15s;
}
.app-switcher:hover { background: var(--sidebar-hover); }
.app-switcher.open  { background: rgba(var(--accent-rgb),.06); }

.app-sw-icon {
	width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 13px;
}
.app-sw-icon.root     { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.app-sw-icon.escolar  { background: linear-gradient(135deg, #16a34a, #4ade80); }
.app-sw-icon.pv       { background: linear-gradient(135deg, #d97706, #fbbf24); }
.app-sw-icon.checador { background: linear-gradient(135deg, #9333ea, #c084fc); }

.app-sw-name  { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sw-arrow { font-size: 10px; color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.app-sw-arrow.up { transform: rotate(180deg); }

/* App picker */
.app-picker       { padding: 10px 8px; border-bottom: 1px solid var(--border); }
.app-picker-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 0 4px 8px; }
.app-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.app-card {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 14px 6px; border-radius: 8px; cursor: pointer; text-align: center;
	border: 1px solid var(--border); transition: all .15s;
}
.app-card:hover { background: var(--sidebar-hover); border-color: var(--muted); }
.app-card.active.root     { border-color: #2563eb; background: rgba(37,99,235,.1); }
.app-card.active.escolar  { border-color: #16a34a; background: rgba(22,163,74,.1); }
.app-card.active.pv       { border-color: #d97706; background: rgba(217,119,6,.1); }
.app-card.active.checador { border-color: #9333ea; background: rgba(147,51,234,.1); }

.app-card-ico {
	width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; color: #fff;
}
.app-card-ico.root     { background: linear-gradient(135deg, #2563eb, #60a5fa); }
.app-card-ico.escolar  { background: linear-gradient(135deg, #16a34a, #4ade80); }
.app-card-ico.pv       { background: linear-gradient(135deg, #d97706, #fbbf24); }
.app-card-ico.checador { background: linear-gradient(135deg, #9333ea, #c084fc); }

.app-card-name { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.app-card.active .app-card-name { color: var(--text); }

/* Context selectors (org + account) */
.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;
}
.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 ── */
.org-offcanvas {
	width: 300px !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; width: 100%; }
.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;
	background: rgba(var(--accent-rgb),.15);
	color: var(--accent); font-size: .85rem; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.org-offcanvas-item.active .org-offcanvas-avatar {
	background: var(--accent); color: #fff;
}
.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); }
.org-offcanvas-check { font-size: .75rem; color: var(--accent); flex-shrink: 0; }
.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;
}
.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);
}

/* Barra deshabilitada (sin org/app seleccionada) */
.ctx-bar--disabled { opacity: .45; cursor: default; pointer-events: none; }

/* Mini-search dentro del dropdown de orgs */
.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); }

/* Ícono circular de app instalada */
.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: 16px; height: 16px; border-radius: 4px; }
.ctx-app-dot--sm img  { width: 11px; height: 11px; }
.ctx-app-dot--sm span { font-size: 8px; }

/* Collapsed: ocultar selectores de contexto */
aside.collapsed .ctx-bar      { display: none; }
aside.collapsed .ctx-dropdown { display: none; }
aside.collapsed .ctx-search-wrap { display: none; }

/* Light mode adjustments */
html[data-theme="light"] .ctx-dropdown { background: var(--sidebar-hover); }
html[data-theme="light"] .app-card     { background: var(--sidebar); }
html[data-theme="light"] .app-card:hover { background: var(--sidebar-hover); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Mi Cuenta
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-container { display: flex; flex-direction: column; height: 100%; }
.cta-body      { display: flex; flex: 1; gap: 0; overflow: hidden; }

/* Aside lateral */
.cta-aside {
	width: 220px; flex-shrink: 0;
	border-right: 1px solid var(--border);
	display: flex; flex-direction: column;
	padding: 24px 0 16px;
	overflow-y: auto;
}
.cta-avatar-wrap { text-align: center; padding: 0 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: 10px 20px; background: none; border: none;
	cursor: pointer; color: var(--muted); font-size: 13px;
	text-align: left; border-left: 3px solid transparent;
	transition: background .12s, color .12s, border-color .12s;
}
.cta-tab:hover   { background: var(--sidebar-hover); color: var(--text); }
.cta-tab.active  { background: var(--sidebar-hover); color: var(--accent2); border-left-color: var(--accent); }
.cta-tab i       { width: 16px; text-align: center; flex-shrink: 0; }

/* Panel principal */
.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; }

/* user-menu link item (Mi cuenta) */
a.user-menu-item { text-decoration: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Webstore
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Catálogo: página ── */
.ws-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Hero banner */
.ws-hero {
	background: linear-gradient(135deg, #0a1628 0%, #0f1f3d 55%, color-mix(in srgb, var(--accent) 18%, #0f1f3d) 100%);
	padding: 32px 36px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ws-hero-content { margin-bottom: 18px; }
.ws-hero-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.ws-hero-sub { font-size: 13px; color: var(--muted); margin: 0; }
.ws-hero-search-wrap { position: relative; max-width: 500px; }
.ws-hero-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.ws-hero-search {
	width: 100%; padding: 11px 14px 11px 40px; border-radius: 10px; font-size: 14px;
	border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
	color: var(--text); outline: none; transition: border-color .15s, background .15s;
}
.ws-hero-search::placeholder { color: var(--muted); }
.ws-hero-search:focus { border-color: var(--accent); background: rgba(255,255,255,.09); }

/* Filtros */
.ws-filters {
	display: flex; align-items: center; gap: 12px; padding: 12px 36px;
	border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
	background: var(--sidebar);
}
.ws-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
	border-radius: 999px; font-size: 12.5px; font-weight: 600;
	border: 1px solid var(--border); background: transparent; color: var(--muted);
	cursor: pointer; transition: all .15s;
}
.ws-pill:hover { border-color: var(--accent); color: var(--accent); }
.ws-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws-pill--installed { border-color: rgba(34,197,94,.3); color: #22c55e; }
.ws-pill--installed:hover { border-color: #22c55e; }
.ws-pill--installed.active { background: #22c55e; border-color: #22c55e; color: #fff; }
.ws-filter-total { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Área de scroll del catálogo */
.ws-catalog { flex: 1; overflow-y: auto; padding: 24px 36px; }

/* Grid de cards */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.ws-card {
	background: var(--sidebar); border: 1px solid var(--border); border-radius: 14px;
	cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; overflow: hidden;
}
.ws-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.ws-card-header {
	width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; position: relative;
}
.ws-card-img { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; }
.ws-card-initial { font-size: 36px; font-weight: 800; color: #fff; line-height: 1; }
.ws-card-installed-badge {
	position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
	background: #22c55e; color: #fff; font-size: 10px;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.ws-card-body { padding: 12px 14px; }
.ws-card-title {
	font-weight: 600; font-size: 13.5px; color: var(--text);
	display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-card-desc {
	font-size: 11.5px; color: var(--muted); margin-top: 4px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ws-card-price-tag { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--text); }
.ws-card-price-tag .ws-price-free { font-size: 12px; }

/* Chrome Web Store style grid */
.ws-cws-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.ws-cws-card {
	display: flex; flex-direction: column; justify-content: space-between;
	background: var(--sidebar); border: 1px solid var(--border);
	border-radius: 12px; padding: 16px;
	text-decoration: none; color: inherit;
	transition: box-shadow .18s, border-color .18s, transform .18s;
	min-height: 130px;
}
.ws-cws-card:hover {
	border-color: var(--accent);
	box-shadow: 0 6px 24px rgba(0,0,0,.28);
	transform: translateY(-2px);
}

/* Fila superior: icono + título + desc */
.ws-cws-card-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ws-cws-icon {
	width: 64px; height: 64px; flex-shrink: 0;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.ws-cws-icon img { width: 46px; height: 46px; object-fit: contain; }
.ws-cws-icon > span { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.ws-cws-meta { flex: 1; min-width: 0; }
.ws-cws-title {
	font-size: 13.5px; font-weight: 700; color: var(--text);
	display: flex; align-items: center; gap: 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-cws-desc {
	font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Fila inferior: rating + tipo + botón */
.ws-cws-card-bottom {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto;
}
.ws-cws-rating {
	display: flex; align-items: center; gap: 4px;
	font-size: 12px; color: #f59e0b; font-weight: 600;
}
.ws-cws-rating span { color: var(--muted); }
.ws-cws-action {
	margin-left: auto; flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 16px; border-radius: 999px; font-size: 12px; font-weight: 700;
	background: var(--accent); color: #fff;
	transition: opacity .15s;
}
.ws-cws-action:hover { opacity: .85; }
.ws-cws-action--installed {
	background: transparent;
	color: #22c55e;
	border: 1px solid rgba(34,197,94,.4);
}

/* Detalle */
.ws-container { padding: 28px; overflow-y: auto; }
.ws-detalle-toolbar { margin-bottom: 20px; }
.ws-back-btn {
	display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
	color: var(--muted); text-decoration: none; transition: color .15s;
}
.ws-back-btn:hover { color: var(--accent); }
.ws-detalle-hero {
	display: flex; align-items: flex-start; gap: 24px;
	background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px;
	padding: 24px; margin-bottom: 20px; flex-wrap: wrap;
}
.ws-detalle-logo {
	width: 96px; height: 96px; border-radius: 16px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.ws-detalle-logo img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.ws-detalle-logo > span { font-size: 44px; font-weight: 800; color: #fff; line-height: 1; }
.ws-detalle-info { flex: 1; min-width: 180px; }
.ws-detalle-titulo { font-size: 20px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ws-detalle-desc { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ws-detalle-badges { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.ws-install-panel { flex-shrink: 0; text-align: center; min-width: 180px; }
.ws-install-price { margin-bottom: 12px; }
.ws-install-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--accent); color: #fff; border: none; border-radius: 8px;
	padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer;
	transition: opacity .15s; width: 100%; justify-content: center;
}
.ws-install-btn:hover:not(:disabled) { opacity: .88; }
.ws-install-btn:disabled { opacity: .5; cursor: not-allowed; }
.ws-installed-tag {
	color: #22c55e; font-size: 13px; font-weight: 600;
	display: flex; align-items: center; gap: 6px; justify-content: center; margin-bottom: 10px;
}
.ws-uninstall-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent; color: #ef4444; border: 1px solid rgba(239,68,68,.4); border-radius: 8px;
	padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: all .15s; width: 100%; justify-content: center;
}
.ws-uninstall-btn:hover:not(:disabled) { background: rgba(239,68,68,.08); border-color: #ef4444; }
.ws-uninstall-btn:disabled { opacity: .5; cursor: not-allowed; }
.ws-install-note { font-size: 11px; color: var(--muted); margin-top: 8px; }

.ws-detalle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ws-detalle-card { background: var(--sidebar); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.ws-detalle-card-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.ws-info-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--text); }
.ws-info-row + .ws-info-row { border-top: 1px solid var(--border); }
.ws-info-label { color: var(--muted); min-width: 80px; }
.ws-info-icon { color: var(--muted); width: 14px; text-align: center; }
.ws-info-row a { color: var(--accent); text-decoration: none; }
.ws-info-row a:hover { text-decoration: underline; }

/* Badges y stats compartidos */
.ws-badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.ws-badge-app { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ws-badge-plugin { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #8b5cf6; }
.ws-badge-installed { background: rgba(34,197,94,.14); color: #22c55e; }
.ws-meta-stat { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.ws-verified { color: var(--accent); font-size: 12px; }
.ws-verified-lg { color: var(--accent); font-size: 18px; }
.ws-price-free { color: #22c55e; font-weight: 700; font-size: 16px; }
.ws-price { font-weight: 700; color: var(--text); }
.ws-price-lg { font-size: 20px; }
.ws-price-old { text-decoration: line-through; color: var(--muted); font-size: 11px; margin-right: 4px; }
.ws-price-period { color: var(--muted); font-size: 11px; }

/* Estado cargando/vacío */
.ws-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px; color: var(--muted); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Landing Page  (.lp-*)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Navbar ── */
.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);
}
html[data-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(37,99,235,.06); }

/* ── Landing page wrapper ── */
.lp-page { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Hero ── */
.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;
	background:
		radial-gradient(ellipse 60% 55% at 50% -10%, rgba(37,99,235,.18) 0%, transparent 70%),
		radial-gradient(ellipse 40% 30% at 80% 80%,  rgba(96,165,250,.08) 0%, transparent 60%);
}
html[data-theme="light"] .lp-hero-bg {
	background:
		radial-gradient(ellipse 60% 55% at 50% -10%, rgba(37,99,235,.10) 0%, transparent 70%),
		radial-gradient(ellipse 40% 30% at 80% 80%,  rgba(96,165,250,.06) 0%, transparent 60%);
}
.lp-hero-content { position: relative; z-index: 1; max-width: 740px; }
.lp-hero-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 14px; border-radius: 999px; margin-bottom: 28px;
	border: 1px solid rgba(37,99,235,.35); background: rgba(37,99,235,.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(37,99,235,.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); }

/* ── Features ── */
.lp-features {
	padding: 80px 32px;
	background: rgba(255,255,255,.015);
	border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
html[data-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(37,99,235,.12);
}
.lp-feat-icon {
	width: 48px; height: 48px; border-radius: 12px;
	background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.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; }

/* ── Login section ── */
.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; }

/* ── Footer ── */
.lp-footer {
	border-top: 1px solid var(--border);
	padding: 20px 32px;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; color: var(--muted);
}
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--text); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Pay Page  (.pay-page)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pay-page {
	flex: 1;
	overflow-y: auto;
	background: var(--bg);
	color: var(--text);
}


/* ── Hero ── */
.pay-page .pay-hero {
	background: linear-gradient(135deg, var(--accent) 0%, #1d4ed8 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;
}

/* ── Mock card ── */
.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;
}

/* ── Stats ── */
.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;
}

/* ── Payment method cards ── */
.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); }

/* ── Steps ── */
.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;
}

/* ── Sector cards ── */
.pay-page .pay-industry-card { border-top: 4px solid var(--accent) !important; }

/* ── Code block ── */
.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; }

/* ── Trust bar ── */
.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; }

/* ── Sections background ── */
.pay-page .pay-section-white { background: var(--sidebar); }
.pay-page .pay-section-gray  { background: var(--input-bg); }

/* ── CTA ── */
.pay-page .pay-cta {
	background: linear-gradient(135deg, #1d4ed8 0%, var(--accent) 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;
}

/* ── Bootstrap overrides inside pay-screen ── */
.pay-page .card {
	border: 1px solid var(--border);
	background: var(--sidebar); color: var(--text);
}
.pay-page .text-muted { color: var(--muted) !important; }

/* ── Footer ── */
.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); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   App Admin  (views/apps/admin.html)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.app-chip-icon {
	width: 34px; height: 34px; border-radius: 8px;
	background: var(--accent);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; color: #fff; 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; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Utilidades globales
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.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(37,99,235,.15); color: var(--accent); border-radius: .35rem; padding: 2px 8px; font-size: .8rem; font-weight: 600; }
.badge-accent-xs    { background: rgba(37,99,235,.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; }

/* ── Theme selector buttons (user menu header) ─────────────────────────────── */
.user-menu-theme-btns { display:flex; gap:4px; padding:4px 12px 8px; }
.user-menu-theme-btn {
	flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
	padding:6px 4px; border:1px solid var(--border); border-radius:8px;
	background:transparent; color:var(--muted); font-size:.7rem;
	cursor:pointer; transition:background .15s,color .15s,border-color .15s;
}
.user-menu-theme-btn:hover { background:var(--sidebar-hover); color:var(--text); }
.user-menu-theme-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.user-menu-theme-btn i { font-size:.85rem; }

/* ── Root Hub ── */
.page-root-hub {
	padding: 32px 28px;
	max-width: 900px;
}
.root-hub-header {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 4px; margin-bottom: 32px;
}
.root-hub-logo {
	width: 48px; height: 48px; border-radius: 12px;
	background: linear-gradient(135deg, var(--accent), var(--accent2));
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 22px; margin-bottom: 8px;
}
.root-hub-title {
	font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -.4px;
}
.root-hub-sub {
	font-size: .875rem; color: var(--muted);
}
.root-hub-section-label {
	font-size: .7rem; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--muted);
	margin-bottom: 10px; margin-top: 8px;
}
.root-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
}
.root-hub-card {
	display: flex; flex-direction: column; align-items: center;
	gap: 10px; padding: 20px 12px; border-radius: 10px;
	border: 1px solid var(--border); background: var(--card);
	color: var(--text); text-decoration: none;
	font-size: .8rem; font-weight: 500; text-align: center;
	transition: background .15s, border-color .15s, transform .1s, color .15s;
	cursor: pointer;
}
.root-hub-card i {
	font-size: 1.4rem; color: var(--accent);
	transition: color .15s;
}
.root-hub-card:hover {
	background: var(--sidebar-hover);
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
}
.root-hub-card:hover i { color: var(--accent); }

/* ── Menú lateral dinámico ── */
.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;
	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 ── */
.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 area ── */
.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;
}

/* ── Utilidades de color/tipografía (variables CSS) ── */
.text-muted-var    { color: var(--muted); }
.text-accent-var   { color: var(--accent); }
.text-border-var   { color: var(--border); }
.bg-accent-var     { background: var(--accent); }
.bg-sidebar-var    { background: var(--sidebar); }
.text-muted-sm     { color: var(--muted); font-size: .85rem; }
.text-muted-xs     { color: var(--muted); font-size: .75rem; }
.text-mono-muted   { color: var(--muted); font-size: 11px; font-family: monospace; }
.text-xs           { font-size: .65rem; }