/* Por si el panel llegaba a heredar un contenedor con overflow oculto */
/* esto es para nase de conocimientos */
/* Global */
#kb-hero, #kb-hero * {
box-sizing: border-box;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Hero */
#kb-hero {
--brand:#084e8a;
--brand-dk:#063964;
--ink:#0b2a6f;
--muted:#667085;
--bg:#f2f6fb;
--ring:rgba(8,78,138,.25);
padding:28px 12px;
background:var(--bg);
display: grid;
place-items: center;
}
/* Tarjeta principal */
#kb-hero .kb-card {
width: min(800px, 90vw); /* ancho reducido */
padding: clamp(20px, 3vw, 30px); /* padding más compacto verticalmente */
border-radius:24px;
background:
radial-gradient(1200px 420px at 50% -10%, rgba(8,78,138,.10), transparent 70%),
#fff;
border:1px solid #e7ecff;
box-shadow:0 14px 44px rgba(0,0,0,.16), 0 6px 20px rgba(0,0,0,.10);
margin:0 auto; /* centra la tarjeta */
}
/* Header */
#kb-hero .kb-head {
text-align: center;
margin-bottom:18px;
}
#kb-hero .kb-badge {
width:68px;
height:68px;
border-radius:999px;
margin:0 auto 8px;
display:grid;
place-items:center;
font-size:28px;
background:linear-gradient(180deg, #095b9f, var(--brand));
color:#fff;
box-shadow:0 8px 18px rgba(8,78,138,.25);
}
#kb-hero h2 {
margin:6px 0 4px;
color:var(--brand);
font-size:clamp(26px,3.4vw,36px);
font-weight:900;
}
#kb-hero p {
margin:0;
color:var(--muted);
font-size:clamp(14px,1.6vw,16px);
}
/* CTAs */
#kb-hero .kb-ctas {
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
margin:8px 0 16px;
}
#kb-hero .kb-btn {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:220px;
height:48px;
padding:0 18px;
border-radius:12px;
font-weight:800;
text-decoration:none;
border:1px solid transparent;
transition:transform .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#kb-hero .kb-solid {
background:var(--brand);
color:#fff;
box-shadow:0 8px 18px rgba(8,78,138,.18);
}
#kb-hero .kb-solid:hover {
background:var(--brand-dk);
transform:translateY(-2px);
}
#kb-hero .kb-outline {
background:#fff;
color:var(--brand);
border-color:var(--brand);
}
#kb-hero .kb-outline:hover {
background:var(--brand);
color:#fff;
transform:translateY(-2px);
}
#kb-hero .kb-ghost {
background:#f7faff;
color:var(--brand);
border-color:#e9edff;
}
#kb-hero .kb-ghost:hover {
background:#eef4ff;
transform:translateY(-2px);
}
/* Categorías */
#kb-hero .kb-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:4px;
}
#kb-hero .kb-cat {
display:flex;
align-items:flex-start;
gap:10px;
background:#f8fbff;
border:1px solid #e6eaff;
border-radius:14px;
padding:14px 14px;
text-decoration:none;
color:var(--ink);
transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
#kb-hero .kb-cat span {
font-size:22px;
line-height:1;
margin-top:2px;
}
#kb-hero .kb-cat strong {
display:block;
font-size:15px;
}
#kb-hero .kb-cat em {
display:block;
font-size:12.5px;
color:#7b89a6;
font-style:normal;
}
#kb-hero .kb-cat:hover {
transform:translateY(-2px);
background:#eef4ff;
border-color:#d9e6ff;
box-shadow:0 10px 22px rgba(8,78,138,.12);
}
/* Responsive */
@media (max-width:900px){
#kb-hero .kb-grid {
grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:560px){
#kb-hero .kb-card {
padding:12px 12px;
border-radius:18px;
}
#kb-hero .kb-grid {
grid-template-columns:1fr;
}
#kb-hero .kb-btn {
min-width:unset;
width:100%;
}
}
/* Ocultar “Cuentas y Accesos” */
li[role="option"][data-id*="_cuentas y accesos_"],
li[role="option"][data-id*="_Cuentas y Accesos_" i],
li[role="option"][data-id^="field_category_cuentas y accesos_"],
li[role="option"][data-id^="field_subCategory_cuentas y accesos_"],
div[data-id*="_cuentas y accesos_"],
div[data-id*="_Cuentas y Accesos_" i]{ display:none !important; }