*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
/* ── 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 — Bootstrap 5.3 aporta tema claro/oscuro vía data-bs-theme.
Aquí se sobrescriben los tokens de Bootstrap necesarios y se exponen alias
internos (--bg, --text, --muted, --border, --accent, --input-bg) para no
romper las reglas heredadas.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-bs-theme="dark"] {
--bs-body-bg: #000000;
--bs-body-color: #e9edef;
--bs-secondary-color: #b0bec5;
--bs-border-color: #1f2c33;
--bs-tertiary-bg: #0d1418;
--bs-primary: #2563eb;
--bs-primary-rgb: 37,99,235;
--accent2: #60a5fa;
--sidebar: #000000;
--sidebar-hover: #0d1418;
--header: #000000;
/* Elevar superficies sobre el fondo negro */
--bs-card-bg: #0d1418;
--bs-modal-bg: #0d1418;
--bs-list-group-bg: #0d1418;
--card: #0d1418;
--surface: #111c22;
--hover: #162028;
}
[data-bs-theme="dark"] .table-light {
--bs-table-bg: #0d1418;
--bs-table-striped-bg: #111c22;
--bs-table-hover-bg: #162028;
--bs-table-color: #e9edef;
--bs-table-border-color: #1f2c33;
}
[data-bs-theme="light"] {
--bs-body-bg: #f1f5f9;
--bs-body-color: #0f172a;
--bs-secondary-color: #374151;
--bs-border-color: #d1d9e0;
--bs-tertiary-bg: #f8fafc;
--bs-primary: #2563eb;
--bs-primary-rgb: 37,99,235;
--accent2: #60a5fa;
--sidebar: #ffffff;
--sidebar-hover: #e8edf3;
--header: #ffffff;
--card: #ffffff;
--surface: #f8fafc;
--hover: #e8edf3;
}
/* Superficies (cards/list-group/tablas): Bootstrap declara su bg dentro del propio
selector (--bs-card-bg en .card, etc.) apuntando a --bs-body-bg, y esa declaración
le gana a la heredada del tema — hay que re-declararlas al mismo nivel.
Claro: blancas sobre el body gris. Oscuro: superficie elevada sobre el fondo negro. */
[data-bs-theme="light"] .card { --bs-card-bg: #ffffff; }
[data-bs-theme="light"] .list-group { --bs-list-group-bg: #ffffff; }
[data-bs-theme="light"] .table { --bs-table-bg: #ffffff; }
[data-bs-theme="dark"] .card { --bs-card-bg: #0d1418; }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: #0d1418; }
[data-bs-theme="light"] .offcanvas { --bs-offcanvas-bg: #ffffff; }
[data-bs-theme="dark"] .offcanvas { --bs-offcanvas-bg: #0d1418; }
/* Alias retro-compatibles con el resto del archivo */
[data-bs-theme] {
--bg: var(--bs-body-bg);
--text: var(--bs-body-color);
--muted: var(--bs-secondary-color);
--border: var(--bs-border-color);
--accent: var(--bs-primary);
--accent-rgb: var(--bs-primary-rgb);
--input-bg: var(--bs-tertiary-bg);
}
/* Scrollbars globales */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bs-body-bg); }
::-webkit-scrollbar-thumb { background: var(--bs-border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--sidebar-hover); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NIP overlay
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.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;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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;
transition: background-color .3s ease, border-color .3s ease;
}
/* ── Header fusionado con el hero de las landings ──────────────────────────
En las landings de solución (pay, escolares, parking, …) el header se pinta
del color de la solución mientras el scroll está arriba, para que header y
hero se vean como una sola banda. Al bajar (se quita .hero-at-top) el header
vuelve al blanco/original. El color (--hero-solid) lo fija dhHeroHeader
leyéndolo del propio hero, así cada solución usa su color. */
body.hero-merge.hero-at-top header {
background-color: var(--hero-solid, #5E17EB);
border-bottom-color: transparent;
box-shadow: none; /* mata la línea de [data-bs-theme=light] header */
}
/* Logo y controles en blanco mientras está fusionado */
body.hero-merge.hero-at-top .header-logo { filter: brightness(0) invert(1); }
body.hero-merge.hero-at-top header .header-brand,
body.hero-merge.hero-at-top header .header-ctx-btn,
body.hero-merge.hero-at-top header .header-ctx-label,
body.hero-merge.hero-at-top header .header-ctx-sep,
body.hero-merge.hero-at-top header .header-icon-btn,
body.hero-merge.hero-at-top header .notif-btn,
body.hero-merge.hero-at-top header .header-ctx-verified,
body.hero-merge.hero-at-top header .header-user-arrow,
body.hero-merge.hero-at-top header .header-search-label { color: #fff; }
/* El pill "Ctrl+K" conserva fondo claro; sobre el hero azul necesita texto
oscuro (si se pintaba de blanco quedaba ilegible: blanco sobre gris claro). */
body.hero-merge.hero-at-top header .header-search-kbd {
background: rgba(255,255,255,.9); color: #1a1a1a;
}
/* Botones de acción (buscar, ayuda, apps, notificaciones): mismo fondo y borde
blanco translúcido sobre el color del hero — antes la campana quedaba con borde
oscuro y el grid sin relleno, viéndose disparejos. */
body.hero-merge.hero-at-top header .header-search-btn,
body.hero-merge.hero-at-top header .header-help-btn,
body.hero-merge.hero-at-top header .header-icon-btn,
body.hero-merge.hero-at-top header .notif-btn {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.35);
color: #fff; box-shadow: none; animation: none;
}
body.hero-merge.hero-at-top header .header-search-btn i,
body.hero-merge.hero-at-top header .header-help-btn i,
body.hero-merge.hero-at-top header .header-icon-btn i,
body.hero-merge.hero-at-top header .notif-btn i { color: #fff; }
/* Hover unificado (incluye el selector de org/app) */
body.hero-merge.hero-at-top header .header-search-btn:hover,
body.hero-merge.hero-at-top header .header-help-btn:hover,
body.hero-merge.hero-at-top header .header-icon-btn:hover,
body.hero-merge.hero-at-top header .header-icon-btn.active,
body.hero-merge.hero-at-top header .notif-btn:hover,
body.hero-merge.hero-at-top header .header-ctx-btn:hover {
background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.7); color: #fff;
}
/* Selector de org/app: mismo cristal translúcido que los botones de la derecha */
body.hero-merge.hero-at-top header .header-ctx-btn {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.35);
color: #fff; box-shadow: none;
}
/* Botón "Iniciar sesión" con contorno blanco sobre el color */
body.hero-merge.hero-at-top header .btn-outline-primary {
color: #fff; border-color: rgba(255,255,255,.65);
}
body.hero-merge.hero-at-top header .btn-outline-primary:hover {
background: #fff; color: var(--accent); border-color: #fff;
}
.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-logo { height: 36px; max-width: 140px; object-fit: contain; }
[data-bs-theme="dark"] .header-logo { filter: brightness(0) invert(1); }
.header-title { font-size: 14px; color: var(--muted); margin-left: 4px; }
.header-spacer { flex: 1; }
.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; justify-content: center; height: 34px; transition: all .15s;
}
.header-icon-btn:hover, .header-icon-btn.active { border-color: var(--accent); color: var(--accent); }
/* ── Botón Centro de Ayuda (lanzador del widget): azul, icono blanco y latido ── */
.header-help-btn {
background: linear-gradient(135deg, var(--accent), #1d4ed8);
border-color: transparent; color: #fff;
position: relative;
box-shadow: 0 2px 8px rgba(var(--accent-rgb), .45);
animation: header-help-pulse 2s ease-in-out infinite;
}
.header-help-btn:hover, .header-help-btn.active {
border-color: transparent; color: #fff;
}
/* Latido: halo azul que se expande y desvanece (conserva la sombra base) */
@keyframes header-help-pulse {
0% { box-shadow: 0 2px 8px rgba(var(--accent-rgb), .45), 0 0 0 0 rgba(var(--accent-rgb), .55); }
70%, 100% { box-shadow: 0 2px 8px rgba(var(--accent-rgb), .45), 0 0 0 6px rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
.header-help-btn { animation: none; }
}
/* ── Header ctx (org + app selectors) ── */
.header-ctx { display: flex; align-items: center; gap: 6px; }
.header-ctx-sep { display: none; }
.header-ctx-btn {
display: flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border); cursor: pointer;
color: var(--muted); padding: 6px 10px; border-radius: 6px;
font-size: 14px; height: 34px; transition: all .15s; max-width: 150px; white-space: nowrap;
}
.header-ctx-btn:hover { border-color: var(--accent); color: var(--accent); }
.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-verified { color: #3b82f6; font-size: .72rem; flex-shrink: 0; }
.header-ctx-app-wrap { position: relative; }
.ctx-app-dot--xs {
width: 26px; height: 26px; 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: contain; }
/* ── 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-arrow {
font-size: 10px; color: var(--muted); transition: transform .2s; flex-shrink: 0;
}
.header-user-arrow.up { transform: rotate(180deg); }
.avatar--sm {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.avatar--sm.avatar--verified {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.user-menu--header {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.25);
min-width: 272px; z-index: 1100; overflow: hidden; padding: 6px;
}
.user-menu-profile {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px 10px;
}
.user-menu-profile-avatar {
width: 42px !important; height: 42px !important; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden;
}
.user-menu-profile-avatar.avatar--verified {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.user-menu-profile-info { min-width: 0; }
.user-menu-profile-name {
font-size: 13.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: 5px;
}
.user-menu-profile-verified { font-size: 11px; color: #22c55e; flex-shrink: 0; }
.user-menu-profile-username { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-profile-email { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-profile-avatar--hero { width: 80px !important; height: 80px !important; font-size: 34px !important; margin-bottom: 10px; }
.user-menu-profile-hero { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 16px; gap: 3px; }
.user-menu-hero-name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; }
.user-menu-hero-sub { font-size: 12px; color: var(--muted); }
/* 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 ── */
/* 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; justify-content: center; gap: 4px; height: 34px; 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-count-label { font-size: 11px; color: var(--accent); font-weight: 500; }
.notif-oc-body { display: flex !important; flex-direction: column; }
.notif-oc-scroll { flex: 1; overflow-y: auto; min-height: 0; }
/* ── Pestañas del offcanvas (Alertas / Notificaciones) ── */
.notif-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notif-tab {
flex: 1; background: none; border: none; cursor: pointer;
padding: 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
border-bottom: 2px solid transparent;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: color .12s, border-color .12s;
}
.notif-tab:hover { color: var(--text); }
.notif-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.notif-tab-badge {
background: var(--border); color: var(--text);
font-size: 10px; font-weight: 700; border-radius: 999px;
min-width: 16px; height: 16px; padding: 0 5px;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-tab.active .notif-tab-badge { background: var(--accent); color: #fff; }
/* ── Centro de alertas del sistema ── */
.alert-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
text-decoration: none; cursor: pointer; transition: background .12s;
border-left: 3px solid transparent;
}
.alert-item:last-child { border-bottom: none; }
.alert-item:hover { background: var(--sidebar-hover); }
.alert-item-icon {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 13px;
background: var(--border); color: var(--muted);
}
.alert-item-body { flex: 1; min-width: 0; }
.alert-item-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.alert-item-msg {
font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alert-item-arrow { flex-shrink: 0; color: var(--muted); font-size: 11px; opacity: .6; }
/* Severidades */
.alert-item--info { border-left-color: #3b82f6; }
.alert-item--info .alert-item-icon { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #2563eb; }
.alert-item--warn { border-left-color: #f59e0b; }
.alert-item--warn .alert-item-icon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.alert-item--urgent { border-left-color: #ef4444; }
.alert-item--urgent .alert-item-icon { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
/* Push banner */
.push-banner {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
font-size: 12.5px;
}
.push-banner--loading,
.push-banner--unsupported {
justify-content: center; color: var(--muted); font-size: 11px; padding: 8px 14px;
}
.push-banner-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.push-banner-body { flex: 1; min-width: 0; }
.push-banner-title { font-weight: 600; color: var(--text); font-size: 12.5px; line-height: 1.3; }
.push-banner-sub { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* Inactive */
.push-banner--inactive { background: color-mix(in srgb, #f59e0b 7%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--inactive { background: color-mix(in srgb, #f59e0b 9%, #000); }
.push-banner--inactive .push-banner-icon { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.push-banner-activate {
flex-shrink: 0; background: none; border: none; cursor: pointer;
color: var(--accent); font-weight: 700; font-size: 12.5px; padding: 0;
}
.push-banner-activate:hover { text-decoration: underline; }
.push-banner-activate[disabled] { opacity: .55; cursor: default; }
/* iOS */
.push-banner--ios { background: color-mix(in srgb, #3b82f6 7%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--ios { background: color-mix(in srgb, #3b82f6 9%, #000); }
.push-banner--ios .push-banner-icon { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #2563eb; }
/* Active */
.push-banner--active {
background: color-mix(in srgb, #22c55e 6%, var(--bs-body-bg)); padding: 8px 14px;
}
[data-bs-theme="dark"] .push-banner--active { background: color-mix(in srgb, #22c55e 8%, #000); }
.push-banner-active-dot {
flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #16a34a;
}
.push-banner-active-icon { color: #16a34a; font-size: 12px; flex-shrink: 0; }
.push-banner-active-label { flex: 1; color: #16a34a; font-weight: 600; font-size: 12px; }
.push-banner-link {
background: none; border: none; cursor: pointer; color: var(--muted);
font-size: 11px; padding: 0; flex-shrink: 0; text-decoration: underline;
}
.push-banner-link:hover { color: var(--text); }
.push-banner-deactivate {
flex-shrink: 0; background: none; border: 1px solid var(--border); cursor: pointer;
color: var(--muted); font-size: 11px; padding: 2px 9px; border-radius: 4px;
}
.push-banner-deactivate:hover { border-color: #ef4444; color: #ef4444; }
.push-banner-deactivate[disabled] { opacity: .55; cursor: default; }
/* Denied */
.push-banner--denied { background: color-mix(in srgb, #ef4444 6%, var(--bs-body-bg)); }
[data-bs-theme="dark"] .push-banner--denied { background: color-mix(in srgb, #ef4444 8%, #000); }
.push-banner--denied .push-banner-icon { background: color-mix(in srgb, #ef4444 16%, transparent); color: #dc2626; }
/* Lista */
.notif-list { overflow-y: auto; }
.notif-item {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border);
cursor: pointer; transition: background .12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--sidebar-hover); }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-msg {
font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* 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; left: auto;
width: 300px; background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
z-index: 1000; overflow-y: auto; max-height: min(420px, calc(100dvh - 90px));
padding-bottom: 8px; display: flex; flex-direction: column;
}
/* Lanzador de soluciones · modal centrado (estilo amel-IA) */
.soluciones-overlay {
position: fixed; inset: 0; z-index: 9990;
background: rgba(0,0,0,.45);
display: flex; align-items: flex-start; justify-content: center;
padding: 72px 16px 24px;
animation: agente-fade-in .12s ease;
}
.soluciones-modal {
width: 100%; max-width: 680px;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.28);
display: flex; flex-direction: column;
max-height: calc(100dvh - 96px); overflow: hidden;
animation: agente-slide-in .14s ease;
}
.soluciones-modal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.soluciones-modal-title {
display: flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 15px; color: var(--text);
}
.soluciones-modal-body { overflow-y: auto; padding: 6px 8px 12px; }
/* Footer FIJO del lanzador: no scrollea con la lista (flex-shrink:0), pegado al pie. */
.soluciones-modal-footer {
flex-shrink: 0; border-top: 1px solid var(--border);
padding: 10px 14px; text-align: center; background: var(--sidebar);
}
.soluciones-tabs {
display: flex; gap: 2px; padding: 8px 14px 0; flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.soluciones-tab {
background: none; border: none; cursor: pointer; margin-bottom: -1px;
padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--muted);
border-bottom: 2px solid transparent; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
transition: color .12s, border-color .12s;
}
.soluciones-tab:hover { color: var(--text); }
.soluciones-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 575.98px) {
.soluciones-overlay { padding: 16px 10px; align-items: center; }
.soluciones-modal { max-height: calc(100dvh - 32px); }
}
.soluciones-item {
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 12px 6px 10px; text-decoration: none;
border-radius: 10px; transition: background .12s;
}
.soluciones-item:hover { background: var(--sidebar-hover); }
/* Nombre uniforme: recorta a 1 línea con ellipsis para igualar altura de tiles */
.sol-item-name {
width: 100%; text-align: center; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soluciones-item-icon {
width: 52px; height: 52px; border-radius: 14px; background: #5E17EB;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 22px; flex-shrink: 0;
}
/* Logo real de la app en el lanzador: se muestra completo sobre blanco (sin recortar). */
.soluciones-item-logo { background: #fff; object-fit: contain; padding: 4px; }
/* Editor rico de planes/capacidades/matriz (panel Planes en /dev/admin/apps) */
.rp-muted { color: var(--bs-secondary-color, #6c757d); }
.rp-tabs { margin: 0; border-bottom: 0; }
.rp-tabs .nav-link { cursor: pointer; padding: .4rem .8rem; font-size: .85rem; }
.rp-rangos td { vertical-align: middle; }
.rp-matriz { overflow-x: auto; }
.rp-matriz th.feat { text-align: left; min-width: 220px; }
.rp-matriz td { text-align: center; vertical-align: middle; }
.rp-limite { width: 84px; display: inline-block; }
.rp-editor { border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .6rem; padding: 16px; margin-top: 14px; background: var(--bs-card-bg, #fff); }
.sol-item-wrap {
position: relative; border-radius: 10px;
}
.sol-fav-btn {
position: absolute; top: 3px; right: 3px;
width: 18px; height: 18px; border: none; background: none; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s; cursor: pointer;
font-size: 10px; color: #adb5bd; border-radius: 4px; z-index: 1;
}
.sol-item-wrap:hover .sol-fav-btn { opacity: 1; }
.sol-fav-btn.sol-fav-active { opacity: 1 !important; color: #f59e0b; }
.sol-fav-btn:hover { background: rgba(0,0,0,.08); color: #f59e0b; }
.sol-dragging { opacity: .35; }
.sol-dragover .soluciones-item { outline: 2px dashed var(--bs-primary, #0d6efd); outline-offset: -2px; }
/* Contenedor relativo del icono del tile para colgar el puntito "por pagar"
pegado a su esquina (robusto a cualquier tamaño de icono). */
.sol-ic { position: relative; display: inline-flex; }
/* Puntito "por pagar" en la esquina sup. derecha del ICONO (no de la celda, para
que se lea claramente de qué tile es). El anillo usa el fondo del modal. */
.sol-pordot {
position: absolute; top: -5px; right: -5px; z-index: 3;
width: 18px; height: 18px; border-radius: 999px;
background: #ef4444; box-shadow: 0 0 0 2px var(--sidebar);
pointer-events: none;
display: flex; align-items: center; justify-content: center;
animation: sol-pordot-pulse 1.8s ease-in-out infinite;
}
.sol-pordot::after {
content: '!'; color: #fff; font-weight: 800; font-size: 12px; line-height: 1;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@keyframes sol-pordot-pulse {
0%, 100% { box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 4px rgba(239,68,68,0); }
50% { box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 6px rgba(239,68,68,.30); }
}
@media (prefers-reduced-motion: reduce) { .sol-pordot, .sol-launcher-dot { animation: none; } }
/* Puntito "por pagar" sobre el icono lanzador (9 puntos) del header. */
.sol-launcher-dot {
position: absolute; top: 0; right: 0; z-index: 3;
width: 10px; height: 10px; border-radius: 999px;
background: #ef4444; box-shadow: 0 0 0 2px var(--header);
pointer-events: none;
animation: sol-pordot-pulse 1.8s ease-in-out infinite;
}
/* Aviso de pago (interstitial): por encima del lanzador y más angosto. */
.pago-aviso-overlay { z-index: 9996; }
.pago-aviso-modal { max-width: 440px; }
.notif-footer a:hover { text-decoration: underline; }
/* Toolbar de selección */
.notif-toolbar {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 10px 5px 14px; border-bottom: 1px solid var(--border);
gap: 6px; min-height: 36px;
}
.notif-toolbar-left { display: flex; align-items: center; gap: 5px; }
.notif-toolbar-right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.notif-toolbar-btn {
background: none; border: 1px solid transparent; cursor: pointer;
color: var(--muted); padding: 3px 7px; border-radius: 5px;
font-size: 11.5px; display: flex; align-items: center; gap: 4px;
transition: all .13s; white-space: nowrap; line-height: 1.4;
}
.notif-toolbar-btn:hover:not([disabled]) { border-color: var(--border); color: var(--text); background: var(--sidebar-hover); }
.notif-toolbar-btn[disabled] { opacity: .4; cursor: default; }
.notif-toolbar-btn--danger { color: #ef4444; }
.notif-toolbar-btn--danger:hover:not([disabled]) { border-color: #ef4444; background: color-mix(in srgb, #ef4444 8%, transparent); color: #ef4444; }
.notif-toolbar-btn--check { padding: 3px 5px; }
.notif-toolbar-count { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.notif-toolbar-confirm-txt { font-size: 11.5px; color: var(--text); font-weight: 500; }
/* Item seleccionado */
.notif-item.selected { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.notif-item-check {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 18px; color: var(--muted); font-size: 13px; padding-top: 1px;
}
.notif-item.selected .notif-item-check { color: var(--accent); }
.layout { display: flex; flex: 1; overflow: hidden; }
/* ── 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; }
aside.collapsed .sidebar-toggle-wrap .toggle-btn span { display: none; }
.sidebar-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-toggle-wrap { padding: 4px 0 2px; }
.sidebar-toggle-wrap .toggle-btn {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 10px 16px; border-radius: 8px; margin: 2px 8px;
font-size: 14px; color: var(--muted); white-space: nowrap;
box-sizing: border-box; width: calc(100% - 16px);
}
.sidebar-toggle-wrap .toggle-btn i { flex-shrink: 0; width: 16px; text-align: center; font-size: 14px; }
aside.collapsed .sidebar-toggle-wrap .toggle-btn { justify-content: center; padding: 10px 0; margin: 2px 6px; width: calc(100% - 12px); }
.nav-section { padding: 16px 12px 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
nav a {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; text-decoration: none; color: var(--muted);
font-size: 14px; border-radius: 8px; margin: 2px 8px;
transition: background .15s, color .15s; white-space: nowrap;
}
nav a:hover { background: var(--sidebar-hover); color: var(--text); }
nav a.active { background: rgba(var(--accent-rgb),.12); color: var(--accent); }
nav a svg, nav a i { flex-shrink: 0; width: 16px; text-align: center; font-size: 14px; }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; position: relative; }
/* User menu (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-menu-session-note { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
.user-menu-session-note i { font-size: 10px; flex-shrink: 0; }
.user-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; overflow-y: auto; }
[ng-view] main { overflow-y: auto; }
.view-padded { overflow-y: auto; padding: 1.5rem; }
.view-iframe { overflow: hidden; }
.view-iframe iframe { flex: 1; border: none; background: #fff; width: 100%; height: 100%; display: block; }
/* ── Welcome ── */
.welcome-screen {
flex: 1; background: var(--bg);
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px; color: var(--muted);
height: 100%; overflow: hidden;
}
.welcome-screen svg { opacity: .55; }
.welcome-screen .welcome-icon { opacity: .7; margin-bottom: 20px; }
.welcome-screen h2 { font-size: 20px; color: var(--text); }
.welcome-screen p { font-size: 14px; }
.welcome-search { width: 100%; max-width: 520px; margin-top: 8px; position: relative; z-index: 1; }
.welcome-search-box {
display: flex; align-items: center; gap: 10px;
background: var(--input-bg); border: 1.5px solid var(--border);
border-radius: 12px; padding: 10px 16px; transition: border-color .2s, box-shadow .2s;
}
.welcome-search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.welcome-search-box > i { color: var(--muted); font-size: 15px; flex-shrink: 0; }
.welcome-search-box input {
flex: 1; background: none; border: none; outline: none;
color: var(--text); font-size: 15px; min-width: 0;
}
.welcome-search-box button {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff; border: none; border-radius: 8px;
padding: 6px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
flex-shrink: 0; transition: opacity .15s, box-shadow .15s;
}
.welcome-search-box button:hover { opacity: .9; box-shadow: 0 2px 10px rgba(124,58,237,.35); }
.welcome-search-box button:disabled { opacity: .45; box-shadow: none; }
.amelia-btn-label { display: flex; align-items: center; gap: 1px; letter-spacing: .01em; }
.amelia-btn-a { font-style: italic; font-weight: 800; }
/* Badge morado Amel-IA — header y welcome */
.header-amelia-badge, .welcome-amelia-badge {
display: inline-flex; align-items: center; gap: 1px;
background: linear-gradient(135deg,#7c3aed,#a855f7);
color: #fff; border-radius: 999px;
padding: 2px 10px; font-size: 12px; font-weight: 600;
letter-spacing: .01em; flex-shrink: 0; white-space: nowrap;
}
/* Pulso en el badge Amel-IA del header para que se note */
.header-amelia-badge { animation: header-amelia-pulse 2s ease-in-out infinite; }
@keyframes header-amelia-pulse {
0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55); }
70%, 100% { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0); }
}
@media (prefers-reduced-motion: reduce) {
.header-amelia-badge { animation: none; }
}
@media (max-width: 700px) {
.header-amelia-badge { display: none; }
}
/* ── Días festivos próximos ── */
.festivos-proximos { width: 100%; max-width: 520px; position: relative; z-index: 1; }
.festivos-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.festivos-list { display: flex; flex-direction: column; gap: 6px; }
.festivo-chip {
display: flex; align-items: center; gap: 10px;
background: rgba(var(--accent-rgb), .07);
border: 1px solid rgba(var(--accent-rgb), .18);
border-radius: 10px; padding: 8px 14px; font-size: 13px;
text-decoration: none;
}
.festivo-chip-days {
background: var(--accent); color: #fff; border-radius: 6px;
padding: 2px 9px; font-size: 11px; font-weight: 600;
flex-shrink: 0; white-space: nowrap;
}
.festivo-chip-days--hoy { background: #ef4444; }
.festivo-chip-name { flex: 1; color: var(--text); font-weight: 500; min-width: 0; }
.festivo-chip-date { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.festivo-chip-hora { font-weight: 600; color: var(--text); }
.festivo-chip-cuenta {
display: inline-flex; align-items: center; gap: 5px;
background: #ef4444; color: #fff; border-radius: 6px;
padding: 2px 9px; font-size: 11px; font-weight: 600;
flex-shrink: 0; white-space: nowrap;
font-variant-numeric: tabular-nums;
animation: festivoCuentaPulse 1.8s ease-in-out infinite;
}
.festivo-chip-cuenta i { font-size: 10px; }
.festivo-chip-cuenta--curso { background: #16a34a; animation: none; }
@keyframes festivoCuentaPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.festivo-chip--link { cursor: pointer; transition: border-color .15s, box-shadow .15s; text-decoration: none; }
.festivo-chip--link:hover { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .1); text-decoration: none; }
.festivo-chip-icon { color: var(--muted); font-size: 11px; flex-shrink: 0; }
/* ── Shell gate (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); }
.usr-badge-info { background: rgba(13,202,240,.15); color: #22d3ee; border: 1px solid #0dcaf0; }
/* 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-body .usr-table thead th { position: static; }
.org-body-miembros {
overflow: hidden !important; padding: 0 !important;
display: flex; flex-direction: column; min-height: 0;
}
.org-miembros-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.org-miembros-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.org-miembros-header { flex-shrink: 0; padding: 16px 20px 4px; }
.org-miembros-table-wrap { flex: 1; overflow-y: auto; padding: 0 20px 8px; }
.org-miembros-table-wrap .usr-table thead th { position: sticky; top: 0; }
.org-miembros-footer {
flex-shrink: 0; border-top: 1px solid var(--border);
padding: 8px 20px; display: flex; align-items: center; gap: 10px;
color: var(--muted); font-size: .8rem;
}
.org-settings-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 220px; color: var(--muted); text-align: center;
}
.org-settings-nuevo-header {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 20px; margin-bottom: 8px; text-align: center;
}
.org-settings-section {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 20px 22px; margin-bottom: 20px;
}
.org-settings-section-title {
font-size: .78rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted); margin-bottom: 16px;
}
.org-settings-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.org-settings-field { display: flex; flex-direction: column; gap: 5px; }
.org-settings-field--full { grid-column: 1 / -1; }
.org-settings-field label {
font-size: .76rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em;
}
.org-settings-field input {
padding: 8px 12px; border-radius: 7px;
border: 1px solid var(--border); background: var(--input-bg);
color: var(--text); font-size: .88rem; transition: border-color .15s;
}
.org-settings-field input:focus { outline: none; border-color: var(--accent); }
.org-settings-field .req { color: #ef4444; }
.org-settings-actions {
display: flex; gap: 10px; align-items: center; margin-top: 8px;
}
.org-field-label {
font-size: .76rem; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: .05em;
}
.org-field-label .req { color: #ef4444; }
.org-field-input {
background-color: var(--input-bg) !important; color: var(--text) !important;
border-color: var(--border) !important;
}
.org-field-input:focus { border-color: var(--accent) !important; box-shadow: none !important; }
@media (max-width: 600px) {
.org-settings-grid { grid-template-columns: 1fr; }
.org-settings-field--full { grid-column: 1; }
.org-settings-body { padding: 16px; }
}
/* ── Org member autocomplete ── */
.org-member-search-wrap { position: relative; }
.org-member-dropdown {
position: absolute; top: calc(100% + 3px); left: 0; right: 0;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 8px; z-index: 1060;
max-height: 260px; overflow-y: auto;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.org-member-dropdown-item {
padding: 9px 12px; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background .1s;
}
.org-member-dropdown-item:last-child { border-bottom: none; }
.org-member-dropdown-item:hover { background: var(--sidebar-hover); }
.org-member-dropdown-info { cursor: default; color: var(--muted); }
.org-member-dropdown-info:hover { background: none; }
/* ── Org pagination ── */
.org-pag-btn {
background: var(--sidebar); color: var(--text);
border: 1px solid var(--border); font-size: .78rem;
min-width: 30px; padding: 2px 7px; border-radius: 6px;
}
.org-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.org-pag-btn:disabled { opacity: .4; }
.org-pag-btn--active {
background: rgba(37,99,235,.15) !important;
color: var(--accent) !important;
border-color: rgba(37,99,235,.3) !important;
}
.org-table { width: 100%; border-collapse: collapse; }
.org-table thead th {
background: var(--sidebar); color: var(--muted);
font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
padding: 10px 12px; border-bottom: 1px solid var(--border);
white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.org-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.org-table tbody tr:hover { background: var(--sidebar-hover); }
.org-table tbody td { padding: 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-*)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Layout de 3 columnas fijas: la página no scrollea, cada columna scrollea por dentro */
.ges-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.ges-view .ges-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; }
.ges-view .ges-head { flex-shrink: 0; }
.ges-view .ges-cols { display: flex; gap: 0; flex: 1; min-height: 0; }
.ges-view .ges-col { flex: 1 1 0; min-width: 0; display: flex; }
/* Un solo divisor vertical (full-height) entre cada columna; los paneles no llevan borde */
.ges-view .ges-col:not(:last-child) { border-right: 1px solid var(--border); }
.ges-view .panel {
background: var(--sidebar) !important;
border-radius: 0;
display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0;
}
.ges-view .panel-head { flex-shrink: 0; }
.ges-view .ges-search { flex-shrink: 0; }
.ges-view .ges-scroll { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -.35rem; padding: 0 .35rem; }
/* En pantallas chicas vuelve a apilar y scrollear la página completa */
@media (max-width: 991.98px) {
.ges-view { overflow-y: auto; }
.ges-view .ges-wrap { min-height: 0; flex: 0 0 auto; }
.ges-view .ges-cols { flex-direction: column; flex: 0 0 auto; min-height: 0; }
.ges-view .ges-col { display: block; }
.ges-view .ges-col:not(:last-child) { border-right: none; border-bottom: 1px solid var(--border); }
.ges-view .panel { flex: 0 0 auto; min-height: 0; height: 70vh; }
}
.ges-view .section-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ges-view .list-item { border-bottom: 1px solid var(--border); padding: .55rem .9rem; }
.ges-view .list-item:last-child { border-bottom: none; }
.ges-view .org-item,
.ges-view .escuela-item { cursor: pointer; border-radius: 6px; transition: background .12s; }
.ges-view .org-item:hover { background: var(--sidebar-hover); }
.ges-view .escuela-item:hover { background: var(--sidebar-hover); }
.ges-view .org-item.active { background: rgba(var(--accent-rgb),.12); border-left: 3px solid var(--accent); font-weight: 600; }
.ges-view .escuela-item.active { background: rgba(25,135,84,.12); border-left: 3px solid #198754; font-weight: 600; }
.ges-view .badge-slug { font-size: .7rem; font-weight: 400; color: var(--muted); }
.ges-view .acronimo-badge { font-size: .7rem; background: var(--sidebar-hover); padding: 1px 6px; border-radius: 4px; color: var(--muted); }
.ges-view .empty-state { color: var(--muted); font-size: .82rem; padding: 2rem 1rem; text-align: center; }
.ges-view .empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; }
.ges-view .btn-icon { padding: 1px 5px; font-size: .78rem; line-height: 1.6; }
.ges-view .btn-fmt { font-size: .68rem; padding: 1px 6px; line-height: 1.6; font-family: monospace; }
.ges-view .border-bottom { border-color: var(--border) !important; }
.ges-view .progress { background: var(--border) !important; }
.ges-view #mapa-escuela { height: 320px; border-radius: 6px; border: 1px solid var(--border); }
.ges-view .leaflet-container { background: #000000 !important; }
.ges-view .leaflet-tile-pane { filter: brightness(.85) saturate(.8); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
view-padded (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; position: relative; z-index: 1; }
.welcome-greeting {
font-size: clamp(20px, 3vw, 28px); font-weight: 700;
color: var(--text); margin: 0; letter-spacing: -.01em;
}
.welcome-greeting span { color: var(--accent2); }
.welcome-icon--manana { color: #92400e; }
.welcome-icon--noche { color: #818cf8; }
.welcome-subtitle {
font-size: clamp(16px, 2vw, 19px); font-weight: 500; font-style: italic;
color: var(--accent); margin: 4px 0 0; max-width: 600px; min-height: 1.6em;
text-align: center; line-height: 1.55;
}
.welcome-subtitle .tw-caret {
display: inline-block; margin-left: 2px; font-style: normal; font-weight: 400;
color: var(--accent); animation: tw-blink 1.05s step-end infinite;
}
@keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.welcome-subtitle .tw-caret { animation: none; opacity: .6; }
}
.welcome-hint { font-size: 13px; color: var(--muted); margin: 0; opacity: .8; }
.chat-panel {
position: relative; z-index: 1; flex: 1; width: 100%; max-width: 760px;
margin: 0 auto; display: flex; flex-direction: column;
overflow: hidden; padding-top: 40px;
}
.chat-close-btn {
position: absolute; top: 8px; right: 0; z-index: 1;
background: none; border: none; color: var(--muted);
font-size: 12px; cursor: pointer; padding: 4px 10px;
border-radius: 6px; transition: color .15s, background .15s;
display: flex; align-items: center; gap: 6px;
}
.chat-close-btn:hover { color: var(--text); background: var(--sidebar-hover); }
.chat-messages {
flex: 1; overflow-y: auto; padding: 12px 16px 8px;
display: flex; flex-direction: column; gap: 12px;
}
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; max-width: 70%; }
.chat-msg--ai { align-self: flex-start; }
.chat-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: rgba(var(--accent-rgb),.15); border: 1.5px solid rgba(var(--accent-rgb),.3);
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 12px;
}
.chat-avatar--amelia { background: linear-gradient(135deg,#7c3aed,#a855f7); border-color: #7c3aed; color: #fff; font-weight: 700; font-size: 13px; font-style: italic; }
.chat-msg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chat-nav-routes { display: flex; flex-direction: column; gap: 5px; }
.chat-nav-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 8px; text-decoration: none;
border: 1px solid rgba(124,58,237,.25); background: rgba(124,58,237,.05);
color: #7c3aed; font-size: 12px; cursor: pointer;
transition: background .15s, border-color .15s, box-shadow .15s;
max-width: 100%;
}
.chat-nav-btn:hover { background: rgba(124,58,237,.12); border-color: #7c3aed; box-shadow: 0 1px 6px rgba(124,58,237,.15); text-decoration: none; color: #6d28d9; }
.chat-nav-btn-icon { flex-shrink: 0; font-size: 10px; opacity: .7; }
.chat-nav-btn-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-nav-btn-path { font-family: monospace; font-size: 10px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 8px; }
.chat-avatar-spacer { width: 28px; flex-shrink: 0; }
.chat-msg-actions { display: flex; align-items: center; gap: 6px; }
.chat-msg-body--user { align-items: flex-end; }
.chat-msg-body--user .chat-msg-actions { justify-content: flex-end; }
.chat-copy-btn:disabled { opacity: .35; cursor: default; }
.chat-copy-btn:disabled:hover { color: var(--muted); background: transparent; }
.chat-date-sep {
display: flex; align-items: center; gap: 10px;
margin: 10px 0 6px; color: var(--muted); font-size: 11px;
}
.chat-date-sep::before, .chat-date-sep::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.chat-date-sep span { flex-shrink: 0; padding: 0 2px; }
.amelia-load-older { display: flex; justify-content: center; padding: 2px 0 8px; }
.amelia-hist-loading {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 18px 0; color: var(--muted); font-size: 12.5px;
}
.amelia-load-older-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 16px;
border: 1px solid var(--border); background: var(--sidebar);
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.amelia-load-older-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.amelia-load-older-btn:disabled { opacity: .6; cursor: default; }
.amelia-historial-link {
display: flex; width: fit-content; align-items: center; gap: 8px;
margin: 10px auto 0; padding: 6px 14px; border-radius: 16px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s, border-color .15s;
}
.amelia-historial-link:hover { color: var(--text); border-color: var(--muted); }
.chat-copy-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 12px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 11px; cursor: pointer;
opacity: .65; transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.chat-copy-btn:hover { opacity: 1; color: var(--text); background: var(--sidebar); }
.chat-copy-btn--copied,
.chat-copy-btn--copied:hover { opacity: 1; color: #16a34a; border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.08); }
.chat-bubble {
padding: 10px 14px; border-radius: 16px;
font-size: 13.5px; line-height: 1.6; word-break: break-word;
}
.chat-msg--user .chat-bubble {
background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
.chat-msg--ai .chat-bubble {
background: var(--sidebar); color: var(--text);
border: 1px solid var(--border); border-bottom-left-radius: 4px;
}
.chat-bubble--typing { display: flex; align-items: center; gap: 5px; min-width: 52px; }
.typing-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
animation: typing-bounce .9s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes typing-bounce {
0%,60%,100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-6px); opacity: 1; }
}
.chat-badge {
display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px;
background: rgba(var(--accent-rgb),.1); color: var(--accent);
border: 1px solid rgba(var(--accent-rgb),.25); margin-right: 4px;
vertical-align: middle;
}
.chat-bubble a {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 20px;
background: var(--accent); color: #fff;
font-size: 11px; font-weight: 600; text-decoration: none; line-height: 1.6;
transition: opacity .15s, transform .15s;
vertical-align: middle;
}
.chat-bubble a::after { content: '→'; font-size: 11px; }
.chat-bubble a:hover { opacity: .85; transform: translateY(-1px); }
.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;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tweaks específicos de modo claro (lo demás lo cubre data-bs-theme="light"
y los aliases declarados al inicio).
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-bs-theme="light"] .user-menu { box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
[data-bs-theme="light"] header { box-shadow: 0 1px 0 var(--bs-border-color); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
App switcher & context selectors
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* 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; text-decoration: none;
}
.ctx-item:hover { background: var(--sidebar-hover); }
.ctx-item.active { background: rgba(var(--accent-rgb),.1); }
.ctx-acronimo {
font-size: 9px; background: var(--sidebar-hover); padding: 1px 5px;
border-radius: 3px; color: var(--muted); font-family: monospace;
flex-shrink: 0; text-transform: uppercase;
}
.ctx-item-name { flex: 1; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-item-badge {
font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
background: rgba(var(--accent-rgb),.12); color: var(--accent);
}
.ctx-add {
display: flex; align-items: center; gap: 6px; font-weight: 600;
padding: 6px 12px; cursor: pointer; font-size: 11px; color: var(--accent);
border-top: 1px solid var(--border); transition: background .12s;
}
.ctx-add:hover { background: var(--sidebar-hover); }
.ctx-add i { font-size: 9px; }
.ctx-empty { font-size: 11px; color: var(--muted); padding: 10px 12px; text-align: center; }
.ctx-icon-right { font-size: 9px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
/* ── Org Offcanvas ── */
.org-offcanvas {
width: 380px !important;
background: var(--sidebar) !important;
border-right: 1px solid var(--border) !important;
display: flex; flex-direction: column;
}
.org-offcanvas-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 18px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.org-offcanvas-title {
font-size: .9rem; font-weight: 700; color: var(--text);
}
.org-offcanvas-sub {
font-size: .75rem; color: var(--muted); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.org-offcanvas-close {
background: none; border: none; color: var(--muted); cursor: pointer;
padding: 2px 4px; font-size: 1rem; line-height: 1;
transition: color .15s;
}
.org-offcanvas-close:hover { color: var(--text); }
.org-offcanvas-search {
position: relative; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.org-offcanvas-search .ctx-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
.org-offcanvas-search .ctx-search { padding-left: 28px; padding-right: 28px; width: 100%; }
.org-offcanvas-search .ctx-search-clear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; line-height: 1; color: var(--muted); cursor: pointer; font-size: 12px; }
.org-offcanvas-search .ctx-search-clear:hover { color: var(--text); }
.org-offcanvas-body { flex: 1; overflow-y: auto; }
.org-offcanvas-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 40px 20px; text-align: center; color: var(--muted);
}
.org-offcanvas-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; cursor: pointer; transition: background .12s;
border-bottom: 1px solid var(--border);
}
.org-offcanvas-item:hover { background: var(--sidebar-hover); }
.org-offcanvas-item.active { background: rgba(var(--accent-rgb),.08); }
.org-offcanvas-avatar {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
color: #fff; font-size: .85rem; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
.org-offcanvas-item-info { flex: 1; min-width: 0; }
.org-offcanvas-item-name {
font-size: .82rem; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-offcanvas-item-tag { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.org-verified-badge { color: #3b82f6; font-size: .65rem; flex-shrink: 0; }
.org-offcanvas-check { font-size: .75rem; color: var(--accent); flex-shrink: 0; }
.org-offcanvas-section-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 14px 4px; }
.org-fav-btn { background: none; border: none; padding: 4px; color: var(--border); cursor: pointer; font-size: .75rem; flex-shrink: 0; line-height: 1; transition: color .15s; }
.org-fav-btn:hover, .org-fav-btn--active { color: #f59e0b; }
.org-offcanvas-item:not(:hover) .org-fav-btn:not(.org-fav-btn--active) { opacity: 0; }
.org-offcanvas-item:hover .org-fav-btn { opacity: 1; }
.org-fav-loader { display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
.org-fav-loader-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; animation: orgFavDot .9s ease-in-out infinite; }
.org-fav-loader-dot:nth-child(2) { animation-delay: .15s; }
.org-fav-loader-dot:nth-child(3) { animation-delay: .3s; }
@keyframes orgFavDot { 0%,80%,100% { opacity:.15; transform:scale(.8); } 40% { opacity:.7; transform:scale(1.1); } }
.org-offcanvas-footer {
border-top: 1px solid var(--border); padding: 10px 12px;
display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.org-offcanvas-footer-btn {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border-radius: 8px; text-decoration: none;
font-size: .82rem; font-weight: 600; color: var(--muted);
transition: background .12s, color .12s;
}
.org-offcanvas-footer-btn:hover { background: var(--sidebar-hover); color: var(--text); }
.org-offcanvas-footer-btn--primary {
color: var(--accent);
}
.org-offcanvas-footer-btn--primary:hover {
background: rgba(var(--accent-rgb),.1); color: var(--accent);
}
/* Apps offcanvas items */
.apps-oc-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px; text-decoration: none; color: var(--text);
transition: background .12s; border-bottom: 1px solid transparent;
}
.apps-oc-item:hover { background: var(--sidebar-hover); color: var(--text); }
.apps-oc-item.active { background: rgba(var(--accent-rgb),.08); color: var(--text); }
.apps-oc-item-name { flex: 1; font-size: 13px; line-height: 1.3; }
.apps-oc-check { font-size: .75rem; color: var(--accent); flex-shrink: 0; }
/* 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: 26px; height: 26px; border-radius: 6px; }
.ctx-app-dot--sm img { width: 100%; height: 100%; object-fit: contain; }
.ctx-app-dot--sm span { font-size: 10px; }
/* ── Página /apps ── */
.apps-list-page { display: flex; justify-content: center; align-items: flex-start;
min-height: 100%; padding: 48px 24px; overflow-y: auto; }
.apps-list-inner { width: 100%; max-width: 720px; }
.apps-list-header { text-align: center; margin-bottom: 32px; }
.apps-list-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; }
.apps-list-org { font-size: .875rem; color: var(--text-muted, #888); }
.apps-list-search-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.apps-list-search { width: 100%; max-width: 340px; margin: 0; }
.apps-list-loading { display: flex; justify-content: center; padding: 60px 0; color: var(--text-muted, #888); }
.apps-list-empty { display: flex; flex-direction: column; align-items: center;
padding: 60px 20px; text-align: center; }
.apps-list-empty-icon { width: 56px; height: 56px; border-radius: 16px;
background: var(--sidebar-hover, rgba(255,255,255,.07));
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--text-muted, #888); margin-bottom: 16px; }
.apps-list-empty-title { font-size: 1rem; font-weight: 600; margin: 0 0 4px; }
.apps-list-empty-sub { font-size: .875rem; color: var(--text-muted, #888); margin: 0; }
.apps-list-category { margin-bottom: 32px; }
.apps-list-category-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: #888; margin: 0 0 12px; }
.apps-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.apps-list-card { display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 22px 14px 18px; border-radius: 14px; text-decoration: none; color: inherit;
border: 1px solid var(--border, rgba(255,255,255,.08));
background: var(--sidebar-hover, rgba(255,255,255,.04));
transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; }
.apps-list-card:hover { background: var(--sidebar-active, rgba(255,255,255,.09));
border-color: rgba(255,255,255,.18); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,.18); color: inherit; text-decoration: none; }
.apps-list-card.active { border-color: #3b82f6; background: rgba(59,130,246,.12); }
.apps-list-card-icon { width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center; }
.apps-list-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.apps-list-card-icon span { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.apps-list-card-name { font-size: .8rem; font-weight: 600; text-align: center; line-height: 1.35; color: inherit; }
.apps-list-footer { display: flex; justify-content: center; margin-top: 28px; }
.apps-list-install-btn { display: inline-flex; align-items: center; gap: 7px;
padding: 8px 18px; border-radius: 8px; font-size: .85rem; font-weight: 500;
border: 1px solid var(--border, rgba(255,255,255,.15));
color: var(--text-muted, #888); text-decoration: none;
transition: background .15s, color .15s, border-color .15s; }
.apps-list-install-btn:hover { background: var(--sidebar-hover, rgba(255,255,255,.07));
color: inherit; border-color: rgba(255,255,255,.25); text-decoration: none; }
/* 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 */
[data-bs-theme="light"] .ctx-dropdown { 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 — fondo blanco/oscuro como el sidebar de las soluciones (var(--sidebar)) */
.cta-aside {
width: 260px; flex-shrink: 0;
background: var(--sidebar);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 0 0 16px;
overflow-y: auto;
}
.cta-avatar-wrap { text-align: center; padding: 20px 16px 20px; }
.cta-avatar {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700; color: #fff;
margin: 0 auto 10px; overflow: hidden;
}
.cta-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cta-avatar-name { font-size: 14px; font-weight: 600; color: var(--text); }
.cta-avatar-role { font-size: 12px; margin-top: 2px; }
.cta-avatar-tabs { display: flex; flex-direction: column; }
.cta-tab {
display: flex; align-items: center; gap: 10px;
padding: 10px 20px; background: none; border: none;
cursor: pointer; color: var(--muted); font-size: 13px;
text-align: left; border-left: 3px solid transparent;
text-decoration: none;
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; }
/* ── Sidebar de Mi Cuenta colapsable (solo iconos + tooltips) ──
Mismo comportamiento que el sidebar de las soluciones (.ce-admin), gestionado por
la directiva dhCeSidebar; la preferencia es la global usuarios.sidebar_colapsado.
Reusa la clase .ce-admin-collapse-btn (incluida su media que oculta el botón <1200px). */
.cta-aside { transition: width .2s ease; }
/* Cabecera del sidebar (título "Mi Cuenta" + botón de contraer), como el header de las soluciones */
.cta-aside-hd {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
}
.cta-aside-title { font-weight: 700; font-size: .88rem; flex: 1; color: var(--text); }
.cta-aside.ce-collapsed { width: 62px; }
/* Colapsado: header en columna (logo arriba, botón debajo) — igual que .ce-admin-sidebar-hd */
.cta-aside.ce-collapsed .cta-aside-hd { flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 12px 0 10px; }
.cta-aside.ce-collapsed .cta-aside-title { display: none !important; }
/* el botón trae margin-left:auto (clase base); en columna eso lo descentra → resetear */
.cta-aside.ce-collapsed .ce-admin-collapse-btn { margin: 0; }
.cta-aside.ce-collapsed .cta-avatar-name,
.cta-aside.ce-collapsed .cta-avatar-role { display: none !important; }
.cta-aside.ce-collapsed .cta-avatar { width: 40px; height: 40px; font-size: 16px; }
.cta-aside.ce-collapsed .cta-avatar-wrap { padding: 0 0 12px; }
.cta-aside.ce-collapsed .cta-tab { justify-content: center; padding: 10px 0; }
.cta-aside.ce-collapsed .cta-tab span { display: none !important; }
/* Botones segmentados (tema / fondo) — mismo look que el offcanvas de Apariencia */
.cta-segbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.cta-segbtn {
flex: 1; min-width: 64px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 4px; border: 1px solid var(--border); border-radius: 8px;
background: transparent; color: var(--muted); font-size: .72rem;
cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.cta-segbtn:hover { background: var(--sidebar-hover); color: var(--text); }
.cta-segbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cta-segbtn i { font-size: .9rem; }
/* user-menu link item (Mi cuenta) */
a.user-menu-item { text-decoration: none; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Store (.gp-*)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Shell ── */
.gp-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
/* ── Container ── */
.gp-container { max-width: 1080px; margin: 0 auto; padding: 0 32px; width: 100%; }
/* ── Topbar ── */
.gp-topbar {
flex-shrink: 0; height: 54px;
background: var(--header); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.gp-topbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.gp-topbar-end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 1; }
.gp-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: 999px; border: none;
background: transparent; color: var(--muted);
font-size: 13px; font-weight: 500; cursor: pointer;
transition: background .15s, color .15s; white-space: nowrap;
text-decoration: none;
}
.gp-tab i { font-size: 12px; }
.gp-tab:hover { background: var(--sidebar-hover); color: var(--text); }
.gp-tab.active { background: rgba(var(--accent-rgb),.12); color: var(--accent); font-weight: 600; }
.gp-tab--green.active { background: rgba(34,197,94,.12); color: #22c55e; }
/* ── Dropdown Categorías ── */
.gp-cat-wrap { position: relative; }
.gp-cat-chevron { font-size: 9px !important; margin-left: 2px; transition: transform .2s; }
.gp-cat-chevron.open { transform: rotate(180deg); }
.gp-cat-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 10px; padding: 6px; min-width: 200px;
box-shadow: 0 8px 28px rgba(0,0,0,.25);
}
.gp-cat-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 7px;
color: var(--bs-body-color); text-decoration: none; font-size: 13px;
transition: background .12s; white-space: nowrap;
}
.gp-cat-item:hover { background: var(--sidebar-hover); color: var(--bs-body-color); }
.gp-cat-item i { color: var(--accent); font-size: 12px; width: 14px; text-align: center; }
.gp-cat-overlay { position: fixed; inset: 0; z-index: 199; }
/* ── Buscador ── */
.gp-search-wrap { flex: 0 1 480px; position: relative; }
.gp-search-wrap > i:first-child {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--muted); font-size: 13px; pointer-events: none;
}
.gp-search-clear {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
color: var(--muted); font-size: 12px; cursor: pointer;
transition: color .15s; pointer-events: all !important;
}
.gp-search-clear:hover { color: var(--text); }
.gp-search-wrap input {
width: 100%; padding: 8px 36px;
border-radius: 28px; border: 1px solid var(--border);
background: var(--input-bg); color: var(--text); font-size: 13.5px;
outline: none; transition: border-color .18s, box-shadow .18s;
}
.gp-search-wrap input::placeholder { color: var(--muted); }
.gp-search-wrap input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1);
}
/* ── Main ── */
.gp-main { flex: 1; overflow-y: auto; }
/* ── States ── */
.gp-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 80px 20px; color: var(--muted); font-size: 13px;
}
.gp-empty-icon {
width: 72px; height: 72px; border-radius: 20px;
background: var(--input-bg); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 28px; margin-bottom: 4px;
}
/* ── Results bar ── */
.gp-results-bar { padding: 20px 0 0; }
.gp-results-inner { display: flex; align-items: center; gap: 10px; }
/* ── Blocks (sections) ── */
.gp-block { padding: 28px 0 0; }
.gp-block--first { padding-top: 32px; }
.gp-block > .gp-container { padding-bottom: 32px; }
.gp-block:not(:last-child) > .gp-container { border-bottom: 1px solid var(--border); }
.gp-block:last-child > .gp-container { padding-bottom: 48px; }
.gp-block-hd {
display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.gp-block-title { font-size: 16px; font-weight: 700; color: var(--text); }
.gp-block-sub { font-size: 12px; color: var(--muted); }
.gp-pill {
font-size: 11.5px; color: var(--muted);
background: var(--input-bg); border: 1px solid var(--border);
padding: 2px 9px; border-radius: 999px;
}
/* ── Banner "¿Qué es una app?" ── */
.gp-appinfo {
display: flex; gap: 14px; align-items: flex-start;
background: var(--input-bg); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
}
.gp-appinfo-icon {
flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
background: rgba(var(--accent-rgb), .12); color: var(--accent);
display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.gp-appinfo-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.gp-appinfo-text { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
/* ── Slider row (buttons + scroll area) ── */
.gp-slider-row { display: flex; align-items: center; gap: 6px; }
.gp-slide-btn {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border); background: var(--sidebar);
color: var(--text); font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, border-color .15s, color .15s, opacity .15s;
opacity: .45;
}
.gp-slide-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
.gp-slider {
flex: 1; display: flex; gap: 10px;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
scrollbar-width: none; -ms-overflow-style: none;
padding: 4px 2px 10px;
}
.gp-slider::-webkit-scrollbar { display: none; }
/* Cuadrícula (vista filtrada por categoría / desarrollador): todas las apps, sin carrusel */
.gp-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
gap: 10px 6px;
padding: 4px 2px 10px;
}
.gp-grid .gp-card { width: auto; flex-shrink: 1; }
/* Lista tipo App Store (vista de desarrollador): icono grande + título / desarrollador / rating */
.gp-listgrid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px 24px;
padding: 8px 2px 10px;
}
.gp-listcard {
display: flex; align-items: center; gap: 14px;
padding: 6px; border-radius: 12px;
text-decoration: none; color: inherit;
transition: background .15s;
}
.gp-listcard:hover { background: var(--sidebar-hover); }
.gp-listcard-info { min-width: 0; flex: 1; }
.gp-listcard-name {
display: flex; align-items: center; gap: 5px;
font-size: 14px; font-weight: 600; color: var(--text);
}
.gp-listcard-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-listcard-name i { flex-shrink: 0; }
.gp-listcard-rating {
display: flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--muted); margin-top: 1px;
}
.gp-listcard-rating i { font-size: 11px; }
.gp-listcard-rating .fa-star { color: #f59e0b; }
.gp-listcard-meta {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--muted); margin-top: 3px;
}
.gp-listcard-meta i { color: #f59e0b; font-size: 10px; }
/* Logos de apps en la tienda: esquinas suaves + elevación Material (sin borde) */
.gp-wrap dh-app-logo { border: 0; }
/* Sombra/elevación SOLO cuando es inicial+color (sin logo). Con logo real no lleva
sombra porque el fondo es transparente y se vería mal alrededor. */
.gp-wrap dh-app-logo.dh-logo-ini {
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
/* ── Card plana del ecosistema tienda (reutilizable) ─────────────────────────────
Mismo lenguaje que las .gp-listcard de /tienda/apps: superficie var(--card), borde
sutil var(--border) y radio 12px EN VEZ de sombra (el shadow-sm de Bootstrap no se
adapta al modo oscuro). Úsala junto a .card / .table-responsive donde antes había
`border-0 shadow-sm`. El modificador --hover añade realce al pasar el cursor (para
tarjetas clicables). Usada en /tienda/catalogo y /tienda/apps/suscripciones. */
.gp-flatcard {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
}
.gp-flatcard--hover { transition: background .15s, border-color .15s; }
.gp-flatcard--hover:hover { background: var(--sidebar-hover); border-color: var(--accent); }
/* ── Estándar global de card plana ─────────────────────────────────────────────
Toda la app usa .card.shadow-sm de Bootstrap en decenas de paneles (KPIs,
dashboards, listas). Aquí se neutraliza en UN solo lugar para un look plano y
consistente (borde + sin sombra, como .gp-flatcard). La elevación real —cards
de login (.shadow-lg), dropdowns, modales, popovers y mockups— NO es
.card.shadow-sm, así que no se toca. Excepción puntual: si una card necesita
flotar, usa .shadow / .shadow-lg explícito (gana por no ser -sm). */
.card.shadow-sm, .card.shadow { box-shadow: none !important; }
.card.border-0.shadow-sm, .card.border-0.shadow { border: 1px solid var(--border) !important; }
/* ── Ficha de app (detalle) ── */
.ap-hero {
display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
background: var(--bs-card-bg, #fff);
border: 1px solid var(--border); border-radius: 16px;
padding: 24px; margin-bottom: 18px;
}
.ap-hero-main { flex: 1 1 260px; min-width: 220px; }
/* Logo/ícono de la solución en el hero (equivalente al logo de la app) */
.sol-hero-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 104px; height: 104px; border-radius: 12px; flex-shrink: 0;
color: #fff; font-size: 44px;
}
.ap-title {
font-size: 22px; font-weight: 700; margin: 0;
color: var(--bs-body-color, var(--text));
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ap-dev { font-size: 13.5px; margin-top: 4px; }
.ap-dev a { text-decoration: none; font-weight: 600; color: var(--accent); }
.ap-metrics { display: flex; gap: 32px; margin-top: 18px; flex-wrap: wrap; }
.ap-metric-val {
font-size: 18px; font-weight: 700; line-height: 1.1;
color: var(--bs-body-color, var(--text));
display: flex; align-items: center; gap: 5px;
}
.ap-metric-lbl { font-size: 11px; color: var(--muted); margin-top: 3px; }
.ap-install {
flex: 0 0 300px;
align-self: center;
background: var(--bs-tertiary-bg, var(--input-bg));
border: 1px solid var(--border); border-radius: 14px;
padding: 14px 18px; text-align: center;
}
/* Botones del panel: más altos, redondeados y con peso (no el enlace simple) */
.ap-install .btn:not(.btn-link) {
font-weight: 600;
padding-top: 10px; padding-bottom: 10px;
border-radius: 10px;
}
/* Icono grande del modal de mensajes/info */
.ap-info-modal-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 12px; }
/* Estado "instalada" como pastilla, no como texto suelto */
.ap-installed-status {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 13.5px; font-weight: 600;
color: var(--bs-success-text-emphasis, #0f5132);
background: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
border-radius: 10px; padding: 8px 12px; margin-bottom: 6px;
}
.ap-price { margin-bottom: 10px; }
.ap-price-inline {
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ap-price-inline .ap-dollar {
font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--accent);
}
.ap-plan-actual {
background: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
border-radius: 8px; padding: 8px 12px; text-align: left;
}
.ap-plan-actual-bar {
background: var(--bs-success-bg-subtle, #d1e7dd);
border: 1px solid var(--bs-success-border-subtle, #a3cfbb);
border-radius: 10px; padding: 10px 16px; margin-bottom: 14px;
}
.ap-precio-sel { text-align: center; }
.ap-precio-sel-nombre {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--bs-primary); margin-bottom: 4px;
}
.ap-precio-sel-renov {
font-size: 11px; color: var(--bs-secondary-color, #6c757d); margin-top: 4px;
}
.ap-plan-card--sel {
outline: 2px solid var(--bs-primary) !important;
outline-offset: -2px;
}
.ap-inst-estimacion {
background: var(--bs-primary-bg-subtle, #cfe2ff);
border: 1px solid var(--bs-primary-border-subtle, #9ec5fe);
border-radius: 10px; padding: 12px 16px;
}
.ap-inst-estimacion-total {
font-size: 1.3rem; font-weight: 700; color: var(--bs-primary);
}
.ap-plan-activo-badge {
display: inline-block;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
border-radius: 20px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}
.ap-plan-descuento-badge {
display: inline-block;
background: var(--bs-success); color: #fff;
font-size: 11px; font-weight: 700; border-radius: 20px;
padding: 2px 10px; margin-bottom: 6px;
}
.ap-plan-descuento-label {
font-size: 11px; color: var(--bs-success); font-weight: 600; margin-top: 4px;
}
.ap-suscripciones-total {
background: var(--bs-card-bg, #fff);
border: 2px solid var(--bs-primary);
border-radius: 14px; padding: 20px 24px;
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 4px; margin-top: 8px;
}
.ap-plan-cotizacion-label {
display: block;
font-size: 11px; color: var(--bs-warning-text-emphasis, #664d03);
background: var(--bs-warning-bg-subtle, #fff3cd);
border: 1px solid var(--bs-warning-border-subtle, #ffecb5);
border-radius: 6px; padding: 6px 10px; margin-top: 10px; line-height: 1.4;
text-align: left;
}
.ap-section {
background: var(--bs-card-bg, #fff);
border: 1px solid var(--border); border-radius: 14px;
padding: 18px 20px; margin-bottom: 18px;
}
.ap-section-title {
font-size: 14px; font-weight: 600; margin-bottom: 12px;
color: var(--bs-body-color, var(--text));
}
/* ── Planes ── */
.ap-section--planes { padding: 18px 20px 20px; }
/* Dentro de la ficha el pricing va en un card blanco: mismas tarjetas, menos aire */
.ap-section--planes .sp-wrap { padding: 16px 0 8px; }
.ap-fac-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-bottom: 18px;
}
.ap-fac-tab {
padding: 5px 16px; border-radius: 999px;
border: 1px solid var(--border); background: transparent;
color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.ap-fac-tab:hover { background: var(--sidebar-hover); color: var(--text); }
.ap-fac-tab.active {
background: rgba(var(--accent-rgb),.1); border-color: var(--accent);
color: var(--accent); font-weight: 600;
}
.ap-plan-cards {
display: flex; gap: 14px; flex-wrap: wrap;
}
.ap-plan-card {
flex: 1 1 180px; min-width: 150px;
border-radius: 14px; overflow: hidden;
border: 1px solid var(--border);
display: flex; flex-direction: column;
}
.ap-plan-card-hd {
padding: 20px 16px 18px; font-size: 16px; font-weight: 700; text-align: center;
background: var(--sidebar); color: var(--text);
}
/* ── Cards de detalle ── */
.ap-info-card {
background: var(--bs-card-bg, #fff); color: var(--bs-body-color, var(--text));
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.ap-info-card-hd {
padding: 11px 16px; font-size: 13px; font-weight: 600;
border-bottom: 1px solid var(--border);
}
.ap-info-list {
list-style: none; margin: 0; padding: 0;
}
.ap-info-list li {
display: flex; align-items: center; gap: 8px;
padding: 9px 16px; font-size: 13px;
border-bottom: 1px solid var(--border);
}
.ap-info-list li:last-child { border-bottom: none; }
.ap-info-lbl { color: var(--muted); min-width: 80px; flex-shrink: 0; }
/* Fila de desarrollador */
.ap-dev-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ap-dev-row:hover { background: var(--sidebar-hover); }
/* Redes sociales */
.ap-social-grid {
display: flex; flex-direction: column; gap: 0;
}
.ap-social-btn {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; text-decoration: none;
font-size: 13px; font-weight: 500;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ap-social-btn:last-child { border-bottom: none; }
.ap-social-btn:hover { background: var(--sidebar-hover); }
.ap-social-btn i { font-size: 18px; width: 22px; text-align: center; }
.ap-social-btn--fb i { color: #1877f2; }
.ap-social-btn--ig i { color: #e1306c; }
.ap-social-btn--tt i { color: var(--bs-body-color); }
/* ── Embed de presentación ── */
.ap-embed-wrap {
position: relative; width: 100%; padding-bottom: 56.25%;
border-radius: 12px; overflow: hidden;
}
.ap-embed-wrap iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ap-plan-card-body {
padding: 24px 16px; flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
background: var(--bs-card-bg, #fff);
}
.ap-plan-card-price { display: flex; align-items: baseline; gap: 4px; }
.ap-plan-card-amount { font-size: 2rem; font-weight: 800; line-height: 1; }
@media (max-width: 640px) {
.ap-install { flex-basis: 100%; }
.ap-plan-card { flex-basis: calc(50% - 7px); }
}
/* ── Featured card ── */
.gp-feat-card {
flex-shrink: 0; width: 186px;
border-radius: 16px; overflow: hidden;
border: 1px solid var(--border); background: var(--sidebar);
scroll-snap-align: start;
transition: transform .2s, box-shadow .2s;
display: flex; flex-direction: column;
}
.gp-feat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.gp-feat-top {
height: 116px; background: var(--input-bg);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.gp-feat-logo {
width: 72px; height: 72px; border-radius: 16px;
background: var(--sidebar); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gp-feat-logo img { width: 52px; height: 52px; object-fit: contain; }
.gp-feat-logo span { font-size: 30px; font-weight: 800; color: var(--accent); }
.gp-feat-badge {
position: absolute; top: 9px; right: 9px;
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
background: rgba(var(--accent-rgb),.12); color: var(--accent);
padding: 2px 7px; border-radius: 999px;
}
.gp-feat-body { padding: 10px 12px; flex: 1; }
.gp-feat-name {
font-size: 12.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gp-feat-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.gp-feat-action {
margin: 0 12px 12px; height: 28px; border-radius: 7px;
background: rgba(var(--accent-rgb),.1);
display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 13px;
}
.gp-installed-txt { color: #22c55e; }
/* ── App card (portrait, slider) ── */
.gp-card {
flex-shrink: 0; width: 112px;
display: flex; flex-direction: column; padding: 10px 8px;
border-radius: 12px; text-decoration: none; color: inherit;
scroll-snap-align: start;
transition: background .15s;
}
.gp-card:hover { background: var(--sidebar-hover); }
.gp-card-icon {
width: 100%; aspect-ratio: 1/1; border-radius: 12px;
margin-bottom: 9px; position: relative;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: var(--sidebar); border: 0;
box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
}
.gp-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.gp-card-icon > span { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; }
.gp-card-check {
position: absolute; bottom: 5px; right: 5px;
width: 17px; height: 17px; border-radius: 50%;
background: #22c55e; color: #fff; font-size: 8px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.gp-card-name {
font-size: 12px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3; margin-bottom: 2px;
}
.gp-card-type { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; }
.gp-card-bottom { display: flex; align-items: center; gap: 4px; }
.gp-card-rating { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.gp-card-rating i { color: #f59e0b; font-size: 9px; }
.gp-card-price { font-size: 10.5px; color: var(--muted); }
.gp-price-installed { color: #22c55e !important; }
/* Resalta apps gratis en toda la tienda */
.gp-price-free {
display: inline-flex; align-items: center;
padding: 1px 9px; border-radius: 999px;
font-size: 11px; font-weight: 700; line-height: 1.5;
color: #16a34a; background: rgba(34,197,94,.14);
}
/* ── Shared ── */
.gp-verified { color: var(--accent); }
.gp-verified-sm { font-size: 10px; }
.gp-star { color: #f59e0b; font-size: 10px; }
/* ── Responsive ── */
@media (max-width: 768px) {
.gp-container { padding: 0 16px; }
.gp-block { padding: 20px 0 24px; }
}
@media (max-width: 600px) {
.gp-topbar { gap: 8px; padding: 0 12px; }
.gp-tab span { display: none; }
.gp-tab { padding: 7px 10px; }
.gp-slide-btn { display: none; }
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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);
}
[data-bs-theme="light"] .lp-nav { background: rgba(241,245,249,.82); }
.lp-nav-brand {
display: flex; align-items: center; gap: 10px;
text-decoration: none; flex: 1;
}
.lp-nav-logo {
width: 28px; height: 28px; border-radius: 7px;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.lp-nav-name {
font-size: 17px; font-weight: 700;
background: linear-gradient(90deg, var(--accent), var(--accent2));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-nav-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 18px; border-radius: 7px; border: 1px solid var(--border);
background: none; color: var(--text); font-size: 13px; font-weight: 600;
cursor: pointer; text-decoration: none;
transition: border-color .15s, color .15s, background .15s;
}
.lp-nav-cta:hover { border-color: var(--accent); color: var(--accent); background: rgba(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;
}
.lp-stars {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
pointer-events: none; display: block;
}
.lp-hero-content { position: relative; z-index: 1; max-width: 740px; }
.lp-hero-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);
}
[data-bs-theme="light"] .lp-features { background: rgba(0,0,0,.025); }
.lp-features-title {
text-align: center; font-size: clamp(22px, 3vw, 34px);
font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -.02em;
}
.lp-features-sub { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 52px; }
.lp-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px; max-width: 1080px; margin: 0 auto;
}
.lp-feat-card {
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 14px; padding: 28px 24px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-feat-card:hover {
border-color: var(--accent); transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(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; }
/* ── Hero trust row ── */
.lp-hero-trust {
display: flex; flex-wrap: wrap; gap: 10px 22px;
justify-content: center; margin-top: 28px;
}
.lp-hero-trust span {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--muted); font-weight: 500;
}
.lp-hero-trust i { color: var(--accent2); font-size: 12px; }
/* ── Section heading (reusable) ── */
.lp-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.lp-eyebrow {
display: inline-block; margin-bottom: 12px;
font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent2);
}
.lp-section-title {
font-size: clamp(22px, 3vw, 34px); font-weight: 800;
color: var(--text); margin-bottom: 12px; letter-spacing: -.02em; line-height: 1.18;
}
.lp-section-sub { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }
/* ── Apps grid (catálogo tipo Odoo) ── */
.lp-apps { padding: 80px 32px; }
.lp-apps-cat { max-width: 1080px; margin: 0 auto 44px; }
.lp-apps-cat:last-child { margin-bottom: 0; }
.lp-apps-cat-title {
display: flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 700; color: var(--text);
margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.lp-apps-cat-title i { color: var(--accent2); font-size: 13px; }
.lp-apps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.lp-app-card {
display: block; text-decoration: none;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 18px;
transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lp-app-card:hover {
border-color: var(--accent); transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37,99,235,.12);
}
.lp-app-icon {
width: 40px; height: 40px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 17px; color: #fff; margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.lp-app-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.lp-app-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
/* ── Banda de cifras ── */
.lp-band {
padding: 56px 32px;
background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.lp-band-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
max-width: 960px; margin: 0 auto; text-align: center;
}
.lp-stat-num { font-size: clamp(30px, 5vw, 46px); font-weight: 800; color: #fff; line-height: 1; }
.lp-stat-label { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 8px; font-weight: 500; }
/* ── CTA final ── */
.lp-cta {
padding: 80px 24px; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.lp-cta-title {
font-size: clamp(24px, 3.5vw, 38px); font-weight: 800;
color: var(--text); margin-bottom: 12px; letter-spacing: -.02em;
}
.lp-cta-sub { font-size: 15px; color: var(--muted); margin-bottom: 32px; max-width: 540px; line-height: 1.6; }
/* ── Responsive ── */
@media (max-width: 640px) {
.lp-apps, .lp-features { padding: 56px 20px; }
.lp-band-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.lp-section-head { margin-bottom: 36px; }
/* Tarjetas de app: ícono a la izquierda, texto a la derecha */
.lp-app-card {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
column-gap: 14px;
padding: 14px 16px;
}
.lp-app-icon { grid-row: 1 / span 2; margin-bottom: 0; }
.lp-app-name { grid-column: 2; margin-bottom: 3px; }
.lp-app-desc { grid-column: 2; }
}
/* ── 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: 24px 32px;
display: flex; align-items: center; justify-content: center; gap: 12px;
font-size: 12px; color: var(--muted);
}
.lp-footer-sep { opacity: 0.35; }
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--text); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Calendario (.cal-*, .gcal-*)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Landing base ── */
.cal-landing { flex: 1; overflow-y: auto; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
/* ── Hero ── */
.cal-hero {
position: relative;
overflow: hidden;
min-height: 520px;
display: flex;
align-items: center;
}
.cal-hero-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
z-index: 0;
}
.cal-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 400px at 70% 50%, rgba(37,99,235,.18) 0%, transparent 70%),
radial-gradient(ellipse 300px 300px at 20% 80%, rgba(245,158,11,.12) 0%, transparent 60%);
}
.cal-hero-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
padding: 64px 32px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 768px) {
.cal-hero-inner { grid-template-columns: 1fr; padding: 48px 20px; }
.cal-hero-mockup { display: none; }
}
.cal-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,158,11,.15);
border: 1px solid rgba(245,158,11,.35);
color: #f59e0b;
font-size: .8rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 20px;
letter-spacing: .3px;
}
.cal-hero-h1 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1.15;
margin-bottom: 20px;
letter-spacing: -.5px;
}
.cal-hero-accent {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cal-hero-sub {
color: rgba(255,255,255,.65);
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 32px;
max-width: 480px;
}
.cal-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cal-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f59e0b;
color: #000;
font-weight: 700;
font-size: .95rem;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
transition: background .2s, transform .15s;
}
.cal-btn-primary:hover { background: #fbbf24; transform: translateY(-1px); color: #000; }
.cal-btn-primary.cal-btn-lg { padding: 14px 32px; font-size: 1.05rem; }
.cal-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.2);
color: rgba(255,255,255,.85);
font-weight: 600;
font-size: .95rem;
padding: 12px 24px;
border-radius: 10px;
text-decoration: none;
transition: background .2s;
}
.cal-btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
/* ── Mockup decorativo ── */
.cal-hero-mockup { perspective: 900px; }
.cal-mockup-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(8px);
transform: rotateY(-8deg) rotateX(4deg);
box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.cal-mockup-header {
background: rgba(255,255,255,.06);
padding: 12px 14px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.cal-mockup-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.cal-mockup-month { color: rgba(255,255,255,.9); font-weight: 700; font-size: .85rem; }
.cal-mockup-arrows { display: flex; gap: 8px; color: rgba(255,255,255,.5); font-size: .9rem; cursor: default; }
.cal-mockup-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.cal-mockup-days span { color: rgba(255,255,255,.45); font-size: .65rem; font-weight: 600; }
.cal-mockup-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 8px 10px 12px;
}
.cal-mockup-cell {
min-height: 40px;
border-radius: 6px;
padding: 4px 5px;
font-size: .7rem;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.03);
}
.cal-mockup-other { color: rgba(255,255,255,.2); }
.cal-mockup-today {
background: rgba(245,158,11,.25);
color: #f59e0b;
font-weight: 700;
}
.cal-mock-chip {
font-size: .6rem;
padding: 2px 4px;
border-radius: 3px;
color: #fff;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Stats bar ── */
.cal-stats-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
padding: 20px 32px;
background: var(--header);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.cal-stat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 32px;
}
.cal-stat i { font-size: 1.4rem; color: #f59e0b; }
.cal-stat strong { display: block; font-size: .9rem; }
.cal-stat span { font-size: .78rem; color: var(--muted); }
.cal-stat-divider { width: 1px; height: 40px; background: var(--border); }
/* ── Secciones genéricas ── */
.cal-section {
padding: 72px 32px;
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.cal-section--alt { background: var(--header); max-width: 100%; }
.cal-section--alt > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cal-section-label {
font-size: .75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #f59e0b;
margin-bottom: 10px;
}
.cal-section-h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
margin-bottom: 40px;
letter-spacing: -.3px;
}
/* ── Features grid ── */
.cal-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.cal-feature-card {
display: flex;
align-items: flex-start;
gap: 18px;
background: var(--header);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 22px;
transition: box-shadow .2s, border-color .2s;
}
.cal-feature-card:hover {
border-color: rgba(245,158,11,.4);
box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.cal-feature-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 10px;
background: color-mix(in srgb, var(--fi-color, #3b82f6) 15%, transparent);
color: var(--fi-color, #3b82f6);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.cal-feature-content h4 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.cal-feature-content p { font-size: .85rem; color: var(--muted); margin: 0; line-height: 1.55; }
/* ── Cómo funciona ── */
.cal-how-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 700px) {
.cal-how-grid { grid-template-columns: 1fr; }
.cal-how-divider { display: none; }
}
.cal-how-col { display: flex; flex-direction: column; gap: 0; }
.cal-how-badge {
display: inline-flex;
align-items: center;
font-size: .8rem;
font-weight: 700;
padding: 6px 14px;
border-radius: 99px;
margin-bottom: 24px;
width: fit-content;
}
.cal-step-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.cal-step-num {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-size: .78rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.cal-step-connector {
width: 1px;
height: 28px;
background: var(--border);
margin-left: 13px;
}
.cal-how-divider {
width: 1px;
background: var(--border);
align-self: stretch;
}
/* ── CTA ── */
.cal-cta-section {
background: linear-gradient(135deg, #1e293b 0%, #1e1b4b 100%);
padding: 72px 32px;
text-align: center;
}
.cal-cta-inner { max-width: 560px; margin: 0 auto; }
.cal-cta-h2 { font-size: 1.9rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.cal-cta-sub { color: rgba(255,255,255,.6); margin-bottom: 28px; font-size: 1rem; }
/* ── Footer ── */
.cal-landing-footer {
border-top: 1px solid var(--border);
padding: 20px 32px;
text-align: center;
font-size: 12px;
color: var(--muted);
}
.cal-footer-sep { opacity: .35; margin: 0 8px; }
.cal-landing-footer a { color: var(--muted); text-decoration: none; }
.cal-landing-footer a:hover { color: var(--text); }
/* ── Explorar ── */
.cal-expl {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
background: var(--bg);
}
/* Header */
.cal-expl-header {
position: relative;
overflow: hidden;
padding: 36px 32px 32px;
}
.cal-expl-header-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
z-index: 0;
}
.cal-expl-header-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 500px 300px at 80% 50%, rgba(37,99,235,.2) 0%, transparent 70%);
}
.cal-expl-header-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.cal-expl-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0; }
.cal-expl-subtitle { font-size: .85rem; color: rgba(255,255,255,.55); margin: 2px 0 0; }
/* Search */
.cal-expl-search-wrap { margin-top: 20px; max-width: 560px; }
.cal-expl-search {
position: relative;
display: flex;
align-items: center;
}
.cal-expl-search-icon {
position: absolute;
left: 14px;
color: rgba(255,255,255,.4);
font-size: .9rem;
pointer-events: none;
}
.cal-expl-search-input {
width: 100%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 10px;
padding: 11px 44px 11px 40px;
color: #fff;
font-size: .95rem;
outline: none;
transition: border-color .2s, background .2s;
}
.cal-expl-search-input::placeholder { color: rgba(255,255,255,.35); }
.cal-expl-search-input:focus {
border-color: rgba(245,158,11,.6);
background: rgba(255,255,255,.12);
}
.cal-expl-search-clear {
position: absolute;
right: 10px;
background: none;
border: none;
color: rgba(255,255,255,.4);
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
font-size: .85rem;
line-height: 1;
transition: color .15s;
}
.cal-expl-search-clear:hover { color: rgba(255,255,255,.8); }
/* Toolbar */
.cal-expl-body { padding: 24px 32px 32px; flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.cal-expl-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.cal-expl-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 99px;
border: 1px solid var(--border);
background: var(--header);
color: var(--muted);
font-size: .82rem;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.cal-filter-chip:hover { border-color: #f59e0b; color: var(--text); }
.cal-filter-chip--active {
background: #f59e0b;
border-color: #f59e0b;
color: #000;
}
.cal-expl-count { font-size: .82rem; color: var(--muted); }
/* Grid */
.cal-expl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
/* Cards */
.cal-expl-card {
display: flex;
flex-direction: column;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--header);
text-decoration: none;
color: var(--text);
transition: border-color .2s, box-shadow .2s, transform .15s;
position: relative;
}
.cal-expl-card:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 8px 28px rgba(0,0,0,.14);
transform: translateY(-2px);
color: var(--text);
}
.cal-expl-card-accent {
height: 4px;
width: 100%;
flex-shrink: 0;
}
.cal-expl-card-inner { display: flex; flex-direction: column; flex: 1; }
.cal-expl-card-img {
height: 100px;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
}
.cal-expl-card-img-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.5));
}
.cal-expl-card-body {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
}
.cal-expl-card-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.cal-cap-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .7rem;
font-weight: 600;
padding: 3px 8px;
border-radius: 99px;
}
.cal-cap-badge--evento {
background: rgba(59,130,246,.12);
color: #3b82f6;
border: 1px solid rgba(59,130,246,.25);
}
.cal-cap-badge--cita {
background: rgba(245,158,11,.12);
color: #f59e0b;
border: 1px solid rgba(245,158,11,.25);
}
.cal-expl-card-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.3;
}
.cal-expl-card-desc {
font-size: .82rem;
color: var(--muted);
line-height: 1.5;
margin-bottom: 14px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cal-expl-card-desc--empty { font-style: italic; }
.cal-expl-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.cal-expl-card-tipo { font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.cal-expl-card-cta {
font-size: .8rem;
font-weight: 600;
color: var(--muted);
transition: color .15s;
}
.cal-expl-card:hover .cal-expl-card-cta { color: #f59e0b; }
/* Skeleton */
.cal-expl-skeleton {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--header);
}
.cal-skel-bar {
height: 4px;
background: var(--border);
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
.cal-skel-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-skel-line {
height: 12px;
border-radius: 6px;
background: var(--border);
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
.cal-skel-line--short { width: 40%; height: 10px; }
.cal-skel-line--title { width: 75%; height: 16px; }
.cal-skel-line--half { width: 55%; }
.cal-skel-btn {
height: 32px;
border-radius: 8px;
background: var(--border);
margin-top: 8px;
animation: cal-skel-pulse 1.4s ease-in-out infinite;
}
@keyframes cal-skel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .45; }
}
/* Empty */
.cal-expl-empty {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.cal-expl-empty i { font-size: 3rem; margin-bottom: 16px; display: block; opacity: .5; }
.cal-expl-empty h5 { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cal-expl-empty p { font-size: .9rem; line-height: 1.6; margin: 0; }
/* Paginación */
.cal-expl-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.cal-pag-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--header);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: .85rem;
transition: all .15s;
}
.cal-pag-btn:hover:not(:disabled) { border-color: #f59e0b; color: #f59e0b; }
.cal-pag-btn:disabled { opacity: .35; cursor: default; }
.cal-pag-info { font-size: .9rem; font-weight: 600; min-width: 60px; text-align: center; }
.cal-pag-sep { color: var(--muted); margin: 0 4px; }
/* Card legacy (usado en otros módulos) */
.cal-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--header);
transition: box-shadow .2s;
}
.cal-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.15); }
.cal-card-strip { height: 5px; }
.cal-card-body { padding: 16px; }
/* ── Header del calendario ── */
.cal-header {
background-size: cover;
background-position: center;
}
.cal-header-overlay {
background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
}
.cal-header-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* ── Google Calendar Grid ── */
.gcal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
border: 1px solid var(--border);
overflow: hidden;
}
.gcal-day-header {
padding: 8px 4px;
text-align: center;
font-size: .75rem;
font-weight: 600;
color: var(--muted);
background: var(--header);
border-bottom: 1px solid var(--border);
}
.gcal-cell {
min-height: 90px;
padding: 6px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
vertical-align: top;
background: var(--bg);
transition: background .15s;
}
.gcal-cell:nth-child(7n) { border-right: none; }
.gcal-cell:hover { background: var(--sidebar-hover); }
.gcal-cell--other-month { opacity: .4; }
.gcal-cell--today .gcal-cell-num {
background: var(--accent);
color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.gcal-cell-num {
font-size: .8rem;
font-weight: 600;
margin-bottom: 4px;
color: var(--text);
}
.gcal-event-chip {
display: block;
font-size: .7rem;
padding: 1px 5px;
border-radius: 4px;
color: #fff;
margin-bottom: 2px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity .15s;
}
.gcal-event-chip:hover { opacity: .85; }
.gcal-event-time { opacity: .8; margin-right: 3px; }
.gcal-event-more { font-size: .68rem; padding: 1px 4px; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Pay Page (.pay-page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pay-page {
flex: 1;
overflow-y: auto;
background: var(--bg);
color: var(--text);
}
/* ── Hero ── */
.pay-page .pay-hero {
background: linear-gradient(135deg, #5E17EB 0%, #3F12A6 100%);
position: relative; overflow: hidden;
}
.pay-page .pay-hero::before {
content: '';
position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,.06);
top: -160px; right: -120px; pointer-events: none;
}
.pay-page .pay-hero::after {
content: '';
position: absolute;
width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; left: -60px; pointer-events: none;
}
/* ── 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; }
/* ── Webhook feature cards (icono a la izquierda, texto a la derecha) ── */
.pay-page .pay-webhook-icon {
width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: rgba(94,23,235,.12); color: #5E17EB; font-size: 1.05rem;
}
.pay-page .pay-webhook-text { min-width: 0; }
/* ── 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, #3F12A6 0%, #5E17EB 100%);
position: relative; overflow: hidden;
}
.pay-page .pay-cta::before {
content: '';
position: absolute;
width: 400px; height: 400px; border-radius: 50%;
background: rgba(255,255,255,.05);
top: -150px; left: -100px;
}
.pay-page .pay-cta::after {
content: '';
position: absolute;
width: 250px; height: 250px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; right: -60px;
}
/* ── Bootstrap overrides inside pay-screen ── */
.pay-page .card {
border: 1px solid var(--border);
background: var(--sidebar); color: var(--text);
}
/* ── 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); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Control Escolar Page (.ce-page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pay-page .pay-step-num { background: #5E17EB; }
.pay-page .pay-stat-num { color: #5E17EB; }
.pay-page .pay-industry-card { border-top-color: #5E17EB !important; }
.pay-page .pay-method-icon { background: rgba(94,23,235,.15); }
.pay-page .pay-method-icon i { color: #5E17EB !important; }
.pay-page .pay-trust-badge i { color: #5E17EB; }
.pay-page .pay-card-mock { background: linear-gradient(135deg, #5E17EB, #8E5DF1); }
.pay-page .pay-footer a:hover { color: #5E17EB; }
.ce-page .pay-hero { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.ce-page .pay-cta { background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
.ce-page .pay-step-num { background: #059669; }
.ce-page .pay-stat-num { color: #059669; }
.ce-page .pay-industry-card { border-top-color: #059669 !important; }
.ce-page .pay-method-icon { background: rgba(5,150,105,.15); }
.ce-page .pay-method-icon i { color: #059669 !important; }
.ce-page .pay-trust-badge i { color: #059669; }
/* Dashboard mock */
.ce-db-mock {
background: #0d1117; border-radius: 14px; overflow: hidden;
box-shadow: 0 28px 56px rgba(0,0,0,.45);
}
.ce-db-bar {
background: #161b22; padding: 10px 16px;
display: flex; align-items: center; gap: 8px;
}
.ce-db-body { padding: 14px; }
.ce-db-head {
display: flex; align-items: center; gap: 10px;
padding: 7px 10px; border-radius: 6px; margin-bottom: 2px;
font-size: .72rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: #6ee7b7;
background: rgba(5,150,105,.2);
}
.ce-db-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 6px; margin-bottom: 2px;
font-size: .8rem; color: #c9d1d9; cursor: default;
}
.ce-db-row:hover { background: rgba(255,255,255,.04); }
.ce-db-name { flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-db-grade { flex: 1; text-align: center; font-weight: 700; color: #f8c555; }
.ce-db-att { flex: 1; text-align: center; }
.ce-db-ok { display:inline-block; background:rgba(34,197,94,.2); color:#4ade80; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-warn { display:inline-block; background:rgba(251,191,36,.2); color:#fbbf24; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-low { display:inline-block; background:rgba(239,68,68,.2); color:#f87171; padding:2px 8px; border-radius:20px; font-size:.7rem; font-weight:600; }
.ce-db-sep { border-color: rgba(255,255,255,.06) !important; margin: 8px 0; }
.ce-db-footer {
padding: 10px 10px 4px;
display: flex; justify-content: space-between; align-items: center;
font-size: .72rem; color: #6e7681;
}
/* Floating hero cards */
.ce-hero-cards { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ce-hero-card {
background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
padding: 14px 18px; color: #fff;
}
.ce-hero-card-icon {
width: 36px; height: 36px; border-radius: 10px;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
font-size: .9rem; flex-shrink: 0;
}
.ce-progress-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.ce-progress-fill { height: 100%; border-radius: 3px; background: #4ade80; }
/* Modules grid */
.ce-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.ce-module-pill {
display: flex; align-items: center; gap: 10px;
padding: 13px 15px; border-radius: 10px;
border: 1px solid var(--border); background: var(--sidebar);
font-size: .83rem; color: var(--text);
transition: border-color .2s, transform .15s, box-shadow .15s;
text-decoration: none;
}
.ce-module-pill:hover {
border-color: #059669; transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(5,150,105,.15); color: var(--text);
}
.ce-module-pill i { color: #059669; font-size: 1rem; flex-shrink: 0; }
/* Horizontal feature strip */
.ce-feat-strip {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; padding: 28px 0 8px;
}
.ce-feat-tag {
display: flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 20px;
border: 1px solid var(--border); background: var(--sidebar);
font-size: .82rem; color: var(--muted);
}
.ce-feat-tag i { color: #059669; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
App Admin (views/apps/admin.html)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-chip-icon {
width: 34px; height: 34px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--text); flex-shrink: 0; overflow: hidden;
}
.badge-app { background: rgba(var(--accent-rgb),.2); color: var(--accent); }
.badge-plugin { background: rgba(96,165,250,.15); color: #60a5fa; }
.badge-instalada { background: rgba(74,222,128,.15); color: #4ade80; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
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; }
/* ── Page blocked ── */
.page-blocked {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 24px; padding: 60px 32px; text-align: center;
}
.blocked-badge {
width: 72px; height: 72px; border-radius: 20px;
background: rgba(220, 53, 69, .1);
border: 1.5px solid rgba(220, 53, 69, .25);
display: flex; align-items: center; justify-content: center;
font-size: 2rem; color: #e05260;
}
.blocked-body { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.blocked-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; }
.blocked-sub { font-size: .875rem; color: var(--muted); margin: 0; line-height: 1.55; }
/* ── Root Hub ── */
.page-root-hub {
padding: 32px 28px;
max-width: 900px;
}
.root-hub-header {
display: flex; flex-direction: row; align-items: center;
gap: 16px; 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; flex-shrink: 0;
}
.root-hub-header-text {
display: flex; flex-direction: column; gap: 2px;
}
.root-hub-title {
font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -.4px; margin: 0;
}
.root-hub-sub {
font-size: .875rem; color: var(--muted); margin: 0;
}
.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 !important;
transition: background .15s, color .15s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-submenu a:hover { background: var(--sidebar-hover); color: var(--text); }
.nav-submenu a.active { background: var(--accent-soft, rgba(99,102,241,.12)); color: var(--accent); font-weight: 600; }
/* ── HTTP loading bar ── */
.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;
}
/* ── App modos EMBED y NATIVO ── */
.app-embed-wrap { position: relative; width: 100%; height: calc(100vh - var(--header-h, 56px)); }
.app-embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.app-nativa-content { flex: 1; min-height: 0; overflow-y: auto; padding: 1.25rem; }
.app-nativa-content.nativa-panel { overflow: hidden !important; padding: 0 !important; display: flex; flex-direction: column; min-height: 0; }
/* ── Control Escolar Admin ── */
.ce-admin-root, .web-admin-root { display: flex; flex: 1; min-height: 0; overflow: hidden; flex-direction: column; }
/* Picker de escuela */
.ce-picker {
flex: 1; display: flex; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 32px 16px; background: var(--bg);
}
.ce-picker-inner { width: 100%; max-width: 560px; }
.ce-picker-header { text-align: center; margin-bottom: 32px; }
.ce-picker-logo {
width: 60px; height: 60px; border-radius: 16px;
background: rgba(37,99,235,.12); color: #2563eb;
font-size: 1.5rem; display: inline-flex; align-items: center;
justify-content: center; margin-bottom: 14px;
}
.ce-picker-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.ce-picker-sub { color: var(--muted); font-size: .9rem; margin: 0; }
.ce-picker-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.ce-picker-card {
display: flex; align-items: center; gap: 14px;
background: var(--sidebar); border: 1px solid var(--border);
border-radius: 12px; padding: 16px 18px; cursor: pointer;
text-align: left; width: 100%; transition: border-color .15s, box-shadow .15s;
color: var(--text);
}
.ce-picker-card:hover { border-color: #2563eb; box-shadow: 0 2px 12px rgba(37,99,235,.15); }
.ce-picker-card-icon {
width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
background: rgba(37,99,235,.1); color: #2563eb;
display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ce-picker-card-body { flex: 1; min-width: 0; }
.ce-picker-card-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-picker-card-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ce-picker-card-arrow { color: var(--muted); font-size: .75rem; flex-shrink: 0; }
.ce-picker-empty { text-align: center; padding: 32px 0; color: var(--muted); }
.ce-picker-empty i { font-size: 2.5rem; opacity: .2; display: block; margin-bottom: 12px; }
.ce-picker-empty p { margin: 0 0 4px; font-size: .9rem; }
.ce-picker-empty small { font-size: .78rem; }
.ce-picker-footer { text-align: center; }
.ce-picker-nueva {
background: transparent; border: 1.5px dashed var(--border);
color: var(--muted); border-radius: 10px; padding: 12px 28px;
font-size: .88rem; cursor: pointer; transition: background .15s, border-color .15s;
}
.ce-picker-nueva:hover { background: var(--sidebar-hover); border-color: var(--text); }
/* Escuela activa en sidebar */
.ce-admin-school-active {
display: flex; align-items: center; gap: 6px;
background: var(--sidebar-hover); border-radius: 8px;
padding: 8px 10px; font-size: .84rem;
}
/* ── Control Escolar Admin layout (.ce-admin) ── */
.ce-admin {
display: flex; flex: 1; min-height: 0; overflow: hidden; position: relative;
background: var(--bg);
}
.ce-admin-sidebar {
width: 260px; flex-shrink: 0;
background: var(--sidebar); border-right: 1px solid var(--border);
display: flex; flex-direction: column; overflow: hidden;
transition: transform .25s;
}
.ce-admin-sidebar-hd {
padding: 14px 16px 12px; flex-shrink: 0;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
/* Nombre de la solución en una sola línea con elipsis (los nombres largos
como "Centro de desarrolladores" partían en 2 líneas) */
.ce-admin-sidebar-hd .fw-bold {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.ce-admin-sidebar-hd .ce-admin-logo,
.cta-aside-hd .ce-admin-logo {
width: 30px; height: 30px; border-radius: 8px; background: rgba(37,99,235,.12);
display: flex; align-items: center; justify-content: center;
color: #2563eb; font-size: .9rem; flex-shrink: 0;
}
.ce-admin-school-sel {
padding: 10px 12px; flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.ce-admin-school-label {
font-size: .62rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); margin-bottom: 6px;
}
.ce-admin-nueva-btn {
width: 100%; background: transparent; font-size: .78rem;
border: 1px dashed var(--border); color: var(--muted);
border-radius: 6px; padding: 5px 10px; cursor: pointer;
transition: background .15s, border-color .15s;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ce-admin-nueva-btn:hover { background: var(--sidebar-hover); border-color: var(--text); }
/* ── Lista de calendarios en el sidebar (estilo Google Calendar) ── */
.ce-cal-section {
flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--border);
padding: 10px 8px 8px;
display: flex; flex-direction: column; overflow: hidden;
}
.ce-cal-section-hd {
display: flex; align-items: center; justify-content: space-between;
padding: 0 8px 6px;
}
.ce-cal-add {
width: 24px; height: 24px; border-radius: 6px; border: none;
background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
.ce-cal-add:hover { background: var(--sidebar-hover); color: var(--text); }
.ce-cal-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.ce-cal-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 7px; margin: 1px 0; transition: background .12s;
}
.ce-cal-item:hover { background: var(--sidebar-hover); }
.ce-cal-item.active { background: rgba(37,99,235,.12); }
.ce-cal-dot {
width: 17px; height: 17px; border-radius: 5px; border: 2px solid; background: transparent;
flex-shrink: 0; cursor: pointer; padding: 0; color: #fff; font-size: .58rem;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s;
}
.ce-cal-name {
flex: 1; min-width: 0; font-size: .84rem; color: var(--text); cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-cal-item.active .ce-cal-name { font-weight: 600; }
.ce-cal-gicon { color: #4caf50; font-size: .66rem; flex-shrink: 0; opacity: .9; }
.ce-cal-menu-wrap { flex-shrink: 0; position: relative; }
.ce-cal-menu-btn {
width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent;
color: var(--muted); cursor: pointer; font-size: .82rem; opacity: .55;
display: inline-flex; align-items: center; justify-content: center; transition: background .12s, opacity .12s;
}
.ce-cal-item:hover .ce-cal-menu-btn, .ce-cal-item.active .ce-cal-menu-btn { opacity: 1; }
.ce-cal-menu-btn:hover { background: var(--border); color: var(--text); }
.ce-cal-empty { padding: 12px; text-align: center; font-size: .78rem; color: var(--muted); }
/* Dropdown flotante de opciones del calendario (position:fixed → no se recorta) */
.ce-cal-menu-pop {
position: fixed; z-index: 1090;
background: var(--sidebar, #fff);
border: 1px solid var(--border, #dee2e6);
border-radius: 9px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
padding: 5px;
display: flex; flex-direction: column; gap: 1px;
}
[data-bs-theme="dark"] .ce-cal-menu-pop { box-shadow: 0 8px 24px rgba(0,0,0,.55); }
.ce-cal-menu-pop button {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
border: none; background: transparent; color: var(--text); font-size: .82rem; text-align: left;
border-radius: 6px; cursor: pointer; transition: background .12s; white-space: nowrap;
}
.ce-cal-menu-pop button:hover { background: var(--sidebar-hover); }
.ce-cal-menu-pop button i { width: 14px; opacity: .7; }
.ce-cal-menu-sep { height: 1px; background: var(--border, #dee2e6); margin: 4px 2px; }
.ce-cal-menu-pop button.ce-cal-menu-danger { color: #dc3545; }
.ce-cal-menu-pop button.ce-cal-menu-danger i { opacity: .85; }
.ce-cal-menu-pop button.ce-cal-menu-danger:hover { background: rgba(220,53,69,.1); }
.ce-admin-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 0 8px; }
.ce-admin-nav-label {
font-size: .6rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); padding: 10px 18px 4px;
}
.ce-admin-nav a {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; font-size: .87rem; color: var(--text);
text-decoration: none; cursor: pointer; border-radius: 6px;
margin: 1px 8px; transition: background .12s;
}
.ce-admin-nav a:hover { background: var(--sidebar-hover); }
.ce-admin-nav a.active {
background: rgba(37,99,235,.12); color: #2563eb; font-weight: 600;
}
.ce-admin-nav a.ce-nav-disabled { opacity: .38; pointer-events: none; cursor: default; }
/* Main content */
.ce-admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ce-admin-topbar {
height: 52px; flex-shrink: 0; background: var(--sidebar);
border-bottom: 1px solid var(--border);
padding: 0 16px; gap: 12px;
display: none; align-items: center;
}
.ce-admin-topbar-title { font-size: .9rem; font-weight: 600; }
.ce-admin-topbar-school { font-size: .75rem; color: var(--muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
/* Mobile overlay */
.ce-admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1049; }
/* Welcome / module dashboard */
.ce-admin-welcome { flex: 1; overflow-y: auto; padding: 28px 24px; }
.ce-admin-school-card {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
border-radius: 14px; padding: 22px 24px; color: #fff; margin-bottom: 24px;
}
.ce-admin-mod-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.ce-admin-mod-card {
background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px;
padding: 20px 16px; cursor: pointer; text-align: center;
transition: border-color .18s, transform .15s, box-shadow .15s;
color: var(--text); text-decoration: none; display: block;
}
.ce-admin-mod-card:hover {
border-color: #2563eb; transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(37,99,235,.12); color: var(--text);
}
.ce-admin-mod-card i { font-size: 1.5rem; color: #2563eb; margin-bottom: 10px; display: block; }
.ce-admin-mod-card span { font-size: .85rem; font-weight: 600; }
/* Dashboard */
.ce-dash-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
}
.ce-dash-kpi {
background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px;
padding: 16px 14px; text-decoration: none; color: var(--text);
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
transition: box-shadow .15s, transform .15s;
}
.ce-dash-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,99,235,.1); color: var(--text); }
.ce-dash-kpi-icon {
width: 36px; height: 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.ce-dash-kpi-val { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.ce-dash-kpi-lbl { font-size: .73rem; color: var(--muted); }
.ce-dash-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
}
.ce-dash-card {
background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px;
padding: 16px 14px;
}
.ce-dash-card--wide { grid-column: span 1; }
@media (min-width: 1100px) { .ce-dash-card--wide { grid-column: span 2; } }
.ce-dash-card-title {
display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .07em; color: var(--muted); margin-bottom: 12px;
}
.ce-dash-bar-track {
height: 6px; border-radius: 3px; background: var(--border); overflow: hidden;
}
.ce-dash-bar-fill {
height: 100%; border-radius: 3px; transition: width .5s ease;
}
/* Turno pills */
.ce-dash-turno-pill {
display: flex; align-items: center; gap: 6px; font-size: .78rem;
background: var(--border); border-radius: 8px; padding: 6px 10px;
}
.ce-dash-turno-pill strong { margin-left: 2px; }
/* Últimos alumnos */
.ce-dash-alumno-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 0; border-bottom: 1px solid var(--border);
}
.ce-dash-alumno-row:last-child { border-bottom: none; }
.ce-dash-alumno-avatar {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
background: var(--border); display: flex; align-items: center; justify-content: center;
font-size: .75rem; color: var(--muted); overflow: hidden;
}
.ce-dash-alumno-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Tips / alertas */
.ce-dash-tip {
display: flex; align-items: flex-start; gap: 8px;
padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: .8rem;
}
.ce-dash-tip:last-child { margin-bottom: 0; }
.ce-dash-tip--success { background: #e6f4ea; color: #145c2a; }
.ce-dash-tip--info { background: #e8f0fe; color: #1a3c72; }
.ce-dash-tip--warning { background: #fef7e0; color: #6b3e00; }
.ce-dash-tip--danger { background: #fce8e6; color: #7a1d1a; }
.ce-dash-tip-link {
flex-shrink: 0; font-size: .73rem; font-weight: 600;
text-decoration: none; opacity: .75;
}
.ce-dash-tip-link:hover { opacity: 1; }
/* Empty state */
.ce-admin-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: var(--muted); padding: 40px;
}
.ce-admin-empty i { font-size: 3rem; opacity: .2; margin-bottom: 14px; }
.ce-admin-empty p { margin: 0; font-size: .9rem; }
.ce-admin-empty small { font-size: .78rem; opacity: .7; }
/* Responsive */
@media (max-width: 991.98px) {
.ce-admin-topbar { display: flex; }
.ce-admin-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
z-index: 1050; width: 280px;
transform: translateX(-100%);
}
.ce-admin-sidebar.open {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(0,0,0,.4);
}
}
@media (min-width: 992px) {
.ce-admin-sidebar-close { display: none !important; }
}
/* ── Sidebar colapsable (solo iconos + tooltips) — compartido por módulos .ce-admin ── */
.ce-admin-collapse-btn {
margin-left: auto; flex-shrink: 0;
width: 28px; height: 28px; border: none; background: transparent;
color: var(--muted); border-radius: 7px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1rem; line-height: 1; /* tamaño fijo del icono: no heredar el font-size del contenedor (p.ej. .org-settings-container .88rem) */
transition: background .12s, color .12s;
}
.ce-admin-collapse-btn:hover { background: var(--sidebar-hover); color: var(--text); }
/* anchura animada al contraer/expandir (la regla base solo tenía transform) */
.ce-admin-sidebar { transition: width .2s ease, transform .25s; }
/* Las reglas de contraído se acotan a .ce-admin-sidebar (el aside de escritorio);
el offcanvas móvil reutiliza estas clases internas pero NO lleva esa clase,
así que conserva sus etiquetas aunque la preferencia sea "contraído". */
.ce-admin.ce-collapsed .ce-admin-sidebar { width: 62px; }
/* Encabezado al contraer: se CONSERVA el icono de la solución (logo) arriba y, debajo,
el botón de expandir, en columna. Solo se oculta el TEXTO del título. Funciona para el
caso común (.ce-admin-logo + span) y para contactos (un con logo + título). */
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd {
flex-direction: column; justify-content: center; align-items: center;
gap: 8px; padding: 12px 0 10px;
}
/* Ocultar solo el título (span directo, o el span dentro del de marca de contactos). */
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > span,
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-sidebar-hd > a { justify-content: center; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-collapse-btn { margin: 0; }
/* Selector de escuela/cuenta/org y secciones extra (lista de calendarios):
se ocultan por completo al contraer. Cada módulo tiene aquí markup distinto,
así que ocultarlas evita recortes y deja el sidebar como pura navegación. */
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-school-sel,
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-cal-section { display: none !important; }
/* Navegación: iconos centrados, sin etiquetas ni chevron */
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav-label { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a { justify-content: center; padding: 9px 0; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar .ce-admin-nav a > i.ms-auto { display: none !important; }
/* Pie (volver): icono centrado, pero el enlace llena TODA la caja del pie para que
el área de clic sea el cuadro completo (no solo el icono). Se quita el padding del
contenedor y el se estira a lo ancho y alto. */
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child {
justify-content: center; padding-left: 0 !important; padding-right: 0 !important;
}
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a {
flex: 1; align-self: stretch;
display: flex; align-items: center; justify-content: center;
}
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a:hover { background: var(--sidebar-hover); }
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a > span { display: none !important; }
.ce-admin.ce-collapsed .ce-admin-sidebar > div:last-child a > i { margin: 0 !important; }
/* En pantallas medianas (lg→xl) se fuerza el colapso y se oculta el botón de
contraer (no aplica la preferencia del usuario). El logo de la solución sigue
visible porque ya no se oculta al contraer. */
@media (max-width: 1199.98px) {
.ce-admin-collapse-btn { display: none; }
}
/* ── IoT admin — tema verde ── */
.iot-admin .ce-picker-logo { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-picker-card:hover { border-color: #22c55e; box-shadow: 0 2px 12px rgba(34,197,94,.15); }
.iot-admin .ce-picker-card-icon { background: rgba(34,197,94,.1); color: #22c55e; }
.iot-admin .ce-picker-nueva:hover { border-color: #22c55e; }
.iot-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-admin-nav a.active { background: rgba(34,197,94,.12); color: #22c55e; }
.iot-admin .ce-admin-school-card { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }
.iot-admin .ce-admin-mod-card i { color: #22c55e; }
.iot-admin .ce-admin-mod-card:hover { border-color: #22c55e; box-shadow: 0 6px 18px rgba(34,197,94,.12); }
/* ── Control Escolar admin → toque verde (paleta de marca de /escolares) ── */
.ce-escolares-admin {
--bs-primary: #059669;
--bs-primary-rgb: 5,150,105;
--accent: #059669;
--accent-rgb: 5,150,105;
--accent2: #22c55e;
}
.ce-escolares-admin .btn-primary {
--bs-btn-bg: #059669; --bs-btn-border-color: #059669;
--bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857;
--bs-btn-active-bg: #047857; --bs-btn-active-border-color: #047857;
--bs-btn-disabled-bg: #059669; --bs-btn-disabled-border-color: #059669;
}
/* Picker de escuela */
.ce-escolares-admin .ce-picker-logo { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-picker-card:hover { border-color: #059669; box-shadow: 0 2px 12px rgba(5,150,105,.15); }
.ce-escolares-admin .ce-picker-card-icon { background: rgba(5,150,105,.1); color: #059669; }
.ce-escolares-admin .ce-picker-nueva:hover { border-color: #059669; }
/* Sidebar */
.ce-escolares-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-admin-nav a.active { background: rgba(5,150,105,.12); color: #059669; }
.ce-escolares-admin .ce-cal-item.active { background: rgba(5,150,105,.12); }
/* Hero + tarjetas de módulo */
.ce-escolares-admin .ce-admin-school-card { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.ce-escolares-admin .ce-admin-mod-card i { color: #059669; }
.ce-escolares-admin .ce-admin-mod-card:hover { border-color: #059669; box-shadow: 0 6px 18px rgba(5,150,105,.12); }
/* Dashboard */
.ce-escolares-admin .ce-dash-kpi:hover { box-shadow: 0 6px 18px rgba(5,150,105,.1); }
/* Controles de formulario (switches/checkboxes) → verde */
.ce-escolares-admin .form-check-input:checked { background-color: #059669; border-color: #059669; }
.ce-escolares-admin .form-check-input:focus { border-color: #8fd3bd; box-shadow: 0 0 0 .25rem rgba(5,150,105,.25); }
.ce-escolares-admin .form-control:focus, .ce-escolares-admin .form-select:focus { border-color: #8fd3bd; box-shadow: 0 0 0 .25rem rgba(5,150,105,.2); }
/* ── Dev admin → toque morado (paleta de marca de /dev) ── */
.dev-admin {
--bs-primary: #8b5cf6;
--bs-primary-rgb: 139,92,246;
--accent: #8b5cf6;
--accent-rgb: 139,92,246;
--accent2: #a78bfa;
}
.dev-admin .btn-primary {
--bs-btn-bg: #8b5cf6; --bs-btn-border-color: #8b5cf6;
--bs-btn-hover-bg: #7c3aed; --bs-btn-hover-border-color: #7c3aed;
--bs-btn-active-bg: #7c3aed; --bs-btn-active-border-color: #7c3aed;
--bs-btn-disabled-bg: #8b5cf6; --bs-btn-disabled-border-color: #8b5cf6;
}
/* list-group nativo (lista de apps + menú): estado activo en morado
(Bootstrap fija --bs-list-group-active-bg a azul, no a --bs-primary) */
.dev-admin .list-group {
--bs-list-group-active-bg: #8b5cf6;
--bs-list-group-active-border-color: #8b5cf6;
}
/* Sidebar */
.dev-admin .ce-admin-sidebar-hd .ce-admin-logo { background: rgba(139,92,246,.12); color: #8b5cf6; }
.dev-admin .ce-admin-nav a.active { background: rgba(139,92,246,.12); color: #8b5cf6; }
/* Hero + tarjetas de módulo */
.dev-admin .ce-admin-school-card { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.dev-admin .ce-admin-mod-card i { color: #8b5cf6; }
.dev-admin .ce-admin-mod-card:hover { border-color: #8b5cf6; box-shadow: 0 6px 18px rgba(139,92,246,.12); }
/* Controles de formulario (switches/checkboxes) → morado */
.dev-admin .form-check-input:checked { background-color: #8b5cf6; border-color: #8b5cf6; }
.dev-admin .form-check-input:focus { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(139,92,246,.25); }
.dev-admin .form-control:focus, .dev-admin .form-select:focus { border-color: #c4b5fd; box-shadow: 0 0 0 .25rem rgba(139,92,246,.2); }
/* ── Capacidades (/dev/admin/apps): reordenar filas por drag & drop ── */
tr.feat-dragging { opacity: .45; }
tr.feat-dragover td { box-shadow: inset 0 2px 0 var(--bs-primary, #2563eb); }
/* ── Panel layout reutilizable (alumnos, docentes, etc.) ── */
.nativa-panel-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.nativa-panel-header { flex-shrink: 0; padding: 13px 20px 12px; border-bottom: 1px solid var(--border, #dee2e6); }
.nativa-panel-body { flex: 1; overflow-y: auto; min-height: 0; }
.nativa-panel-body table thead th { position: sticky; top: 0; z-index: 2; background-color: var(--sidebar) !important; }
.nativa-panel-footer { flex-shrink: 0; border-top: 1px solid var(--border, #dee2e6); padding: 8px 20px; min-height: 47px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; }
/* ── Paginación nativa-panel ── */
.nativa-pag-btn { background: var(--sidebar); border: 1px solid var(--border); color: var(--muted); min-width: 30px; padding: 2px 7px; border-radius: 6px; font-size: .78rem; transition: background .12s, color .12s; }
.nativa-pag-btn:hover:not(:disabled) { background: var(--sidebar-hover); color: var(--text); }
.nativa-pag-btn:disabled { opacity: .4; cursor: default; }
.nativa-pag-btn--active { background: rgba(37,99,235,.15) !important; color: var(--accent) !important; border-color: transparent !important; }
/* ── Utilidades de color/tipografía (variables CSS) ── */
.text-border-var { color: var(--border); }
.bg-accent-var { background: var(--accent); }
.bg-sidebar-var { background: var(--sidebar); }
.text-muted-xs { color: var(--muted); font-size: .75rem; }
.text-mono-muted { color: var(--muted); font-size: 11px; font-family: monospace; }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Responsive — Mobile (< 768 px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Elementos exclusivos de móvil: ocultos por defecto */
.sidebar-mobile-toggle { display: none; }
.sidebar-mobile-backdrop {
display: none; position: fixed; inset: 0; top: 56px;
background: rgba(0,0,0,.55); z-index: 599;
}
/* ── Footer de navegación móvil (bottom nav, estilo Mercado Libre / X) ──
Oculto en escritorio; se activa dentro del media query móvil de abajo. */
:root { --bottomnav-h: calc(56px + env(safe-area-inset-bottom)); }
.mobile-bottom-nav { display: none; }
.mbn-item {
flex: 1 1 0; min-width: 0; height: 56px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
background: none; border: none; cursor: pointer; text-decoration: none;
color: var(--muted); padding: 6px 2px 4px; position: relative;
transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.mbn-item.active { color: var(--accent); }
.mbn-item:active { background: var(--sidebar-hover); }
.mbn-icon { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }
.mbn-label { font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }
.mbn-bell-wrap { position: relative; }
.mbn-badge {
position: absolute; top: -6px; right: -10px;
background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
border-radius: 999px; min-width: 15px; height: 15px; padding: 0 4px;
display: flex; align-items: center; justify-content: center; line-height: 1;
}
.mbn-avatar {
width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; border: 2px solid transparent;
}
.mbn-avatar.avatar--verified { background: linear-gradient(135deg, #16a34a, #22c55e); }
.mbn-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mbn-item--profile.active .mbn-avatar { border-color: var(--accent); }
@media (max-width: 767.98px) {
/* ── Header compacto ── */
header { padding: 0 10px; gap: 8px; }
.header-ctx-sep,
.header-ctx-label,
.header-user-name,
.header-title { display: none; }
/* Hamburger visible */
.sidebar-mobile-toggle { display: flex; }
/* ── Sidebar como overlay deslizante ── */
aside {
position: fixed !important;
top: 56px; left: 0;
height: calc(100dvh - 56px);
width: 260px !important;
z-index: 600;
transform: translateX(-100%);
transition: transform .25s ease !important;
box-shadow: 4px 0 32px rgba(0,0,0,.5);
}
aside:not(.collapsed) { transform: translateX(0); }
/* Backdrop visible cuando sidebar está abierto */
.sidebar-mobile-backdrop { display: block; }
/* ── Dropdowns: evitar desbordamiento horizontal ── */
.soluciones-dropdown {
width: min(300px, calc(100vw - 16px));
right: 0; left: auto;
max-height: min(380px, calc(100dvh - 80px));
}
.soluciones-item-icon { width: 44px; height: 44px; font-size: 18px; }
.soluciones-grid { gap: 2px; padding: 4px 6px; }
.header-ctx-app-wrap .ctx-dropdown {
left: auto; right: 0;
width: min(240px, calc(100vw - 20px));
}
.user-menu--header {
min-width: 0;
width: min(300px, calc(100vw - 16px));
right: -4px;
}
/* ── Footer de navegación (bottom nav) ── */
.mobile-bottom-nav {
display: flex; align-items: stretch; flex-shrink: 0;
height: var(--bottomnav-h);
padding-bottom: env(safe-area-inset-bottom);
background: var(--header); border-top: 1px solid var(--border);
position: relative; z-index: 620;
}
/* Con footer presente, esos elementos viven abajo: descongestionar el header.
Ojo: se ocultan solo los botones, NO los .notif-wrapper / .soluciones-wrapper,
porque contienen el offcanvas/dropdown que el footer reutiliza. */
body.has-bottomnav .header-search-btn,
body.has-bottomnav .notif-wrapper > .notif-btn,
body.has-bottomnav .header-user-wrap,
body.has-bottomnav .soluciones-wrapper > .header-icon-btn,
body.has-bottomnav .soluciones-wrapper > .sol-launcher-dot { display: none; }
/* El menú "Apps/Soluciones" se abre como hoja inferior, encima del footer */
body.has-bottomnav .soluciones-dropdown {
position: fixed; left: 8px; right: 8px; top: auto;
bottom: calc(var(--bottomnav-h) + 8px);
width: auto; max-height: min(60dvh, calc(100dvh - 150px));
}
/* El sidebar overlay no debe quedar tapado por el footer */
body.has-bottomnav aside { height: calc(100dvh - 56px - var(--bottomnav-h)); }
}
/* ── Aviso de actualización del sistema ──
Tarjeta flotante (abajo-izquierda en escritorio; barra inferior en móvil,
por encima del footer de navegación). La pinta el verificador de versión. */
.update-banner {
position: fixed; left: 16px; bottom: 20px; z-index: 1035;
display: flex; align-items: center; gap: 12px; text-align: left;
max-width: min(340px, calc(100vw - 32px));
padding: 10px 18px 10px 10px; font: inherit;
background: var(--bs-card-bg, #fff); color: var(--bs-body-color, #0f172a);
border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .22); cursor: pointer;
animation: update-banner-in .35s ease;
}
.update-banner:hover { border-color: var(--accent); }
.update-banner:hover .update-banner-icon i { animation: update-spin .9s linear infinite; }
.update-banner-icon {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent), var(--accent2));
color: #fff; font-size: 1.05rem;
}
.update-banner-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.update-banner-title { font-weight: 600; font-size: .92rem; }
.update-banner-sub { font-size: .8rem; color: var(--muted); }
@keyframes update-spin { to { transform: rotate(360deg); } }
@keyframes update-banner-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) {
.update-banner { left: 12px; right: 12px; bottom: 16px; max-width: none; }
body.has-bottomnav .update-banner { bottom: calc(var(--bottomnav-h) + 12px); }
}
/* ══════════════════════════════════════════════════════════════════════
EMPLEOS — Landing page pública (.em-page)
══════════════════════════════════════════════════════════════════════ */
:root { --em-accent:#0ea5e9; --em-accent2:#0284c7; }
/* Color overrides sobre el sistema pay-page */
.em-page .pay-hero { background: linear-gradient(135deg, #0c1a2e 0%, #0a2a4a 100%); }
.em-page .pay-cta { background: linear-gradient(135deg, #0a2a4a 0%, #0c1a2e 100%); }
.em-page .pay-step-num { background: var(--em-accent); }
.em-page .pay-stat-num { color: var(--em-accent); }
.em-page .pay-method-icon { background: rgba(14,165,233,.15); }
.em-page .pay-method-icon i { color: var(--em-accent) !important; }
.em-page .pay-trust-badge i { color: var(--em-accent); }
/* Mockup card del hero */
.em-mockup-card { background:rgba(255,255,255,.06); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:22px; color:#fff; max-width:340px; width:100%; }
.em-mockup-tag { font-size:.7rem; font-weight:700; opacity:.7; margin-bottom:6px; }
.em-tag--work { color:#7dd3fc; } .em-tag--student { color:#86efac; }
.em-mockup-title { font-size:1rem; font-weight:700; margin-bottom:4px; }
.em-mockup-meta { font-size:.75rem; color:#94a3b8; margin-bottom:10px; }
.em-mockup-chips { display:flex; gap:6px; flex-wrap:wrap; }
.em-chip { font-size:.68rem; font-weight:600; padding:3px 10px; border-radius:99px; }
.em-chip--green { background:rgba(34,197,94,.18); color:#86efac; }
.em-chip--blue { background:rgba(14,165,233,.18); color:#7dd3fc; }
.em-chip--purple { background:rgba(139,92,246,.18); color:#c4b5fd; }
.em-mockup-sep { border-top:1px solid rgba(255,255,255,.1); margin:16px 0; }
/* Grid de puestos de trabajo */
.em-puestos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.em-puesto-card { background:var(--sidebar); border:1px solid var(--border); border-radius:14px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:box-shadow .18s,transform .14s,border-color .18s; color:inherit; }
.em-puesto-card:hover { box-shadow:0 8px 28px rgba(14,165,233,.14); border-color:var(--em-accent); transform:translateY(-2px); }
.em-puesto-card-header { padding:14px 16px 0; display:flex; gap:8px; flex-wrap:wrap; }
.em-tipo-badge,.em-enfoque-badge { font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.em-tipo--presencial { background:rgba(14,165,233,.1); color:#0284c7; }
.em-tipo--remoto { background:rgba(34,197,94,.1); color:#16a34a; }
.em-tipo--ambos { background:rgba(139,92,246,.1); color:#7c3aed; }
.em-enfoque--trabajo { background:rgba(245,158,11,.1); color:#b45309; }
.em-enfoque--estudiante { background:rgba(139,92,246,.1); color:#7c3aed; }
.em-puesto-card-body { padding:14px 16px; flex:1; }
.em-puesto-empresa { font-size:.75rem; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.em-puesto-titulo { font-size:1rem; font-weight:700; margin:0 0 8px; color:inherit; line-height:1.3; }
.em-puesto-desc { font-size:.82rem; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.em-puesto-footer { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.em-contrato-chip { font-size:.68rem; background:var(--input-bg); padding:2px 8px; border-radius:6px; font-weight:600; }
.em-salario { font-size:.78rem; color:#22c55e; font-weight:700; }
.em-salario-freq { font-weight:400; color:var(--muted); }
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Mejoras responsivas globales — Mobile
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Shell: evitar scroll horizontal en el área de contenido ── */
[ng-view], [data-ng-view] { min-width: 0; }
/* ── Inputs: font-size 16px previene zoom automático en iOS ── */
@media (max-width: 767.98px) {
.form-control, .form-select, .form-control-sm, .form-select-sm {
font-size: 16px !important;
}
}
/* ── nativa-panel — Header ── */
@media (max-width: 767.98px) {
.nativa-panel-header { padding: 10px 12px; }
/* Los botones del header pueden saltar a segunda línea */
.nativa-panel-header > .d-flex { flex-wrap: wrap; gap: 6px; }
/* Input de búsqueda flexible */
.nativa-panel-header .input-group { flex: 1 1 140px; min-width: 140px; }
}
/* ── nativa-panel — Body: scroll horizontal para tablas ── */
@media (max-width: 767.98px) {
/* Habilitar scroll horizontal en el cuerpo cuando no viene del HTML */
.nativa-panel-body:not([style*="overflow"]) { overflow-x: auto; }
}
/* ── nativa-panel — Footer: paginación compacta ── */
@media (max-width: 767.98px) {
.nativa-panel-footer { padding: 6px 12px; flex-wrap: wrap; font-size: .73rem; }
/* Ocultar contador "Mostrando X de Y" para ahorrar espacio */
.nativa-panel-footer > span:first-child { display: none; }
}
.btn-xs {
padding: .1rem .35rem;
font-size: .75rem;
line-height: 1.4;
border-radius: .2rem;
}
/* ── Targets táctiles ── */
@media (max-width: 767.98px) {
/* Botones con área táctil cómoda (44 × 44 px recomendado por WCAG) */
.btn:not(.btn-sm):not(.btn-xs) { min-height: 40px; }
.nativa-pag-btn { min-width: 34px; min-height: 30px; }
}
/* ── Modales — casi pantalla completa en celular ── */
@media (max-width: 575.98px) {
/* Todos los modales ceden espacio al viewport */
.modal-dialog {
margin: 0.25rem;
max-width: calc(100vw - 0.5rem);
}
/* Modales grandes: altura casi completa con scroll interno */
.modal-dialog.modal-lg,
.modal-dialog.modal-xl {
height: calc(100dvh - 2rem);
max-height: calc(100dvh - 2rem);
display: flex;
flex-direction: column;
}
.modal-dialog.modal-lg .modal-content,
.modal-dialog.modal-xl .modal-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-dialog.modal-lg .modal-body,
.modal-dialog.modal-xl .modal-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Reducir padding interior de modales en móvil */
.modal-body { padding: 1rem; }
.modal-header, .modal-footer { padding: 0.75rem 1rem; }
}
/* ── Offcanvas: ancho máximo en pantallas pequeñas ── */
@media (max-width: 767.98px) {
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
width: min(340px, calc(100vw - 32px)) !important;
}
}
/* ── Centro de Ayuda ── */
@media (max-width: 767.98px) {
.ayuda-subheader { padding: 8px 14px; gap: 8px; }
}
/* ── Landings públicas ── */
@media (max-width: 767.98px) {
/* Grid de empleos: 1 columna */
.em-puestos-grid { grid-template-columns: 1fr; gap: 12px; }
/* Reducir padding de heroes */
.pay-hero-inner { padding: 36px 16px; }
/* Ocultar mockup decorativo del hero pay/empleos en móvil */
.pay-hero-mockup { display: none; }
}
/* ── Tipografía: encabezados adaptativos ── */
@media (max-width: 767.98px) {
.fs-5 { font-size: 0.95rem !important; }
}
/* ── Tour de bienvenida ─────────────────────────────────────────────────── */
.tour-overlay { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
.tour-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
pointer-events: all;
}
.tour-highlight-ring {
position: fixed; z-index: 8002;
border-radius: 10px;
border: 2px solid var(--accent);
box-shadow: 0 0 0 9999px rgba(0,0,0,.55), 0 0 0 4px rgba(37,99,235,.25), 0 0 24px rgba(37,99,235,.35);
pointer-events: none;
transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
}
.tour-card {
position: fixed; z-index: 8003;
width: 310px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 20px 20px 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.45);
pointer-events: all;
display: flex; gap: 14px;
animation: tour-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tour-pop {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: scale(1); }
}
.tour-card-icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(37,99,235,.12);
display: flex; align-items: center; justify-content: center;
color: var(--accent2); font-size: 17px;
}
.tour-card-body { flex: 1; min-width: 0; }
.tour-progress { display: flex; gap: 5px; margin-bottom: 10px; }
.tour-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--border); transition: background .2s, width .2s;
}
.tour-dot.active { width: 18px; border-radius: 3px; background: var(--accent); }
.tour-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tour-card-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; }
.tour-card-actions { display: flex; flex-direction: column; gap: 10px; }
.tour-btn-skip {
font-size: 11px; color: var(--muted); background: none; border: none;
padding: 0; cursor: pointer; text-align: left;
}
.tour-btn-skip:hover { color: var(--text); text-decoration: underline; }
.tour-nav { display: flex; gap: 6px; align-items: center; }
.tour-btn-prev {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
.tour-btn-prev:disabled { opacity: .35; cursor: default; }
.tour-btn-prev:not(:disabled):hover { background: var(--hover); }
.tour-btn-next {
flex: 1; height: 32px; padding: 0 14px; border-radius: 8px;
background: var(--accent); border: none;
color: #fff; font-size: 13px; font-weight: 600;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tour-btn-next:hover { opacity: .88; }
.tour-close {
position: absolute; top: 10px; right: 10px;
width: 24px; height: 24px; border-radius: 6px;
background: none; border: none; color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 13px;
}
.tour-close:hover { background: var(--hover); color: var(--text); }
.tour-relaunch-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: 999px;
background: none; border: 1px solid var(--border);
color: var(--muted); font-size: 12px; cursor: pointer;
margin-top: 8px; transition: color .15s, border-color .15s;
}
.tour-relaunch-btn:hover { color: var(--accent2); border-color: var(--accent); }
/* ── Botón de búsqueda en header ── */
.header-search-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 16px; border-radius: 10px; min-width: 220px; height: 34px;
background: var(--input-bg);
border: 1.5px solid var(--border);
color: var(--muted); font-size: 13px; cursor: pointer;
transition: border-color .15s, box-shadow .15s, color .15s;
white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.header-search-btn:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
color: var(--text);
}
.header-search-btn .fa-magnifying-glass { font-size: 13px; flex-shrink: 0; }
.header-search-label { flex: 1; text-align: left; font-size: 13px; }
.header-search-kbd {
background: var(--border); color: var(--muted);
border-radius: 5px; padding: 2px 7px; font-size: 10px;
font-family: inherit; margin-left: auto; flex-shrink: 0;
}
@media (max-width: 700px) {
.header-search-label, .header-search-kbd { display: none; }
.header-search-btn { padding: 7px 11px; min-width: unset; }
}
/* ── Agente lanzador (welcome screen) ── */
/* Oculta elementos con ng-cloak hasta que AngularJS los compila */
[ng-cloak] { display: none !important; }
/* ── Agente overlay (command palette) ── */
@keyframes agente-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes agente-slide-in { from { transform: translateY(-12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.agente-hint, .agente-no-results {
display: flex; align-items: center; gap: 10px;
padding: 20px 18px; color: var(--muted); font-size: 13px;
}
.agente-hint i, .agente-no-results i { font-size: 15px; flex-shrink: 0; }
.agente-lista { padding: 6px; }
.agente-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 10px; cursor: pointer;
text-decoration: none; color: var(--text);
transition: background .12s;
}
.agente-item:hover, .agente-item--active {
background: rgba(var(--accent-rgb), .09);
}
.agente-item-main {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.agente-item-title {
font-size: 14px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agente-item-desc {
font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agente-item-path {
font-size: 11px; color: var(--muted);
background: rgba(var(--accent-rgb), .1);
border-radius: 6px; padding: 2px 8px;
white-space: nowrap; font-family: monospace;
}
.agente-section-label {
padding: 6px 12px 2px;
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--muted);
}
.agente-section-label--smart { color: var(--accent); display: flex; align-items: center; gap: 5px; }
.agente-ayuda-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 18px; font-size: 13px; color: var(--muted);
cursor: pointer; text-decoration: none;
transition: background .12s, color .12s;
}
.agente-ayuda-link:hover {
background: rgba(var(--accent-rgb), .07); color: var(--accent);
}
.agente-ayuda-link i:first-child { font-size: 14px; flex-shrink: 0; }
.agente-ayuda-link span { flex: 1; }
.agente-ayuda-arrow { font-size: 11px; margin-left: auto; }
.agente-footer {
display: flex; align-items: center; gap: 16px;
padding: 10px 18px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--muted);
}
.agente-footer kbd {
background: var(--border); border-radius: 4px;
padding: 1px 5px; font-family: inherit;
}
/* ── amel-IA modal unificado ── */
.amelia-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
padding: 24px 16px;
animation: agente-fade-in .12s ease;
}
.amelia-modal {
width: 100%; max-width: 600px; margin: 0 16px;
background: var(--card-bg, var(--bg));
border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 24px 64px rgba(0,0,0,.28);
overflow: hidden;
display: flex; flex-direction: column;
height: 400px;
max-height: calc(100dvh - 48px);
animation: agente-slide-in .14s ease;
transition: max-width .2s ease, height .2s ease, max-height .2s ease;
}
.amelia-modal--chat {
max-width: 780px;
height: calc(100dvh - 48px);
max-height: 820px;
}
.amelia-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-top: 1px solid var(--border);
flex-shrink: 0; order: 2; /* input al fondo del modal (resultados arriba) */
}
.amelia-header-avatar {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg,#7c3aed,#a855f7);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-style: italic; font-size: 13px;
}
.amelia-header input {
flex: 1; background: none; border: none; outline: none;
color: var(--text); font-size: 15px; min-width: 0;
}
.amelia-header input::placeholder { color: var(--muted); }
.amelia-send-btn {
background: linear-gradient(135deg,#7c3aed,#a855f7); color: #fff;
border: none; border-radius: 8px; padding: 5px 12px;
font-size: 13px; cursor: pointer; flex-shrink: 0;
transition: opacity .15s;
}
.amelia-send-btn:disabled { opacity: .4; cursor: default; }
.amelia-esc-btn {
background: var(--border); color: var(--muted);
border: none; border-radius: 6px; padding: 3px 8px;
font-size: 11px; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.amelia-esc-btn:hover { background: rgba(var(--accent-rgb),.15); color: var(--accent); }
/* Body: contenedor position:relative — los paneles se apilan dentro */
.amelia-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.amelia-panel {
position: absolute; inset: 0; overflow-y: auto;
background: var(--card-bg, var(--bg));
}
.amelia-panel--routes { z-index: 5; overflow-y: hidden; display: flex; flex-direction: column; }
.agente-lista { overflow-y: auto; flex: 1; min-height: 0; padding: 6px; }
/* Chat */
.amelia-chat {
position: absolute; inset: 0;
display: flex; flex-direction: column;
background: var(--card-bg, var(--bg));
}
.amelia-messages {
flex: 1; overflow-y: auto; padding: 14px 16px;
display: flex; flex-direction: column; gap: 12px;
}
.amelia-chat-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px; border-top: 1px solid var(--border); flex-shrink: 0; gap: 8px;
}
/* Footer fijo: atajos de teclado + uso diario */
.amelia-kb-footer { flex-shrink: 0; border-top: 1px solid var(--border); order: 3; }
.amelia-nueva-btn {
background: none; border: 1px solid var(--border); border-radius: 8px;
padding: 4px 12px; font-size: 12px; color: var(--muted); cursor: pointer;
display: flex; align-items: center; gap: 6px; white-space: nowrap;
transition: border-color .15s, color .15s;
}
.amelia-nueva-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Barra de uso diario — vive en amelia-kb-footer */
.amelia-uso {
padding: 4px 16px 8px;
}
.amelia-kb-footer .agente-footer { border-top: none; }
.amelia-uso-top {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;
}
.amelia-uso-label { font-size: 11px; color: var(--muted); }
.amelia-uso-right { display: flex; align-items: center; gap: 4px; }
.amelia-uso-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.amelia-uso-pct { font-size: 11px; color: var(--muted); opacity: .7; font-variant-numeric: tabular-nums; }
.amelia-uso-reset { font-size: 11px; color: var(--muted); opacity: .7; }
.amelia-uso-count--warn { color: #d97706; }
.amelia-uso-count--danger { color: #dc2626; font-weight: 600; }
.amelia-uso-bar {
height: 4px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.amelia-uso-fill {
height: 100%; background: #7c3aed; border-radius: 99px;
transition: width .4s ease, background .4s ease;
min-width: 0;
}
.amelia-uso-fill--warn { background: #d97706; }
.amelia-uso-fill--danger { background: #dc2626; }
/* Trigger en welcome screen */
.welcome-search-box--trigger {
cursor: pointer; user-select: none;
transition: border-color .15s, box-shadow .15s;
}
.welcome-search-box--trigger:hover {
border-color: #7c3aed;
box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.welcome-search-placeholder { flex: 1; color: var(--muted); font-size: 14px; }
/* ── Tickets Kanban ─────────────────────────────────────────────────────────── */
.ca-kb-col {
background: var(--bs-tertiary-bg);
border-radius: 10px;
padding: 10px 8px 10px;
transition: background .15s ease, outline .15s ease;
}
.ca-kb-col.ca-kb-drop-over {
background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-tertiary-bg));
outline: 2px dashed var(--bs-primary);
outline-offset: -2px;
}
.ca-kb-card {
background: var(--bs-body-bg);
transition: opacity .15s ease;
}
.ca-kb-card.ca-kb-dragging {
opacity: .35;
cursor: grabbing;
}
.ca-kb-empty {
border-style: dashed !important;
}
.ca-kb-arch-btn {
position: absolute; top: 6px; right: 6px;
padding: 2px 5px; line-height: 1;
color: var(--bs-secondary-color);
background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: 6px;
opacity: 0; transition: opacity .15s ease;
pointer-events: none;
}
.ca-kb-card:hover .ca-kb-arch-btn {
opacity: 1;
pointer-events: auto;
}
.ca-kb-arch-btn:hover {
color: var(--bs-danger);
border-color: var(--bs-danger);
}
.ca-usr-result:hover {
background: var(--bs-tertiary-bg) !important;
}
.ca-kb-card.ca-kb-selected {
outline: 2px solid var(--bs-primary);
outline-offset: -1px;
background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
}
/* ── Mensajes: fondo con patrón tipo WhatsApp ──────────────── */
.mensajes-chat-bg {
background-color: #e5ddd5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' opacity='.08'%3E%3Cpath d='M40 2L78 40L40 78L2 40Z'/%3E%3Cpath d='M40 22L58 40L40 58L22 40Z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-bs-theme='dark'] .mensajes-chat-bg {
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1' opacity='.05'%3E%3Cpath d='M40 2L78 40L40 78L2 40Z'/%3E%3Cpath d='M40 22L58 40L40 58L22 40Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* ── JSON viewer ────────────────────────────────────────────── */
.log-json-pre, .log-raw-pre {
background: #0d1117;
color: #e6edf3;
font-size: .78rem;
line-height: 1.6;
padding: .75rem 1rem 1rem;
overflow-x: auto;
border-radius: 0 0 .375rem .375rem;
max-height: 480px;
overflow-y: auto;
white-space: pre;
word-break: normal;
}
.log-json-pre .json-key { color: #79c0ff; }
.log-json-pre .json-str { color: #a5d6ff; }
.log-json-pre .json-num { color: #ffa657; }
.log-json-pre .json-bool { color: #ff7b72; }
.log-json-pre .json-null { color: #8b949e; }
/* ── Cookie banner ──────────────────────────────────────────── */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 0.9rem 1rem;
border-top: 1px solid var(--border);
animation: cookie-slide-up 0.35s cubic-bezier(.22,.68,0,1.2) both;
}
[data-bs-theme="dark"] .cookie-banner {
background: #0d1418;
box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
}
[data-bs-theme="light"] .cookie-banner {
background: #ffffff;
box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
}
@keyframes cookie-slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cookie-banner-inner {
max-width: 960px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.cookie-banner-icon {
color: var(--accent);
font-size: 1.25rem;
flex-shrink: 0;
}
.cookie-banner-text {
flex: 1;
min-width: 200px;
font-size: 0.875rem;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
.cookie-banner-text strong {
color: var(--text);
}
.cookie-banner-link {
color: var(--accent);
text-decoration: underline;
font-weight: 500;
}
.cookie-banner-link:hover { opacity: 0.8; }
.cookie-banner-btn {
flex-shrink: 0;
padding: 0.5rem 1.4rem;
border-radius: 8px;
border: none;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
background: linear-gradient(90deg, var(--accent), var(--accent2, var(--accent)));
color: #fff;
transition: opacity 0.18s;
}
.cookie-banner-btn:hover { opacity: 0.87; }
/* ══ Alumnos · modal de padres / tutores ════════════════════════════════════ */
.pt-section {
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 0.6rem;
padding: 0.85rem 1rem 1rem;
background: var(--bs-body-bg, #fff);
transition: opacity 0.15s ease;
}
.pt-section.pt-off { opacity: 0.6; }
.pt-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.65);
z-index: 5;
border-radius: 0.5rem;
}
/* ══ Alumnos · offcanvas de acciones por fila ════════════════════════════════ */
.acciones-offcanvas { padding: 0.4rem 0; }
.acciones-offcanvas .acc-group-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: var(--bs-secondary-color, #6b7280);
padding: 0.7rem 1.1rem 0.25rem;
}
.acciones-offcanvas .acc-item {
display: flex;
align-items: center;
width: 100%;
border: 0;
background: transparent;
text-align: left;
padding: 0.6rem 1.1rem;
font-size: 0.9rem;
color: var(--bs-body-color);
transition: background-color 0.12s ease;
}
.acciones-offcanvas .acc-item:hover,
.acciones-offcanvas .acc-item:focus { background-color: var(--bs-tertiary-bg, #f1f3f5); }
.acciones-offcanvas .acc-item .acc-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
margin-right: 0.7rem;
flex-shrink: 0;
}
.acciones-offcanvas .acc-item.text-danger:hover { background-color: var(--bs-danger-bg-subtle, #f8d7da); }
.acciones-offcanvas .acc-item.text-danger .acc-ic { color: inherit; }
.acciones-offcanvas .acc-divider {
height: 1px;
background: var(--bs-border-color, #e5e7eb);
margin: 0.4rem 1.1rem;
}
/* ── Planes de precios (Dev Admin · gestionados desde Apps) ──────────────────── */
.dh-fac-tabs {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-bottom: 14px;
}
.dh-fac-tab {
padding: 4px 16px; border-radius: 999px;
border: 1px solid var(--bs-border-color, #e5e7eb); background: transparent;
font-size: 13px; color: var(--bs-secondary-color, #6c757d); cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.dh-fac-tab:hover { background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color); }
.dh-fac-tab.active {
background: rgba(139,92,246,.1); border-color: #8b5cf6;
color: #8b5cf6; font-weight: 600;
}
.dh-plan-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.9rem;
}
.dh-plan-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bs-card-bg, #fff);
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dh-plan-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.dh-plan-card--danger { border-color: var(--bs-danger, #dc3545) !important; }
.dh-plan-card-hd {
padding: 18px 14px 16px; font-size: 15px; font-weight: 700; text-align: center;
background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color);
}
.dh-plan-card-body {
padding: 14px 14px 10px; flex: 1;
display: flex; flex-direction: column; align-items: center;
background: var(--bs-card-bg, #fff);
}
.dh-plan-price {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.dh-plan-amount {
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
color: var(--bs-body-color);
}
.dh-plan-cur {
font-size: 0.72rem;
color: var(--bs-secondary-color, #6c757d);
display: flex;
flex-direction: column;
line-height: 1.1;
}
.dh-plan-cur small { font-size: 0.7rem; }
.dh-plan-actions {
display: flex;
gap: 0.4rem;
padding: 0.7rem 0.9rem;
border-top: 1px solid var(--bs-border-color, #e5e7eb);
background: var(--bs-card-bg, #fff);
}
.dh-plan-confirm {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
min-height: 140px;
padding: 1rem;
}
.dh-plan-card--add {
align-items: center;
justify-content: center;
text-align: center;
border-style: dashed;
color: var(--bs-secondary-color, #6c757d);
cursor: pointer;
min-height: 140px;
background: transparent;
padding: 1rem;
}
.dh-plan-card--add:hover {
color: #8b5cf6;
border-color: #8b5cf6;
background: rgba(139, 92, 246, 0.05);
}
.dh-plan-form {
background: var(--bs-card-bg, #fff);
border: 1px solid var(--bs-border-color, #e5e7eb);
border-radius: 14px;
padding: 1.2rem;
}
/* ── Estilos de plan (apps_planes.estilo) ────────────────────────────────────────
Presets de diseño elegibles por plan en /dev/admin/apps · Planes. La MISMA clase
viste la tarjeta del admin (.dh-plan-card) y la de tienda/landing (.sp-card).
Preset nuevo: clase aquí + opción en $scope.estilosPlan (AppsCtrl) + estiloPlan() (soluciones.php). */
/* Amarillo (dorado) — solo acento, sin fondo propio */
.dh-plan-card.plan-estilo-amarillo, .sp-card.plan-estilo-amarillo { border-color:#eab308; }
.sp-card.plan-estilo-amarillo { border-top-color:#eab308; }
.plan-estilo-amarillo .dh-plan-card-hd { background:rgba(234,179,8,.12); }
.plan-estilo-amarillo .dh-plan-card-hd, .plan-estilo-amarillo .dh-plan-amount,
.plan-estilo-amarillo .sp-name, .plan-estilo-amarillo .sp-amount { color:#ca8a04; }
.plan-estilo-amarillo .sp-btn { background:#eab308; color:#1f2937; }
.plan-estilo-amarillo .sp-btn:hover { background:#ca8a04; color:#1f2937; }
/* Verde */
.dh-plan-card.plan-estilo-verde, .sp-card.plan-estilo-verde { border-color:#16a34a; }
.sp-card.plan-estilo-verde { border-top-color:#16a34a; }
.plan-estilo-verde .dh-plan-card-hd { background:rgba(22,163,74,.12); }
.plan-estilo-verde .dh-plan-card-hd, .plan-estilo-verde .dh-plan-amount,
.plan-estilo-verde .sp-name, .plan-estilo-verde .sp-amount { color:#15803d; }
.plan-estilo-verde .sp-btn { background:#16a34a; }
.plan-estilo-verde .sp-btn:hover { background:#15803d; }
/* Azul */
.dh-plan-card.plan-estilo-azul, .sp-card.plan-estilo-azul { border-color:#2563eb; }
.sp-card.plan-estilo-azul { border-top-color:#2563eb; }
.plan-estilo-azul .dh-plan-card-hd { background:rgba(37,99,235,.12); }
.plan-estilo-azul .dh-plan-card-hd, .plan-estilo-azul .dh-plan-amount,
.plan-estilo-azul .sp-name, .plan-estilo-azul .sp-amount { color:#1d4ed8; }
.plan-estilo-azul .sp-btn { background:#2563eb; }
.plan-estilo-azul .sp-btn:hover { background:#1d4ed8; }
/* Plan actual / Más popular: el preset del plan manda sobre el azul de .sp-actual y el
verde de .sp-popular (borde, badge y botón). !important para ganarle también
a .sp-actual y al borde de popular re-declarado en el bloque de modo oscuro. */
.sp-badge-actual { background:#0d6efd; }
.sp-card.sp-actual.plan-estilo-amarillo, .sp-card.sp-popular.plan-estilo-amarillo { border-color:#eab308 !important; }
.sp-card.sp-actual.plan-estilo-verde, .sp-card.sp-popular.plan-estilo-verde { border-color:#16a34a !important; }
.sp-card.sp-actual.plan-estilo-azul, .sp-card.sp-popular.plan-estilo-azul { border-color:#2563eb !important; }
/* Badges "Plan actual" y "Más popular" con el color del preset */
.plan-estilo-amarillo .sp-badge-pop { background:#eab308; color:#1f2937; }
.plan-estilo-verde .sp-badge-pop { background:#16a34a; }
.plan-estilo-azul .sp-badge-pop { background:#2563eb; }
/* Botón: .sp-popular lo pinta verde; el preset lo regresa a su color */
.sp-popular.plan-estilo-amarillo .sp-btn { background:#eab308; color:#1f2937; }
.sp-popular.plan-estilo-amarillo .sp-btn:hover { background:#ca8a04; color:#1f2937; }
.sp-popular.plan-estilo-verde .sp-btn { background:#16a34a; }
.sp-popular.plan-estilo-verde .sp-btn:hover { background:#15803d; }
.sp-popular.plan-estilo-azul .sp-btn { background:#2563eb; }
.sp-popular.plan-estilo-azul .sp-btn:hover { background:#1d4ed8; }
/* Modo oscuro: tonos claros para el texto de acento (admin y tienda) */
[data-bs-theme="dark"] .plan-estilo-amarillo .dh-plan-card-hd,
[data-bs-theme="dark"] .plan-estilo-amarillo .dh-plan-amount,
[data-bs-theme="dark"] .plan-estilo-amarillo .sp-name,
[data-bs-theme="dark"] .plan-estilo-amarillo .sp-amount { color:#facc15; }
[data-bs-theme="dark"] .plan-estilo-verde .dh-plan-card-hd,
[data-bs-theme="dark"] .plan-estilo-verde .dh-plan-amount,
[data-bs-theme="dark"] .plan-estilo-verde .sp-name,
[data-bs-theme="dark"] .plan-estilo-verde .sp-amount { color:#4ade80; }
[data-bs-theme="dark"] .plan-estilo-azul .dh-plan-card-hd,
[data-bs-theme="dark"] .plan-estilo-azul .dh-plan-amount,
[data-bs-theme="dark"] .plan-estilo-azul .sp-name,
[data-bs-theme="dark"] .plan-estilo-azul .sp-amount { color:#60a5fa; }
/* ── Pricing de soluciones (landing + tienda) — diseño único ─────────────────── */
.sp-wrap { max-width: 1060px; margin: 0 auto; padding: 60px 16px; text-align: center; }
.sp-eyebrow { display:inline-block; background:rgba(13,110,253,.12); color:#0d6efd; font-size:.8rem; font-weight:600; padding:.35rem .95rem; border-radius:999px; margin-bottom:.7rem; }
.sp-title { font-weight:800; font-size:2.3rem; color:var(--accent,#0d6efd); margin:0 0 .45rem; }
.sp-sub { color:#6b7280; font-size:1.05rem; margin:0 0 2.6rem; }
.sp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:860px){ .sp-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
/* Con 1 o 2 planes, centrar las tarjetas en vez de dejarlas a la izquierda */
@media (min-width:861px){
.sp-grid--1 { grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; }
.sp-grid--2 { grid-template-columns:repeat(2,1fr); max-width:720px; margin-left:auto; margin-right:auto; }
/* Fila incompleta con UNA tarjeta huérfana (4, 7... planes): centrarla bajo la columna media */
.sp-grid--4 > .sp-card:last-child, .sp-grid--7 > .sp-card:last-child { grid-column: 2; }
}
.sp-card { position:relative; background:#fff; border:1px solid #e5e7eb; border-top:4px solid #94a3b8; border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; text-align:left; }
/* Tarjeta ELEGIDA en selectores clicables (p. ej. modal de /dev/admin/suscripciones) */
.sp-card--sel { border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.18); }
.sp-tier-1 { border-top-color:#6366f1; } /* índigo: acento de tier, NO verde (el verde es exclusivo del popular) */
.sp-tier-2 { border-top-color:#0f172a; }
.sp-popular { border-color:#22c55e; }
.sp-actual { border-color:#0d6efd !important; }
.sp-modelo { font-size:.72rem; color:#6b7280; font-weight:600; margin:-.5rem 0 .9rem; }
@media (min-width:861px){ .sp-popular{ transform:scale(1.05);} }
.sp-badge-pop { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#22c55e; color:#fff; font-size:.72rem; font-weight:700; padding:.28rem .85rem; border-radius:999px; letter-spacing:.03em; white-space:nowrap; }
.sp-name { font-weight:700; font-size:1.2rem; color:#111827; margin-bottom:.5rem; }
.sp-price { display:flex; align-items:baseline; gap:.4rem; margin:.1rem 0 1.1rem; }
.sp-amount { font-weight:800; font-size:2.7rem; line-height:1; color:#111827; }
.sp-cur { color:#6b7280; font-size:.85rem; font-weight:600; }
.sp-off { display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; margin:-.75rem 0 1.1rem; padding:.22rem .6rem; border-radius:999px; background:rgba(34,197,94,.14); color:#15803d; font-size:.75rem; font-weight:700; }
/* Precio de lista tachado (encima del precio exclusivo de la org) */
.sp-antes { font-size:.8rem; color:#6b7280; font-weight:600; margin:0 0 .15rem; }
.sp-antes s { color:#9ca3af; }
.sp-modelo--org { color:#2563eb; }
.sp-desc { color:#6b7280; font-size:.85rem; margin-bottom:1.1rem; }
.sp-feats { list-style:none; padding:0; margin:0 0 1.6rem; flex:1; }
.sp-feats li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:#374151; padding:.4rem 0; border-top:1px solid #f1f5f9; }
.sp-feats li:first-child { border-top:0; }
.sp-feats li.sp-no { color:#9ca3af; }
.sp-feats i { margin-top:.2rem; font-size:.95rem; }
.sp-btn { display:block; width:100%; border:0; text-align:center; background:#0d6efd; color:#fff; font-weight:600; font-size:1rem; padding:.8rem 1rem; border-radius:12px; text-decoration:none; transition:background .15s ease; }
.sp-btn:hover { background:#0b5ed7; color:#fff; }
/* Plan ACTUAL: conserva el color del plan (azul/verde/preset) con su texto legible;
solo se marca como "ya contratado" (atenuado, sin hover ni clic). Antes lo forzaba
a gris y el texto quedaba ILEGIBLE sobre los presets de color (fondo del preset
ganaba por especificidad, pero el color gris del texto sí se aplicaba). */
.sp-btn--actual { cursor:default; opacity:.72; pointer-events:none; }
.sp-popular .sp-btn { background:#22c55e; }
.sp-popular .sp-btn:hover { background:#16a34a; }
.sp-factabs { display:inline-flex; gap:6px; background:#eef2f7; border-radius:999px; padding:5px; margin:0 0 2.2rem; }
.sp-factab { border:0; background:transparent; color:#475569; font-weight:600; font-size:.85rem; padding:.45rem 1.15rem; border-radius:999px; cursor:pointer; transition:all .15s ease; }
.sp-factab:hover { color:#0d6efd; }
.sp-factab.active { background:#fff; color:#0d6efd; box-shadow:0 2px 6px rgba(0,0,0,.10); }
/* ── Modo oscuro: la sp-card es blanca por default; aquí toma la superficie del tema.
Solo se recolorean los lados laterales/inferior del borde para NO pisar el acento
superior (sp-tier-* / preset); el borde completo de preset/popular se re-declara
con más especificidad para conservar su color. ── */
[data-bs-theme="dark"] .sp-card {
background:var(--card,#0d1418);
border-left-color:var(--bs-border-color,#1f2c33);
border-right-color:var(--bs-border-color,#1f2c33);
border-bottom-color:var(--bs-border-color,#1f2c33);
}
[data-bs-theme="dark"] .sp-card.sp-popular { border-color:#22c55e; }
[data-bs-theme="dark"] .sp-card.plan-estilo-amarillo { border-color:#eab308; }
[data-bs-theme="dark"] .sp-card.plan-estilo-verde { border-color:#16a34a; }
[data-bs-theme="dark"] .sp-card.plan-estilo-azul { border-color:#2563eb; }
[data-bs-theme="dark"] .sp-name, [data-bs-theme="dark"] .sp-amount { color:var(--bs-body-color,#e9edef); }
[data-bs-theme="dark"] .sp-cur, [data-bs-theme="dark"] .sp-desc,
[data-bs-theme="dark"] .sp-antes, [data-bs-theme="dark"] .sp-modelo { color:var(--bs-secondary-color,#b0bec5); }
[data-bs-theme="dark"] .sp-antes s { color:#64748b; }
[data-bs-theme="dark"] .sp-feats li { color:#cbd5e1; border-top-color:rgba(255,255,255,.08); }
[data-bs-theme="dark"] .sp-feats li.sp-no { color:#64748b; }
[data-bs-theme="dark"] .sp-factabs { background:#111c22; }
[data-bs-theme="dark"] .sp-factab { color:#b0bec5; }
[data-bs-theme="dark"] .sp-factab.active { background:var(--card,#0d1418); color:#60a5fa; box-shadow:0 2px 6px rgba(0,0,0,.4); }
/* ── Planes compactos: store de soluciones (#sol-planes) y detalle de app ─────── */
.sp-compact .sp-title { font-size:1.6rem; margin-bottom:.35rem; }
.sp-compact .sp-sub { font-size:.9rem; margin-bottom:1.6rem; }
.sp-compact .sp-factabs { margin-bottom:1.6rem; }
.sp-compact.sp-grid, .sp-compact .sp-grid { gap:16px; }
.sp-compact .sp-card { padding:20px 18px; border-radius:14px; border-top-width:3px; }
.sp-compact .sp-name { font-size:1rem; margin-bottom:.35rem; }
.sp-compact .sp-price { margin:.1rem 0 .75rem; }
.sp-compact .sp-amount { font-size:1.9rem; }
.sp-compact .sp-cur { font-size:.75rem; }
.sp-compact .sp-off { margin:-.45rem 0 .75rem; font-size:.7rem; padding:.18rem .5rem; }
.sp-compact .sp-modelo { font-size:.68rem; margin:-.35rem 0 .6rem; }
.sp-compact .sp-antes { font-size:.72rem; }
.sp-compact .sp-desc { font-size:.78rem; margin-bottom:.75rem; }
.sp-compact .sp-feats { margin-bottom:1rem; }
.sp-compact .sp-feats li { font-size:.82rem; padding:.3rem 0; gap:.5rem; }
.sp-compact .sp-feats i { font-size:.85rem; }
.sp-compact .sp-badge-pop { font-size:.66rem; padding:.24rem .7rem; top:-11px; }
.sp-compact .sp-btn { font-size:.9rem; padding:.6rem 1rem; border-radius:10px; }
/* ── Ícono de info de las capacidades → tooltip de Bootstrap ───────────────────
El texto de la capacidad y su ícono viven juntos en .sp-feat-txt para que el
ícono quede pegado y alineado al texto; antes era un flex-item suelto del ,
separado por el gap (se veía "flotando"). vertical-align:middle lo centra con la
línea de texto y margin-top:0 anula el de ".sp-feats i" (pensado para el check). */
.sp-feats .sp-feat-txt { flex:1; min-width:0; }
.sp-feat-info { margin-left:.15rem; font-size:.8em; opacity:.5; cursor:help; vertical-align:middle; }
.sp-feats i.sp-feat-info { margin-top:0; font-size:.8em; }
/* ── Botón de suscripción (dh-plan-badge) ───────────────────────────────────── */
.dh-plan-wrap { display:flex; flex-direction:column; gap:.45rem; width:100%; }
.dh-plan-btn { display:flex; width:100%; align-items:center; gap:.6rem; padding:.6rem .7rem; border:1px solid var(--bs-border-color,#dee2e6); border-radius:12px; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529); cursor:pointer; line-height:1.15; text-align:left; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.dh-plan-btn:hover { border-color:#0d6efd; box-shadow:0 4px 14px rgba(13,110,253,.18); }
.dh-plan-btn:active { transform:translateY(1px); }
.dh-plan-btn-ico { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:#0d6efd; color:#fff; font-size:1rem; flex-shrink:0; }
.dh-plan-btn-txt { display:flex; flex-direction:column; align-items:flex-start; min-width:0; flex:1; }
.dh-plan-btn-txt small { font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#6c757d); line-height:1; }
.dh-plan-btn-txt strong { font-size:1rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.dh-plan-btn-gear { font-size:.85rem; color:var(--muted,#6c757d); margin-left:auto; flex-shrink:0; }
.dh-plan-btn--alert { border-color:#f59e0b; }
.dh-plan-btn--alert .dh-plan-btn-ico { background:#f59e0b; }
.dh-plan-btn--danger { border-color:#ef4444; }
.dh-plan-btn--danger .dh-plan-btn-ico { background:#ef4444; }
.dh-plan-btn--loading { cursor:default; }
.dh-plan-btn--loading:hover { border-color:var(--bs-border-color,#dee2e6); box-shadow:none; }
.dh-plan-btn--loading .dh-plan-btn-ico { background:var(--muted,#6c757d); }
.dh-plan-skeleton { color:var(--muted,#6c757d); animation:dhPlanPulse 1s ease-in-out infinite; }
@keyframes dhPlanPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.dh-plan-alert { display:flex; width:100%; align-items:center; justify-content:center; border:0; border-radius:9px; padding:.4rem .6rem; font-size:.74rem; font-weight:600; cursor:pointer; }
.dh-plan-alert--warn { background:rgba(245,158,11,.16); color:#b45309; }
.dh-plan-alert--danger { background:rgba(239,68,68,.16); color:#dc2626; }
/* El custom element ocupa su propio bloque (footer del shell y franja del contenido). */
dh-plan-badge { display:block; }
/* Modo franja: barra ancha encima del contenido de la app (solo si hay algo pendiente). */
.dh-plan-wrap--banner { margin:0 0 .85rem; }
.dh-plan-wrap--banner .dh-plan-alert { justify-content:space-between; gap:1rem; padding:.6rem 1rem; font-size:.82rem; border-radius:10px; }
.dh-plan-alert-cta { display:inline-flex; align-items:center; font-weight:700; white-space:nowrap; }
/* Modo chip (header / topbar): pastilla compacta junto al nombre de la app abierta.
display:contents → el custom element no genera caja: cuando NO hay chip (app sin plan
o sin alerta) no deja hueco por el gap del flex; cuando lo hay, el botón participa directo. */
dh-plan-badge[chip] { display:contents; }
.dh-plan-chip { display:inline-flex; align-items:center; gap:.35rem; max-width:180px; padding:.22rem .6rem; border:1px solid var(--bs-border-color,#dee2e6); border-radius:999px; background:var(--bs-body-bg,#fff); color:var(--bs-body-color,#212529); font-size:.75rem; font-weight:600; line-height:1.15; cursor:pointer; transition:filter .15s; }
.dh-plan-chip:hover { filter:brightness(.97); }
.dh-plan-chip > i { font-size:.72rem; opacity:.7; flex-shrink:0; }
.dh-plan-chip-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-plan-chip--warn { border-color:#f59e0b; background:rgba(245,158,11,.14); color:#b45309; }
.dh-plan-chip--danger { border-color:#ef4444; background:rgba(239,68,68,.14); color:#dc2626; }
.dh-plan-chip--warn > i, .dh-plan-chip--danger > i { opacity:1; }
/* Móvil: el chip solo aparece si hay alerta (evita el pill "Gratis" en un header angosto). */
@media (max-width: 575.98px) {
.dh-plan-chip:not(.dh-plan-chip--warn):not(.dh-plan-chip--danger) { display:none; }
.dh-plan-chip { max-width:130px; }
}
/* Panel de detalles de la suscripción actual (modal) */
.dh-plan-sub { border:1px solid var(--bs-border-color,#dee2e6); border-radius:12px; padding:1rem 1.1rem; background:var(--bs-tertiary-bg,#f8f9fa); }
.dh-plan-sub-hd { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.85rem; }
.dh-plan-sub-grid { display:flex; flex-direction:column; gap:0; }
.dh-plan-sub-item { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--bs-border-color,#dee2e6); }
.dh-plan-sub-item:last-child { border-bottom:0; }
.dh-plan-sub-item small { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#6c757d); white-space:nowrap; }
.dh-plan-sub-item strong { font-size:.92rem; text-align:right; }
.dh-plan-sub-note { margin-top:.85rem; font-size:.8rem; font-weight:600; padding:.5rem .75rem; border-radius:9px; line-height:1.3; }
.dh-plan-sub-note--warn { background:rgba(245,158,11,.14); color:#b45309; }
.dh-plan-sub-note--danger { background:rgba(239,68,68,.14); color:#b91c1c; }