/* =====================================================
STARFUS IA · INTERFAZ PRINCIPAL · CARBON EDITION v22
===================================================== */
:root {
--bg:#030712;--bg-soft:#07111f;--panel:rgba(8,17,31,.88);--panel-strong:rgba(10,21,39,.96);
--text:#f5f8ff;--muted:#94a3b8;--muted-2:#64748b;--blue:#1fa8ff;--blue-strong:#0077ff;
--cyan:#32d8ff;--green:#30d98b;--yellow:#f7c948;--orange:#ff7a1a;--purple:#9d7cff;
--danger:#ff5f6d;--border:rgba(148,163,184,.14);--border-blue:rgba(31,168,255,.30);
--shadow:0 25px 70px rgba(0,0,0,.52);--shadow-soft:0 12px 32px rgba(0,0,0,.30);
--radius-xl:28px;--radius-lg:20px;--radius-md:15px;--radius-sm:11px;
--carbon-size:8px 8px;
}

* {
box-sizing:border-box;
margin:0;
padding:0;
}

html {
scroll-behavior:smooth;
scroll-padding-top:110px;
}

body {
min-height:100vh;
overflow-x:hidden;
color:var(--text);
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:#02050c;
background-attachment:fixed;
}

body.carbon-bg {
background:
radial-gradient(circle at 50% -10%,rgba(31,168,255,.21),transparent 34%),
radial-gradient(circle at 92% 18%,rgba(157,124,255,.08),transparent 26%),
linear-gradient(180deg,rgba(4,10,20,.18),rgba(1,4,10,.64)),
repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.58) 0 1px,transparent 1px 4px),
#02050c;

background-size:
auto,
auto,
auto,
var(--carbon-size),
var(--carbon-size),
auto;

background-attachment:fixed;
}

body.carbon-bg::before {
content:"";
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;

background:
radial-gradient(circle at 50% 6%,rgba(31,168,255,.15),transparent 34%),
linear-gradient(
90deg,
rgba(0,0,0,.25),
transparent 35%,
transparent 65%,
rgba(0,0,0,.25)
);
}

body.carbon-bg::after {
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;

background:
linear-gradient(
180deg,
rgba(2,6,18,.08),
rgba(2,6,18,.28) 48%,
rgba(1,3,9,.58)
);
}

body.splash-active {
overflow:hidden;
}

button,
input {
font:inherit;
}

button {
color:inherit;
}

a {
color:inherit;
text-decoration:none;
}

img {
display:block;
max-width:100%;
}

button,
a {
-webkit-tap-highlight-color:transparent;
}


/* =====================================================
CONTENEDOR GENERAL
===================================================== */

.starfus-app {
width:100%;
min-height:100vh;
}

.main-content {
width:min(1180px,calc(100% - 32px));
margin:0 auto;
padding:34px 0 26px;
}


/* =====================================================
NAVEGACIÓN SUPERIOR
===================================================== */

.topbar {
position:sticky;
top:0;
z-index:1000;

min-height:82px;

display:grid;
grid-template-columns:220px 1fr 220px;
align-items:center;
gap:24px;

padding:
12px
max(22px,calc((100vw - 1180px)/2));

background:
linear-gradient(
180deg,
rgba(4,10,20,.88),
rgba(3,8,17,.93)
),
repeating-linear-gradient(45deg,rgba(255,255,255,.055) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.62) 0 1px,transparent 1px 4px),
#050b14;

background-size:auto,var(--carbon-size),var(--carbon-size),auto;

border-bottom:1px solid rgba(31,168,255,.18);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

box-shadow:0 12px 35px rgba(0,0,0,.28);
}

.topbar-brand {
display:flex;
align-items:center;
min-width:0;
}

.topbar-logo {
width:auto;
height:56px;
max-width:205px;

object-fit:contain;

filter:
drop-shadow(0 8px 16px rgba(0,0,0,.38))
drop-shadow(0 0 12px rgba(31,168,255,.14));
}

.main-nav {
display:flex;
justify-content:center;
align-items:center;
gap:30px;
}

.nav-link {
position:relative;

padding:10px 0;

color:#a9b5c7;
font-size:14px;
font-weight:650;

transition:color .18s ease;
}

.nav-link::after {
content:"";

position:absolute;
left:50%;
bottom:2px;

width:0;
height:2px;

background:
linear-gradient(
90deg,
var(--blue),
var(--cyan)
);

border-radius:999px;

transform:translateX(-50%);

transition:width .18s ease;
}

.nav-link:hover,
.nav-link.active {
color:#fff;
}

.nav-link:hover::after,
.nav-link.active::after {
width:100%;
}

.client-access {
justify-self:end;

min-height:42px;

display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;

padding:0 16px;

color:#eaf6ff;
font-size:13px;
font-weight:760;

background:
linear-gradient(
180deg,
rgba(20,93,160,.92),
rgba(8,66,132,.92)
);

border:1px solid rgba(50,216,255,.26);
border-radius:12px;

box-shadow:
0 10px 24px rgba(0,102,204,.20),
inset 0 1px rgba(255,255,255,.13);

cursor:pointer;

transition:
transform .18s ease,
filter .18s ease,
box-shadow .18s ease;
}

.client-access:hover {
transform:translateY(-1px);
filter:brightness(1.08);
}

.client-lock {
font-size:14px;
}


/* =====================================================
PANEL PRINCIPAL IA
===================================================== */

.ai-panel {
position:relative;
overflow:hidden;

min-height:810px;

background:
linear-gradient(
180deg,
rgba(8,18,34,.84),
rgba(3,9,19,.92)
),
repeating-linear-gradient(45deg,rgba(255,255,255,.052) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.62) 0 1px,transparent 1px 4px),
#040a13;

background-size:auto,var(--carbon-size),var(--carbon-size),auto;

border:1px solid rgba(31,168,255,.36);
border-radius:var(--radius-xl);

box-shadow:
0 28px 80px rgba(0,0,0,.65),
0 0 42px rgba(0,119,255,.09),
inset 0 1px rgba(255,255,255,.07),
inset 0 0 0 7px rgba(1,5,12,.32);

isolation:isolate;

backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
}

.ai-panel::before {
content:"";

position:absolute;
inset:0;
z-index:-1;

pointer-events:none;

background:
radial-gradient(
circle at 50% 32%,
rgba(31,168,255,.13),
transparent 28%
),
radial-gradient(
circle at 50% 72%,
rgba(0,119,255,.12),
transparent 32%
);
}

.ai-panel-top {
min-height:76px;

display:flex;
align-items:center;
justify-content:space-between;
gap:16px;

padding:14px 20px;

background:rgba(255,255,255,.018);

border-bottom:1px solid rgba(148,163,184,.11);
}

.assistant-profile {
display:flex;
align-items:center;
gap:12px;
}

.assistant-avatar {
width:46px;
height:46px;

display:grid;
place-items:center;

overflow:hidden;

background:rgba(11,38,68,.72);

border:1px solid rgba(31,168,255,.28);
border-radius:14px;

box-shadow:
0 8px 22px rgba(0,0,0,.28),
0 0 22px rgba(31,168,255,.10);
}

.assistant-avatar img {
width:39px;
height:39px;
object-fit:contain;
}

.assistant-data {
display:flex;
flex-direction:column;
gap:5px;
}

.assistant-data strong {
font-size:15px;
letter-spacing:.2px;
}

.online-status {
display:inline-flex;
align-items:center;
gap:6px;

color:#91e6b8;
font-size:12px;
}

.online-status i {
width:7px;
height:7px;

background:var(--green);
border-radius:50%;

box-shadow:0 0 10px rgba(48,217,139,.75);
}

.panel-actions {
display:flex;
align-items:center;
gap:8px;
}

.icon-button {
width:38px;
height:38px;
min-height:38px;

display:grid;
place-items:center;

padding:0;

color:#c7d3e3;
font-size:20px;

background:rgba(255,255,255,.035);

border:1px solid rgba(148,163,184,.12);
border-radius:11px;

cursor:pointer;

transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
}

.icon-button:hover {
background:rgba(31,168,255,.08);
border-color:rgba(31,168,255,.32);
transform:translateY(-1px);
}


/* =====================================================
BIENVENIDA
===================================================== */

.welcome-area {
position:relative;
z-index:3;

padding:58px 24px 12px;

text-align:center;
}

.welcome-area h1 {
font-size:clamp(30px,4vw,48px);
line-height:1.08;
letter-spacing:-1.5px;
}

.welcome-area p {
margin-top:8px;

color:#a5b1c3;
font-size:16px;
line-height:1.4;
}

.welcome-area p + p {
margin-top:1px;
}


/* =====================================================
PLANETA / HORIZONTE
===================================================== */

.earth-horizon {
position:relative;
z-index:1;

height:250px;
margin-top:-10px;

overflow:hidden;

pointer-events:none;
}

.earth-glow {
position:absolute;
left:50%;
bottom:10px;

width:95%;
height:190px;

transform:translateX(-50%);

background:
radial-gradient(
ellipse at center bottom,
rgba(52,211,255,.26),
rgba(31,168,255,.12) 26%,
rgba(31,168,255,.03) 55%,
transparent 74%
);

filter:blur(2px);
}

.earth-surface {
position:absolute;
left:50%;
bottom:-230px;

width:1240px;
height:500px;

transform:translateX(-50%);

background:
radial-gradient(
circle at 50% 4%,
rgba(126,224,255,.95) 0 1px,
transparent 2px
),
radial-gradient(
circle at 43% 6%,
rgba(31,168,255,.92) 0 1px,
transparent 2px
),
radial-gradient(
circle at 57% 8%,
rgba(255,255,255,.75) 0 1px,
transparent 2px
),
radial-gradient(
circle at 50% 0%,
rgba(34,211,238,.38),
rgba(3,105,161,.18) 25%,
rgba(5,17,34,.98) 60%
);

background-size:
84px 84px,
115px 115px,
143px 143px,
auto;

border:1px solid rgba(52,211,255,.42);
border-radius:50%;

box-shadow:
0 -3px 22px rgba(52,211,255,.38),
0 -22px 80px rgba(0,119,255,.22),
inset 0 28px 65px rgba(34,211,238,.07);
}


/* =====================================================
CAJA DE CONVERSACIÓN
===================================================== */

.chatBox {
position:relative;
z-index:4;

width:calc(100% - 64px);
max-width:930px;
height:165px;

margin:-14px auto 16px;
padding:14px 16px;

overflow-y:auto;
overflow-x:hidden;

color:var(--text);
line-height:1.5;
white-space:pre-line;

scroll-behavior:smooth;

background:rgba(2,8,16,.73);

border:1px solid rgba(148,163,184,.16);
border-radius:16px;

backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.chatBox:empty {
display:none;
}

.msg {
display:flex;
gap:10px;
margin:9px 0;
}

.bubble {
max-width:88%;
padding:11px 13px;

overflow-wrap:anywhere;

color:#f5f8ff;

background:rgba(255,255,255,.045);

border:1px solid rgba(148,163,184,.12);
border-radius:14px;

box-shadow:0 5px 16px rgba(0,0,0,.16);
}

.me {
justify-content:flex-end;
}

.me .bubble {
background:
linear-gradient(
145deg,
rgba(0,119,255,.30),
rgba(31,168,255,.12)
);

border-color:rgba(31,168,255,.34);
border-bottom-right-radius:5px;
}

.sys {
justify-content:flex-start;
}

.sys .bubble {
background:
linear-gradient(
145deg,
rgba(12,29,50,.96),
rgba(8,18,32,.94)
);

border-color:rgba(148,163,184,.15);
border-bottom-left-radius:5px;
}


/* =====================================================
COMPOSITOR
===================================================== */

.composer {
position:relative;
z-index:5;

width:calc(100% - 64px);
max-width:930px;

margin:0 auto 24px;
padding:12px 14px 10px;

background:
linear-gradient(
180deg,
rgba(12,27,48,.89),
rgba(6,15,29,.95)
),
repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.58) 0 1px,transparent 1px 4px),
#07111f;

background-size:auto,var(--carbon-size),var(--carbon-size),auto;

border:1px solid rgba(31,168,255,.40);
border-radius:18px;

box-shadow:
0 20px 50px rgba(0,0,0,.48),
0 0 24px rgba(0,119,255,.08),
inset 0 1px rgba(255,255,255,.03);
}

.composer input {
width:100%;
height:48px;

padding:0 4px;

color:var(--text);
font-size:16px;

background:transparent;

border:0;
outline:none;
}

.composer input::placeholder {
color:#7f8da1;
}

.composer-bottom {
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;

padding-top:8px;

border-top:1px solid rgba(148,163,184,.09);
}

.composer-tools,
.composer-send {
display:flex;
align-items:center;
gap:7px;
}

.composer-icon,
.mic-button,
.send-button {
width:36px;
height:36px;
min-height:36px;

display:grid;
place-items:center;

padding:0;

border-radius:10px;

cursor:pointer;

transition:
transform .16s ease,
filter .16s ease,
border-color .16s ease,
background .16s ease;
}

.composer-icon,
.mic-button {
color:#b9c7d8;
font-size:17px;

background:rgba(255,255,255,.035);

border:1px solid rgba(148,163,184,.12);
}

.composer-icon:hover,
.mic-button:hover {
background:rgba(31,168,255,.08);
border-color:rgba(31,168,255,.30);
}

.send-button {
color:#fff;
font-size:18px;

background:
linear-gradient(
180deg,
#1fa8ff,
#0879e8
);

border:1px solid rgba(109,222,255,.32);

box-shadow:
0 8px 18px rgba(0,119,255,.28),
inset 0 1px rgba(255,255,255,.18);
}

.send-button:hover {
transform:translateY(-1px);
filter:brightness(1.08);
}

#mic.rec {
color:#fff;

background:rgba(255,95,109,.20);

border-color:rgba(255,95,109,.62);

box-shadow:
0 0 0 3px rgba(255,95,109,.10) inset,
0 0 18px rgba(255,95,109,.14);
}


/* =====================================================
MODOS
===================================================== */

.system-modes {
width:calc(100% - 64px);
max-width:930px;

display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;

margin:0 auto 18px;
}

.modeLabel {
margin-right:3px;

color:var(--muted);
font-size:12px;
}

.mini {
min-height:34px;
padding:7px 10px;

color:#aebed1;
font-size:12px;
font-weight:650;

background:rgba(255,255,255,.028);

border:1px solid rgba(148,163,184,.11);
border-radius:10px;

cursor:pointer;
}

.mini:hover {
color:#e9f6ff;

background:rgba(31,168,255,.07);

border-color:rgba(31,168,255,.27);
}

.mini.active {
color:#eaf8ff;

background:rgba(31,168,255,.12);

border-color:rgba(31,168,255,.40);

box-shadow:
0 0 0 2px rgba(31,168,255,.06) inset,
0 0 18px rgba(31,168,255,.05);
}


/* =====================================================
HERRAMIENTAS RÁPIDAS
===================================================== */

.quick-tools {
position:relative;
z-index:5;

display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;

padding:0 32px 32px;
}

.quick-tool {
min-height:82px;

display:flex;
align-items:center;
gap:13px;

padding:14px;

color:var(--text);
text-align:left;

background:
linear-gradient(
180deg,
rgba(12,27,47,.82),
rgba(6,15,28,.92)
),
repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.55) 0 1px,transparent 1px 4px),
#07111f;

background-size:auto,var(--carbon-size),var(--carbon-size),auto;

border:1px solid rgba(148,163,184,.14);
border-radius:15px;

cursor:pointer;

box-shadow:0 10px 25px rgba(0,0,0,.18);

transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}

.quick-tool:hover {
transform:translateY(-2px);

border-color:rgba(31,168,255,.42);

background:
linear-gradient(
180deg,
rgba(15,36,62,.94),
rgba(7,19,35,.95)
);
}

.tool-icon {
width:42px;
height:42px;
flex:0 0 42px;

display:grid;
place-items:center;

color:#8edfff;
font-size:18px;
font-weight:800;

background:rgba(31,168,255,.10);

border:1px solid rgba(31,168,255,.24);
border-radius:12px;
}

.quick-tool > span:last-child {
min-width:0;

display:flex;
flex-direction:column;
gap:5px;
}

.quick-tool strong {
font-size:14px;
line-height:1.2;
}

.quick-tool small {
color:var(--muted);
font-size:12px;
line-height:1.3;
}


/* =====================================================
DASHBOARD
===================================================== */

.dashboard-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;

margin-top:18px;
}

.dashboard-card {
min-width:0;
overflow:hidden;

background:
linear-gradient(
180deg,
rgba(8,19,34,.84),
rgba(4,11,22,.94)
),
repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px),
repeating-linear-gradient(-45deg,rgba(0,0,0,.58) 0 1px,transparent 1px 4px),
#060e1a;

background-size:auto,var(--carbon-size),var(--carbon-size),auto;

border:1px solid rgba(148,163,184,.15);
border-radius:18px;

box-shadow:0 18px 45px rgba(0,0,0,.42);

backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}

.dashboard-title {
min-height:62px;

display:flex;
align-items:center;
gap:10px;

padding:0 16px;

border-bottom:1px solid rgba(148,163,184,.10);
}

.dashboard-title-icon {
color:#76d7ff;
font-size:18px;
}

.dashboard-title h2 {
font-size:15px;
}

.activity-list,
.idea-list,
.settings-list {
padding:8px;
}

.activity-item,
.idea-item,
.settings-item {
width:100%;
min-height:68px;

display:flex;
align-items:center;
gap:11px;

padding:10px;

color:var(--text);
text-align:left;

background:transparent;

border:1px solid transparent;
border-radius:12px;

cursor:pointer;

transition:
background .16s ease,
border-color .16s ease;
}

.activity-item:hover,
.idea-item:hover,
.settings-item:hover {
background:rgba(255,255,255,.028);
border-color:rgba(148,163,184,.09);
}

.activity-icon,
.idea-icon,
.settings-icon {
width:38px;
height:38px;
flex:0 0 38px;

display:grid;
place-items:center;

border-radius:11px;
font-weight:800;
}

.green {
color:#8ff0be;
background:rgba(48,217,139,.11);
border:1px solid rgba(48,217,139,.19);
}

.yellow {
color:#ffe184;
background:rgba(247,201,72,.11);
border:1px solid rgba(247,201,72,.19);
}

.purple {
color:#c9baff;
background:rgba(157,124,255,.11);
border:1px solid rgba(157,124,255,.19);
}

.orange {
color:#ffbd88;
background:rgba(255,122,26,.11);
border:1px solid rgba(255,122,26,.19);
}

.blue {
color:#8edfff;
background:rgba(31,168,255,.11);
border:1px solid rgba(31,168,255,.19);
}

.lime {
color:#c8f58d;
background:rgba(163,230,53,.10);
border:1px solid rgba(163,230,53,.18);
}

.activity-text,
.idea-item > span:nth-child(2),
.settings-item > span:nth-child(2) {
min-width:0;
flex:1;

display:flex;
flex-direction:column;
gap:4px;
}

.activity-item strong,
.idea-item strong,
.settings-item strong {
overflow:hidden;

font-size:13px;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}

.activity-item small,
.idea-item small,
.settings-item small {
overflow:hidden;

color:var(--muted);
font-size:11px;
line-height:1.25;
text-overflow:ellipsis;
white-space:nowrap;
}

.activity-item time {
color:var(--muted-2);
font-size:10px;
white-space:nowrap;
}

.idea-item > b,
.settings-item > b {
color:var(--muted-2);
font-size:20px;
font-weight:500;
}

.card-footer-link {
width:100%;
min-height:46px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 16px;

color:#78cbff;
font-size:12px;
font-weight:650;
text-align:left;

background:rgba(255,255,255,.015);

border:0;
border-top:1px solid rgba(148,163,184,.09);

cursor:pointer;
}


/* =====================================================
AVISO
===================================================== */

.accuracy-notice {
display:flex;
align-items:center;
justify-content:center;
gap:8px;

margin-top:16px;

color:var(--muted-2);
font-size:11px;
text-align:center;
}


/* =====================================================
NOSOTROS Y CONTACTO
===================================================== */

.company-section,
.contact-section {
width:min(1180px,calc(100% - 32px));
margin:42px auto 0;
padding:38px;
scroll-margin-top:110px;

background:
linear-gradient(145deg,rgba(8,25,43,.92),rgba(3,12,23,.96));
border:1px solid rgba(50,216,255,.28);
border-radius:22px;
box-shadow:0 22px 54px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);
}

.company-kicker {
display:inline-block;
margin-bottom:12px;
color:#38d8ff;
font-size:11px;
font-weight:800;
letter-spacing:.18em;
}

.company-section > h2,
.contact-section h2 {
margin:0;
color:#f4f9ff;
font-size:clamp(26px,4vw,42px);
line-height:1.08;
letter-spacing:-.035em;
}

.company-intro,
.company-closing,
.contact-section p,
.company-person p {
color:#aebfd2;
font-size:15px;
line-height:1.7;
}

.company-intro {
max-width:900px;
margin:18px 0 0;
}

.company-team {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:18px;
margin-top:28px;
}

.company-person {
padding:24px;
background:rgba(2,13,26,.72);
border:1px solid rgba(80,184,255,.18);
border-radius:17px;
}

.company-person span {
color:#68cfff;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
}

.company-person h3 {
margin:9px 0 8px;
color:#fff;
font-size:21px;
}

.company-person p {
margin:0;
}

.company-closing {
margin:24px 0 0;
padding-top:22px;
border-top:1px solid rgba(148,163,184,.12);
}

.contact-section {
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
margin-top:20px;
}

.contact-section p {
margin:12px 0 0;
}

.contact-actions {
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px;
}

.contact-cta {
min-height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:18px;
padding:0 22px;
flex:0 0 auto;

color:#fff;
font-size:14px;
font-weight:750;
white-space:nowrap;
background:linear-gradient(135deg,#0879d9,#19bfff);
border:1px solid rgba(114,218,255,.7);
border-radius:14px;
box-shadow:0 12px 28px rgba(0,144,255,.2);
}

.contact-cta:hover {
filter:brightness(1.1);
transform:translateY(-1px);
}

.contact-cta-whatsapp {
background:linear-gradient(135deg,#128c4a,#25d366);
border-color:rgba(98,255,157,.72);
box-shadow:0 12px 28px rgba(37,211,102,.18);
}

.contact-cta,
#bcr-widget a,
.whatsapp-fixed {
position:relative;
z-index:2147483000;
pointer-events:auto !important;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(50,216,255,.2);
}

.mobile-info-nav {
display:none;
}

.expandable-info {
transition:
max-height .46s ease,
opacity .28s ease,
margin .38s ease,
padding .38s ease,
border-width .18s ease;
}

.expandable-info:not(.is-open) {
max-height:0 !important;
margin-top:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
opacity:0;
overflow:hidden;
pointer-events:none;
border-width:0;
}

.expandable-info.is-open {
max-height:1400px;
opacity:1;
}

@media (max-width:720px) {
.mobile-info-nav {
width:calc(100% - 24px);
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin:10px auto 0;
}

.mobile-info-nav a {
min-height:40px;
display:flex;
align-items:center;
justify-content:center;
color:#ccecff;
font-size:13px;
font-weight:750;
background:linear-gradient(180deg,rgba(13,72,116,.82),rgba(5,34,62,.9));
border:1px solid rgba(50,216,255,.38);
border-radius:11px;
box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.mobile-info-nav a[aria-expanded="true"] {
color:#fff;
background:linear-gradient(135deg,#0879d9,#19bfff);
border-color:rgba(126,225,255,.78);
}

.company-section,
.contact-section {
width:calc(100% - 24px);
margin-top:24px;
padding:25px 20px;
border-radius:18px;
}

.company-team {
grid-template-columns:1fr;
}

.contact-section {
align-items:flex-start;
flex-direction:column;
}

.contact-cta {
width:100%;
}

.contact-actions {
width:100%;
}
}


/* =====================================================
PIE DE PÁGINA
===================================================== */

.site-footer {
width:min(1180px,calc(100% - 32px));
min-height:92px;

display:grid;
grid-template-columns:220px 1fr 180px;
align-items:center;
gap:24px;

margin:0 auto;
padding:20px 0 112px;

color:var(--muted);
font-size:12px;

border-top:1px solid rgba(31,168,255,.13);
}

.footer-brand img {
width:auto;
height:46px;
max-width:175px;
object-fit:contain;
}

.footer-nav {
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:22px;
}

.footer-nav a:hover {
color:#fff;
}

.footer-social {
display:flex;
justify-content:flex-end;
gap:8px;
}

.footer-social a {
width:34px;
height:34px;

display:grid;
place-items:center;

color:#b9c8da;
font-weight:800;

background:rgba(255,255,255,.03);

border:1px solid rgba(148,163,184,.11);
border-radius:10px;
}

.footer-social a:hover {
color:#fff;

border-color:rgba(31,168,255,.28);

background:rgba(31,168,255,.06);
}

.site-footer .liveDT {
grid-column:1 / -1;
justify-self:center;

margin-top:-8px;

color:var(--muted-2);
font-size:11px;
}


/* =====================================================
ELEMENTOS OCULTOS
===================================================== */

.system-hidden {
display:none !important;
}


/* =====================================================
BOTONES FIJOS
===================================================== */

#bcr-widget {
position:fixed;
/* Fijo a la vista, anclado 8px hacia adentro del bastidor central. */
right:max(
16px,
calc((100vw - min(1180px, calc(100vw - 32px))) / 2 + 8px),
env(safe-area-inset-right)
);
bottom:max(14px,env(safe-area-inset-bottom));
z-index:2147483000;

overflow:hidden;

background:
linear-gradient(
180deg,
#177ed6,
#0b5ba5
);

border:1px solid rgba(255,255,255,.15);
border-radius:12px;

box-shadow:0 10px 26px rgba(0,0,0,.34);
}

#bcr-widget a {
min-width:112px;
min-height:48px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

padding:8px 10px;

color:#fff;
font-size:10px;
line-height:1.2;
text-align:center;
}

#bcr-widget strong {
margin-top:2px;
font-size:12px;
letter-spacing:.5px;
}

.whatsapp-fixed {
position:fixed;
right:max(
16px,
calc((100vw - 1180px) / 2 + 8px),
env(safe-area-inset-right)
);
bottom:calc(max(14px,env(safe-area-inset-bottom)) + 62px);
z-index:2147483001;
isolation:isolate;
pointer-events:auto !important;
touch-action:manipulation;

width:48px;
height:48px;

display:grid;
place-items:center;

background:#25d366;

border:1px solid rgba(255,255,255,.24);
border-radius:50%;

box-shadow:0 8px 22px rgba(0,0,0,.36);

transition:
transform .18s ease,
filter .18s ease;
}

.whatsapp-fixed:hover {
transform:translateY(-2px) scale(1.03);
filter:brightness(1.06);
}

.whatsapp-fixed img {
width:23px;
height:23px;
}


/* =====================================================
ACCESIBILIDAD
===================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible {
outline:2px solid rgba(52,211,255,.92);
outline-offset:3px;
}


/* =====================================================
TABLET
===================================================== */

@media (max-width:980px) {

.topbar {
grid-template-columns:190px 1fr auto;
gap:15px;

padding-inline:16px;
}

.main-nav {
gap:16px;
}

.nav-link {
font-size:12px;
}

.client-access {
padding:0 12px;
font-size:12px;
}

.main-content,
.site-footer {
width:min(100% - 24px,1180px);
}

.quick-tools {
grid-template-columns:repeat(2,minmax(0,1fr));
}

.dashboard-grid {
grid-template-columns:1fr;
}

.site-footer {
grid-template-columns:180px 1fr auto;
}

}


/* =====================================================
CELULAR
===================================================== */

@media (max-width:720px) {

html {
scroll-padding-top:84px;
}

.topbar {
min-height:72px;

grid-template-columns:1fr auto;
gap:10px;

padding:10px 12px;
}

.topbar-logo {
height:48px;
max-width:168px;
}

.main-nav {
display:none;
}

.client-access {
min-height:38px;
padding:0 11px;

font-size:11px;
border-radius:10px;
}

.main-content {
width:calc(100% - 16px);
padding-top:12px;
}

.ai-panel {
min-height:0;
border-radius:20px;
}

.ai-panel-top {
min-height:66px;
padding:10px 12px;
}

.assistant-avatar {
width:42px;
height:42px;
}

.assistant-avatar img {
width:35px;
height:35px;
}

.welcome-area {
padding:38px 18px 8px;
}

.welcome-area h1 {
font-size:29px;
letter-spacing:-.8px;
}

.welcome-area p {
font-size:14px;
}

.earth-horizon {
height:190px;
margin-top:-6px;
}

.earth-surface {
bottom:-240px;
width:860px;
height:450px;
}

.chatBox,
.composer,
.system-modes {
width:calc(100% - 24px);
}

.chatBox {
height:190px;
margin-top:-6px;
padding:11px;
}

.bubble {
max-width:92%;
font-size:14px;
}

.composer {
padding:10px 11px 9px;
border-radius:16px;
}

.composer input {
height:45px;
font-size:16px;
}

.system-modes {
margin-bottom:14px;
}

.modeLabel {
width:100%;
}

.quick-tools {
grid-template-columns:1fr;
gap:9px;

padding:0 12px 18px;
}

.quick-tool {
min-height:70px;
padding:11px 12px;
}

.dashboard-grid {
gap:12px;
margin-top:12px;
}

.dashboard-card {
border-radius:16px;
}

.site-footer {
width:calc(100% - 24px);

grid-template-columns:1fr;
justify-items:center;
gap:16px;

padding:22px 0 110px;

text-align:center;
}

.footer-brand img {
height:42px;
}

.footer-nav {
gap:15px;
}

.footer-social {
justify-content:center;
}

.site-footer .liveDT {
grid-column:1;
margin-top:0;
}

#bcr-widget {
right:max(16px,env(safe-area-inset-right));
bottom:calc(60px + env(safe-area-inset-bottom));
}

#bcr-widget a {
min-width:98px;
padding:7px 8px;
font-size:9px;
}

.whatsapp-fixed {
right:max(16px,env(safe-area-inset-right));
bottom:calc(120px + env(safe-area-inset-bottom));

width:48px;
height:48px;
}

body.carbon-bg {
background-attachment:scroll;
}

}


/* =====================================================
PANTALLAS MUY PEQUEÑAS
===================================================== */

@media (max-width:390px) {

.topbar-logo {
height:44px;
max-width:150px;
}

.client-lock {
display:none;
}

.client-access {
padding:0 9px;
font-size:10px;
}

.welcome-area h1 {
font-size:26px;
}

.earth-horizon {
height:170px;
}

.earth-surface {
width:780px;
}

.composer-bottom {
gap:8px;
}

.composer-tools,
.composer-send {
gap:5px;
}

.composer-icon,
.mic-button,
.send-button {
width:34px;
height:34px;
min-height:34px;
}

.mini {
padding:7px 8px;
font-size:11px;
}

.whatsapp-fixed {
right:max(16px,env(safe-area-inset-right));
}

}
/* =====================================================
STARFUS · FIBRA DE CARBONO VISIBLE · AJUSTE FINAL
===================================================== */

html,
body,
body.carbon-bg {
background-color: #05080e !important;
}

body.carbon-bg {
background-image:
radial-gradient(
circle at 50% 0%,
rgba(0, 153, 255, 0.18),
transparent 38%
),
linear-gradient(
180deg,
rgba(2, 7, 15, 0.20),
rgba(2, 6, 13, 0.55)
),
linear-gradient(
45deg,
rgba(255, 255, 255, 0.055) 25%,
transparent 25%,
transparent 75%,
rgba(255, 255, 255, 0.055) 75%
),
linear-gradient(
-45deg,
rgba(255, 255, 255, 0.035) 25%,
transparent 25%,
transparent 75%,
rgba(255, 255, 255, 0.035) 75%
),
linear-gradient(
45deg,
transparent 40%,
rgba(0, 0, 0, 0.42) 40%,
rgba(0, 0, 0, 0.42) 60%,
transparent 60%
);

background-size:
100% 760px,
cover,
16px 16px,
16px 16px,
8px 8px !important;

background-position:
top center,
center,
0 0,
8px 8px,
0 0 !important;

background-repeat:
no-repeat,
no-repeat,
repeat,
repeat,
repeat !important;

background-attachment: fixed !important;
}


/* Panel principal más transparente para ver la fibra */

body.carbon-bg .ai-panel {
background:
linear-gradient(
180deg,
rgba(7, 17, 31, 0.80),
rgba(3, 9, 19, 0.86)
) !important;

border-color: rgba(31, 168, 255, 0.42) !important;

box-shadow:
0 28px 80px rgba(0, 0, 0, 0.62),
0 0 38px rgba(0, 119, 255, 0.10),
inset 0 1px rgba(255, 255, 255, 0.05) !important;
}


/* Cabecera carbono */

body.carbon-bg .topbar {
background:
linear-gradient(
180deg,
rgba(3, 9, 18, 0.88),
rgba(3, 8, 17, 0.80)
),
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.035) 0 2px,
transparent 2px 7px
) !important;
}


/* Tarjetas con textura visible */

body.carbon-bg .quick-tool,
body.carbon-bg .dashboard-card,
body.carbon-bg .composer {
background-image:
linear-gradient(
180deg,
rgba(12, 27, 47, 0.88),
rgba(5, 14, 27, 0.92)
),
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.025) 0 2px,
transparent 2px 7px
) !important;
}


/* Celular */

@media (max-width: 720px) {

body.carbon-bg {
background-size:
100% 580px,
cover,
14px 14px,
14px 14px,
7px 7px !important;

background-attachment: scroll !important;
}

}
/* =====================================================
STARFUS · LOGO AMPLIADO + CONSULTORÍA INTELIGENTE
===================================================== */

.topbar-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
}

.topbar-logo {
width: auto;
height: 82px;
max-width: 300px;
object-fit: contain;

filter:
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38))
drop-shadow(0 0 12px rgba(31, 168, 255, 0.16));
}



.topbar {
min-height: 92px;
grid-template-columns: 240px 1fr 220px;
}


/* =====================================================
LOGO · TABLET
===================================================== */

@media (max-width: 980px) {

.topbar {
grid-template-columns: 215px 1fr auto;
}

.topbar-logo {
height: 60px;
max-width: 210px;
}

.topbar-brand::after {
font-size: 10px;
letter-spacing: 1px;
}

}


/* =====================================================
LOGO · CELULAR
===================================================== */

@media (max-width: 720px) {

.topbar {
min-height: 80px;
grid-template-columns: 1fr auto;
}

.topbar-logo {
height: 54px;
max-width: 185px;
}

.topbar-brand::after {
margin-top: -2px;
font-size: 8.5px;
letter-spacing: 0.8px;
}

}


/* =====================================================
LOGO · PANTALLAS MUY PEQUEÑAS
===================================================== */

@media (max-width: 390px) {

.topbar-logo {
height: 50px;
max-width: 165px;
}

.topbar-brand::after {
font-size: 7.5px;
letter-spacing: 0.65px;
}

}
/* =====================================================
CONSULTORÍA INTELIGENTE DEBAJO DE STARFUS IA DEL CHAT
===================================================== */

.chat-brand::after,
.chatHead .brand::after,
.chat-head .brand::after,
.chat-header .brand::after,
.assistant-brand::after,
.bot-brand::after {
content: "CONSULTORÍA INTELIGENTE";
display: block;
margin-top: 3px;
color: #8edfff;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
}
/* =====================================================
STARFUS · TEXTO CONSULTORÍA INTELIGENTE EN CELULAR
===================================================== */


/* Ajuste específico para celular */
@media (max-width: 768px) {
.logo-area {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

.logo-area::after {
display: block !important;
font-size: 12px;
margin-top: 5px;
}
}
/* =====================================================
STARFUS · CONSULTORÍA INTELIGENTE JUNTO AL LOGO
===================================================== */

.topbar-brand {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}

.topbar-brand::after {
content: "Consultoría Inteligente";
display: block;
margin-top: 5px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.2px;
white-space: nowrap;
text-align: center;
}

@media (max-width: 768px) {
.topbar-brand::after {
display: block !important;
font-size: 10px;
margin-top: 4px;
}
}
/* =====================================================
STARFUS · CONSULTORÍA INTELIGENTE
===================================================== */

.consultoria-title {
display: inline-block;
margin-left: 4px;

font-size: 27px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.1;

background: linear-gradient(
90deg,
#ffffff 0%,
#75ddff 50%,
#1fa8ff 100%
);

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

text-shadow:
0 0 10px rgba(31, 168, 255, 0.30),
0 2px 8px rgba(0, 0, 0, 0.60);
}

@media (max-width: 600px) {
.consultoria-title {
font-size: 22px;
letter-spacing: -0.4px;
white-space: nowrap;
}
}
/* ALINEAR LOGO Y CONSULTORÍA EN UNA SOLA FILA */

.topbar-brand {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
}

.consultoria-title {
margin: 0 !important;
min-height: auto !important;
display: inline-block !important;
text-align: left !important;
white-space: nowrap !important;
}

@media (max-width: 600px) {
.topbar-brand {
gap: 6px !important;
}

.consultoria-title {
font-size: 21px !important;
}
}
/* =====================================================
ARREGLO FINAL HEADER STARFUS
===================================================== */

.topbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 30px !important;
}

.topbar-brand {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-shrink: 0 !important;
gap: 14px !important;
}

.topbar-logo {
width: auto !important;
height: 82px !important;
max-width: 130px !important;
flex-shrink: 0 !important;
}

.consultoria-title {
display: block !important;
margin: 0 !important;
min-height: 0 !important;
font-size: 25px !important;
line-height: 1 !important;
white-space: nowrap !important;
text-align: left !important;
}

.main-nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 28px !important;
margin-left: auto !important;
}

.topbar-brand::before,
.topbar-brand::after,
.logo-area::before,
.logo-area::after,
.consultoria-title::before,
.consultoria-title::after {
content: none !important;
display: none !important;
}

@media (max-width: 900px) {
.topbar {
flex-wrap: wrap !important;
}

.main-nav {
width: 100% !important;
order: 3 !important;
margin-left: 0 !important;
justify-content: center !important;
}
}

@media (max-width: 600px) {
.topbar {
gap: 10px !important;
}

.topbar-logo {
height: 68px !important;
max-width: 95px !important;
}

.consultoria-title {
font-size: 21px !important;
}

.main-nav {
display: none !important;
}
}
/* =====================================================
STARFUS · HEADER OPTIMIZADO PARA CELULAR
===================================================== */

@media (max-width: 600px) {

.topbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;

width: 100% !important;
min-height: 96px !important;

padding: 12px 14px !important;
gap: 10px !important;

flex-wrap: nowrap !important;
}

.topbar-brand {
display: flex !important;
flex-direction: row !important;
align-items: center !important;

gap: 9px !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}

.topbar-logo {
width: 76px !important;
height: 76px !important;
max-width: 76px !important;

object-fit: contain !important;
flex-shrink: 0 !important;
}

.consultoria-title {
display: block !important;

margin: 0 !important;
min-height: 0 !important;

font-size: 20px !important;
font-weight: 800 !important;
line-height: 1.05 !important;
letter-spacing: -0.3px !important;

text-align: left !important;
white-space: normal !important;

max-width: 170px !important;
}

.main-nav {
display: none !important;
}

.client-access,
.access-client,
.btn-clientes {
flex-shrink: 0 !important;
min-width: 128px !important;

padding: 12px 10px !important;

font-size: 14px !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}

.topbar-brand::before,
.topbar-brand::after,
.logo-area::before,
.logo-area::after,
.consultoria-title::before,
.consultoria-title::after {
content: none !important;
display: none !important;
}
}
/* =====================================================
STARFUS · RECONOCIMIENTO DE DOCUMENTOS
Vista previa de imágenes y archivos PDF
===================================================== */

.attachment-preview {
width: 100%;

display: flex;
align-items: center;
gap: 11px;

margin: 3px 0 10px;
padding: 10px 11px;

color: var(--text);

background:
linear-gradient(
180deg,
rgba(16, 39, 67, 0.92),
rgba(7, 20, 38, 0.96)
),
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.015) 0 2px,
transparent 2px 7px
);

border: 1px solid rgba(50, 216, 255, 0.30);
border-radius: 13px;

box-shadow:
inset 0 1px rgba(255, 255, 255, 0.035),
0 8px 22px rgba(0, 0, 0, 0.20);

animation:
starfusAttachmentEnter 0.20s ease;
}


/* Ocultar correctamente cuando todavía no hay archivo */

.attachment-preview[hidden] {
display: none !important;
}


/* =====================================================
MINIATURA
===================================================== */

.attachment-thumbnail {
width: 48px;
height: 48px;
flex: 0 0 48px;

display: grid;
place-items: center;

overflow: hidden;

color: #ffffff;

background:
linear-gradient(
145deg,
rgba(31, 168, 255, 0.18),
rgba(0, 119, 255, 0.08)
);

border: 1px solid rgba(50, 216, 255, 0.28);
border-radius: 11px;

box-shadow:
inset 0 0 14px rgba(31, 168, 255, 0.07);
}


.attachment-thumbnail img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;
}


/* =====================================================
ICONO PDF
===================================================== */

.attachment-file-icon {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 31px;
height: 24px;

padding: 0 5px;

color: #ffffff;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.5px;

background:
linear-gradient(
180deg,
#ff6d78,
#d93f4d
);

border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 6px;

box-shadow:
0 5px 12px rgba(217, 63, 77, 0.22);
}


/* =====================================================
INFORMACIÓN DEL ARCHIVO
===================================================== */

.attachment-information {
min-width: 0;
flex: 1;

display: flex;
flex-direction: column;
gap: 4px;
}


.attachment-name {
display: block;

overflow: hidden;

color: #f5f8ff;
font-size: 13px;
font-weight: 730;
line-height: 1.25;

text-overflow: ellipsis;
white-space: nowrap;
}


.attachment-details {
display: block;

overflow: hidden;

color: #8fa6bd;
font-size: 11px;
line-height: 1.25;

text-overflow: ellipsis;
white-space: nowrap;
}


/* =====================================================
BOTÓN QUITAR ARCHIVO
===================================================== */

.attachment-remove {
width: 32px;
height: 32px;
min-width: 32px;
flex: 0 0 32px;

display: grid;
place-items: center;

padding: 0;

color: #b9c8d8;
font-size: 22px;
font-weight: 400;
line-height: 1;

background:
rgba(255, 255, 255, 0.035);

border: 1px solid rgba(148, 163, 184, 0.13);
border-radius: 9px;

cursor: pointer;

transition:
color 0.16s ease,
background 0.16s ease,
border-color 0.16s ease,
transform 0.16s ease;
}


.attachment-remove:hover {
color: #ffffff;

background:
rgba(255, 95, 109, 0.15);

border-color:
rgba(255, 95, 109, 0.38);

transform:
translateY(-1px);
}


.attachment-remove:active {
transform:
translateY(0);
}


/* =====================================================
ESTADO DEL BOTÓN ADJUNTAR
===================================================== */

#btnAttach.has-attachment {
color: #ffffff;

background:
rgba(31, 168, 255, 0.18);

border-color:
rgba(50, 216, 255, 0.52);

box-shadow:
inset 0 0 10px rgba(31, 168, 255, 0.12),
0 0 14px rgba(31, 168, 255, 0.10);
}


/* =====================================================
ESTADO DE ENVÍO
===================================================== */

.composer.is-uploading {
border-color:
rgba(50, 216, 255, 0.60);

box-shadow:
0 20px 50px rgba(0, 0, 0, 0.48),
0 0 28px rgba(31, 168, 255, 0.15),
inset 0 1px rgba(255, 255, 255, 0.04);
}


.composer.is-uploading .attachment-preview {
opacity: 0.72;
}


.composer.is-uploading .attachment-remove,
.composer.is-uploading #btnAttach {
pointer-events: none;
}


/* =====================================================
ANIMACIÓN DE ENTRADA
===================================================== */

@keyframes starfusAttachmentEnter {

from {
opacity: 0;

transform:
translateY(5px)
scale(0.985);
}

to {
opacity: 1;

transform:
translateY(0)
scale(1);
}

}


/* =====================================================
ACCESIBILIDAD
===================================================== */

.attachment-remove:focus-visible {
outline:
2px solid rgba(52, 211, 255, 0.92);

outline-offset:
3px;
}


/* =====================================================
CELULAR
===================================================== */

@media (max-width: 720px) {

.attachment-preview {
gap: 9px;

margin-bottom: 9px;
padding: 9px;

border-radius: 12px;
}


.attachment-thumbnail {
width: 44px;
height: 44px;
flex-basis: 44px;

border-radius: 10px;
}


.attachment-name {
font-size: 12px;
}


.attachment-details {
font-size: 10px;
}


.attachment-remove {
width: 30px;
height: 30px;
min-width: 30px;
flex-basis: 30px;

font-size: 20px;
}

}


/* =====================================================
PANTALLAS MUY PEQUEÑAS
===================================================== */

@media (max-width: 390px) {

.attachment-preview {
gap: 8px;

padding:
8px;
}


.attachment-thumbnail {
width: 40px;
height: 40px;
flex-basis: 40px;
}


.attachment-file-icon {
min-width: 28px;
height: 22px;

font-size: 9px;
}


.attachment-name {
max-width: 180px;
}

}

/* =====================================================
STARFUS · BASTIDOR DE CARBONO V30
Tramado fino, neutro y diagonal calibrado contra el fondo del logo
===================================================== */

body.carbon-bg {
background:
radial-gradient(circle at 50% 0%,rgba(0,153,255,.105),transparent 39%),
linear-gradient(27deg,#080a0c 1px,transparent 1px) 0 1px,
linear-gradient(207deg,#080a0c 1px,transparent 1px) 2px 0,
linear-gradient(27deg,#41464b 1px,transparent 1px) 0 2px,
linear-gradient(207deg,#41464b 1px,transparent 1px) 2px 1px,
linear-gradient(90deg,#181b1f 2px,transparent 2px),
linear-gradient(#181b1f 25%,#030405 25%,#030405 50%,transparent 50%,transparent 75%,#292d31 75%),
#030405 !important;

background-size:
100% 760px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
auto !important;
}

body.carbon-bg .topbar,
body.carbon-bg .ai-panel,
body.carbon-bg .composer,
body.carbon-bg .quick-tool,
body.carbon-bg .dashboard-card,
body.carbon-bg .chatBox {
background:
linear-gradient(180deg,rgba(7,18,33,.22),rgba(2,7,14,.42)),
linear-gradient(27deg,#090b0d 1px,transparent 1px) 0 1px,
linear-gradient(207deg,#090b0d 1px,transparent 1px) 2px 0,
linear-gradient(27deg,#454b50 1px,transparent 1px) 0 2px,
linear-gradient(207deg,#454b50 1px,transparent 1px) 2px 1px,
linear-gradient(90deg,#1b1f23 2px,transparent 2px),
linear-gradient(#1b1f23 25%,#040506 25%,#040506 50%,transparent 50%,transparent 75%,#2c3035 75%),
#040506 !important;

background-size:
auto,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
4px 4px,
auto !important;
}

/* =====================================================
STARFUS GPT · CONVERSACIÓN FLUIDA
===================================================== */

.composer textarea {
width: 100%;
min-height: 48px;
max-height: 150px;
padding: 12px 4px 8px;
resize: none;
overflow-y: auto;
color: var(--text);
font: inherit;
font-size: 16px;
line-height: 1.45;
background: transparent;
border: 0;
outline: none;
}

.composer textarea::placeholder {
color: #7f8da1;
}

.ai-panel.conversation-active .welcome-area,
.ai-panel.conversation-active .earth-horizon {
display: none;
}

.ai-panel.conversation-active .chatBox {
height: min(56vh, 590px);
min-height: 320px;
margin-top: 18px;
}

.composer-icon.active {
color: #eaf8ff;
background: rgba(31, 168, 255, 0.18);
border-color: rgba(31, 168, 255, 0.58);
box-shadow: 0 0 18px rgba(31, 168, 255, 0.12);
}

.message-actions {
display: flex;
align-items: center;
gap: 6px;
margin: 5px 0 2px 8px;
}

.message-actions button {
padding: 4px 8px;
color: #92a7bd;
font-size: 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
}

.message-actions button:hover {
color: #eaf8ff;
background: rgba(31, 168, 255, 0.08);
border-color: rgba(31, 168, 255, 0.2);
}

.send-button[title="Detener respuesta"] {
font-size: 14px;
background: linear-gradient(180deg, #ff765f, #d94949);
}

textarea:focus-visible {
outline: none;
}

@media (max-width: 720px) {
.ai-panel.conversation-active .chatBox {
height: 54vh;
min-height: 300px;
margin-top: 12px;
}

.composer textarea {
min-height: 45px;
padding-top: 11px;
font-size: 16px;
}

.message-actions {
margin-left: 4px;
}
}

body.carbon-bg .topbar {
border-bottom:2px solid rgba(31,168,255,.42) !important;

box-shadow:
0 12px 35px rgba(0,0,0,.42),
inset 0 -1px rgba(117,221,255,.12) !important;
}

body.carbon-bg .ai-panel {
border:2px solid rgba(31,168,255,.50) !important;

box-shadow:
0 28px 80px rgba(0,0,0,.72),
0 0 46px rgba(0,119,255,.13),
inset 0 0 0 7px rgba(1,5,11,.48),
inset 0 1px rgba(255,255,255,.10) !important;
}

body.carbon-bg .ai-panel-top {
background:rgba(3,10,19,.48) !important;
border-bottom:1px solid rgba(50,216,255,.24) !important;
}

body.carbon-bg .composer,
body.carbon-bg .chatBox {
border-color:rgba(50,216,255,.40) !important;
}

@media (max-width:720px) {
body.carbon-bg {
background-size:100% 580px,4px 4px,4px 4px,4px 4px,4px 4px,4px 4px,4px 4px,auto !important;
}

body.carbon-bg .topbar,
body.carbon-bg .ai-panel,
body.carbon-bg .composer,
body.carbon-bg .quick-tool,
body.carbon-bg .dashboard-card,
body.carbon-bg .chatBox {
background-size:auto,4px 4px,4px 4px,4px 4px,4px 4px,4px 4px,4px 4px,auto !important;
}
}

/* =====================================================
STARFUS · LOGO TRANSPARENTE CON ROBOT · V31
===================================================== */

.topbar-logo {
width: 190px !important;
height: 94px !important;
max-width: 190px !important;
object-fit: contain !important;
}

@media (max-width: 900px) {
.topbar-logo {
width: 154px !important;
height: 76px !important;
max-width: 154px !important;
}
}

@media (max-width: 600px) {
.topbar-logo {
width: 132px !important;
height: 68px !important;
max-width: 132px !important;
}

.consultoria-title {
font-size: 18px !important;
white-space: normal !important;
max-width: 124px !important;
}
}

/* =====================================================
STARFUS · HEADER MÓVIL SIN SUPERPOSICIONES · V32
Conserva el logo completo y libera el título del botón de acceso.
===================================================== */

@media (max-width: 600px) {
.topbar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
width: 100% !important;
padding: 10px 8px !important;
gap: 8px !important;
overflow: hidden !important;
}

.topbar-brand {
gap: 6px !important;
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
}

.topbar-logo {
width: 88px !important;
height: 64px !important;
max-width: 88px !important;
transform: translateY(-4px) !important;
}

.consultoria-title {
font-size: 15px !important;
line-height: 1.02 !important;
letter-spacing: -0.25px !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 auto !important;
overflow-wrap: normal !important;
}

.client-access,
.access-client,
.btn-clientes {
box-sizing: border-box !important;
width: auto !important;
min-width: 124px !important;
max-width: none !important;
padding: 10px 9px !important;
font-size: 12px !important;
gap: 4px !important;
justify-self: end !important;
white-space: nowrap !important;
}

.client-lock {
font-size: 13px !important;
line-height: 1 !important;
}
}

@media (max-width: 380px) {
.topbar-logo {
width: 82px !important;
max-width: 82px !important;
}

.consultoria-title {
font-size: 14px !important;
}

.client-access,
.access-client,
.btn-clientes {
min-width: 116px !important;
padding-inline: 7px !important;
font-size: 11.5px !important;
}
}

/* =====================================================
STARFUS · EXPERIENCIA INTEGRAL · V55
===================================================== */

.legacy-dashboard {
display:none !important;
}

.main-content {
padding-bottom:14px;
}

.ai-panel {
border-color:rgba(60,199,255,.24);
box-shadow:
0 26px 70px rgba(0,0,0,.42),
0 0 0 1px rgba(255,255,255,.018) inset,
0 0 54px rgba(0,142,255,.06);
}

.welcome-area {
max-width:760px;
margin-inline:auto;
}

.welcome-area h1 {
background:linear-gradient(90deg,#fff 0%,#bfe9ff 52%,#fff 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
letter-spacing:-.035em;
}

.welcome-area p:last-child {
color:#9fb9cb;
font-size:13px;
}

.solution-showcase {
width:min(1180px,calc(100% - 32px));
margin:28px auto 34px;
padding:34px;
background:
radial-gradient(circle at 0 0,rgba(0,163,255,.12),transparent 34%),
linear-gradient(145deg,rgba(10,24,42,.93),rgba(4,11,22,.96));
border:1px solid rgba(58,191,255,.18);
border-radius:24px;
box-shadow:0 24px 70px rgba(0,0,0,.34);
scroll-margin-top:92px;
}

.section-heading {
max-width:780px;
margin-bottom:25px;
}

.section-kicker {
display:inline-block;
margin-bottom:10px;
color:#59d7ff;
font-size:11px;
font-weight:850;
letter-spacing:.18em;
}

.section-heading h2,
.projects-copy h2 {
margin:0;
color:#f5f9ff;
font-size:clamp(26px,4vw,42px);
line-height:1.05;
letter-spacing:-.035em;
}

.section-heading p,
.projects-copy p {
max-width:720px;
margin:12px 0 0;
color:#9cb0c4;
font-size:15px;
line-height:1.65;
}

.solution-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
}

.solution-card {
position:relative;
min-height:255px;
display:flex;
flex-direction:column;
padding:24px;
overflow:hidden;
background:linear-gradient(150deg,rgba(17,36,59,.88),rgba(7,16,29,.9));
border:1px solid rgba(148,202,232,.13);
border-radius:18px;
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.solution-card::after {
content:"";
position:absolute;
width:150px;
height:150px;
right:-70px;
bottom:-75px;
background:radial-gradient(circle,rgba(0,174,255,.16),transparent 68%);
pointer-events:none;
}

.solution-card:hover {
transform:translateY(-4px);
border-color:rgba(67,203,255,.36);
box-shadow:0 18px 38px rgba(0,0,0,.25);
}

.solution-card-primary {
background:
radial-gradient(circle at 100% 0,rgba(0,183,255,.18),transparent 42%),
linear-gradient(150deg,rgba(13,62,96,.92),rgba(6,22,39,.96));
border-color:rgba(65,210,255,.32);
}

.solution-number {
color:#55d7ff;
font-size:12px;
font-weight:850;
letter-spacing:.16em;
}

.solution-card h3 {
margin:28px 0 9px;
color:#fff;
font-size:21px;
letter-spacing:-.02em;
}

.solution-card p {
margin:0 0 22px;
color:#9eb2c6;
font-size:14px;
line-height:1.55;
}

.solution-card button {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
width:100%;
margin-top:auto;
padding:11px 0 0;
color:#dff6ff;
font-size:13px;
font-weight:800;
text-align:left;
background:transparent;
border:0;
border-top:1px solid rgba(148,202,232,.12);
cursor:pointer;
}

.solution-card button span {
color:#44d4ff;
font-size:17px;
}

.projects-panel {
display:grid;
grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
gap:28px;
margin-top:38px;
padding:30px;
background:rgba(3,10,20,.58);
border:1px solid rgba(148,202,232,.11);
border-radius:20px;
}

.projects-copy h2 {
font-size:clamp(24px,3vw,34px);
}

.project-links {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.project-links a {
position:relative;
min-height:106px;
display:flex;
flex-direction:column;
justify-content:center;
padding:18px 42px 18px 18px;
color:#fff;
background:linear-gradient(145deg,rgba(19,43,68,.8),rgba(8,20,35,.9));
border:1px solid rgba(148,202,232,.13);
border-radius:15px;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.project-links a:hover {
transform:translateY(-2px);
border-color:rgba(54,206,255,.4);
background:linear-gradient(145deg,rgba(18,68,104,.88),rgba(7,30,52,.94));
}

.project-links span {
font-size:16px;
font-weight:850;
}

.project-links small {
margin-top:5px;
color:#8fa9be;
font-size:12px;
}

.project-links b {
position:absolute;
right:16px;
top:17px;
color:#44d4ff;
font-size:17px;
}

.method-strip {
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px;
margin-top:16px;
overflow:hidden;
background:rgba(76,176,225,.13);
border:1px solid rgba(148,202,232,.11);
border-radius:17px;
}

.method-strip > div {
min-height:120px;
display:flex;
flex-direction:column;
justify-content:center;
padding:18px;
background:rgba(5,15,27,.94);
}

.method-strip strong {
color:#3bd1ff;
font-size:11px;
letter-spacing:.12em;
}

.method-strip span {
margin-top:9px;
color:#f4f8ff;
font-size:15px;
font-weight:800;
}

.method-strip small {
margin-top:5px;
color:#8299ae;
font-size:11px;
line-height:1.4;
}

.company-values {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:24px 0;
}

.company-values span {
padding:13px 14px;
color:#9eb2c6;
font-size:12px;
text-align:center;
background:rgba(15,43,67,.55);
border:1px solid rgba(75,191,238,.15);
border-radius:12px;
}

.company-values strong {
display:block;
margin-bottom:3px;
color:#dff7ff;
font-size:14px;
}

.whatsapp-fixed svg {
width:27px;
height:27px;
color:#fff;
}

#bcr-widget,
.whatsapp-fixed {
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}

@media (max-width: 860px) {
.solution-grid {
grid-template-columns:1fr;
}

.solution-card {
min-height:210px;
}

.projects-panel {
grid-template-columns:1fr;
}

.method-strip {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width: 720px) {
.mobile-info-nav {
grid-template-columns:repeat(3,minmax(0,1fr));
}

.solution-showcase {
width:calc(100% - 24px);
margin-top:20px;
padding:24px 16px;
border-radius:19px;
}

.projects-panel {
padding:20px 14px;
}

.project-links {
grid-template-columns:1fr;
}

.company-values {
grid-template-columns:1fr;
}
}

@media (max-width: 430px) {
.section-heading h2 {
font-size:28px;
}

.method-strip {
grid-template-columns:1fr 1fr;
}

.method-strip > div {
min-height:104px;
padding:14px;
}
}