@font-face{font-family:Satoshi;src:url(./fonts/satoshi-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(./fonts/satoshi-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(./fonts/satoshi-900.woff2)format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Clash Display;src:url(./fonts/clash-display-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Clash Display;src:url(./fonts/clash-display-700.woff2)format("woff2");font-weight:700;font-display:swap}
:root{--ink:#0a0f0d;--ink-raised:#101714;--ink-soft:#15201c;--line:#26332e;--line-bright:#35463f;--paper:#eaf2ee;--muted:#9db0a8;--muted-dark:#6b7d76;--blue:#38bdf8;--teal:#2dd4a7;--cyan:#38bdf8;--amber:#fbbf24;--orange:#f97316;--red:#ff5c72;--green:#34d399;--font-body:"Satoshi",sans-serif;--font-display:"Clash Display",sans-serif;--radius:16px;--shadow:0 28px 90px #00000047;--surface-strong:linear-gradient(145deg,#101714f7,#0a0f0dfc);--surface-soft:#0a0f0ddb;--header-bg:#0a0f0de6}
:root[data-theme=light]{--ink:#f3f7f5;--ink-raised:#fff;--ink-soft:#e3ebe7;--line:#d3ded8;--line-bright:#bdccc5;--paper:#10221b;--muted:#465b52;--muted-dark:#65786f;--blue:#087eae;--teal:#087f65;--cyan:#087eae;--surface-strong:linear-gradient(145deg,#fffffffa,#f0f6f3fa);--surface-soft:#ffffffd1;--header-bg:#f3f7f5e6;--shadow:0 28px 90px #14372b1f}
.theme-icon--light,:root[data-theme=light] .theme-icon--dark{display:none}
:root[data-theme=light] .theme-icon--light,.theme-icon--dark{display:inline-flex}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark;scroll-behavior:smooth}
body{background:var(--ink);min-height:100vh;color:var(--paper);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.72}
::selection{background:var(--teal);color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ambient-grid{pointer-events:none;z-index:-1;opacity:.32;background-image:linear-gradient(#5b8cff0b 1px,#0000 1px),linear-gradient(90deg,#5b8cff0b 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 80%);mask-image:linear-gradient(#000,#0000 80%)}
.button{letter-spacing:-.01em;border:0;border-radius:10px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 18px;font-weight:700;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:inline-flex}
.button:hover{transform:translateY(-1px)}
.button--primary{color:#07090d;background:linear-gradient(110deg,var(--blue),#7aa3ff 45%,var(--teal));box-shadow:0 10px 28px #5b8cff33}
.button--primary:hover{box-shadow:0 14px 34px #5b8cff4f}
.button--ghost{color:var(--paper);border:1px solid var(--line);background:#ffffff09}
.button--ghost:hover{border-color:var(--line-bright);background:#ffffff0f}
.button--link{color:var(--muted);padding-inline:8px}
.button--link:hover{color:var(--paper)}
.button--large{min-height:52px;padding-inline:24px}
.button--small{min-height:38px;padding-inline:14px;font-size:14px}
.brand-logo{min-height:40px;color:var(--paper);align-items:center;gap:10px;display:inline-flex}
.brand-logo__mark{background:linear-gradient(120deg,var(--teal),var(--blue),#a78bfa);color:#05201a;width:38px;height:38px;font-family:var(--font-display);border-radius:10px;place-items:center;font-weight:700;display:grid}
.brand-logo--compact .brand-logo__name{display:none}
.brand-logo__name{font-family:var(--font-display);font-size:20px;font-weight:700}
.brand-logo__name small{color:var(--teal);font:700 10px var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.eyebrow,.panel__kicker{letter-spacing:.18em;color:var(--teal);text-transform:uppercase;font-size:11px;font-weight:900}
.eyebrow{align-items:center;gap:9px;display:inline-flex}
.eyebrow>span,.eyebrow>i{background:var(--teal);width:20px;height:1px;box-shadow:0 0 10px var(--teal);display:inline-block}
.public-page{width:min(1500px,100%);min-height:100vh;margin:auto;overflow:hidden}
.public-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;height:88px;padding:0 clamp(24px,5vw,80px);display:flex}
.public-header nav{color:var(--muted);align-items:center;gap:24px;font-size:14px;display:flex}
.public-header nav>a:first-child:hover{color:var(--paper)}
.support-hero{grid-template-columns:minmax(0,1.03fr) minmax(400px,.97fr);align-items:center;gap:clamp(50px,8vw,120px);min-height:700px;padding:clamp(70px,9vw,130px) clamp(24px,7vw,105px);display:grid;position:relative}
.support-hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#5b8cff26,#0000 67%);width:580px;height:580px;position:absolute;top:-150px;right:-200px}
.support-hero__copy{z-index:1;position:relative}
.support-hero h1{font-family:var(--font-display);letter-spacing:-.055em;max-width:780px;margin:28px 0 32px;font-size:clamp(60px,7vw,105px);line-height:.88}
.support-hero h1 em{color:#0000;-webkit-text-stroke:1px var(--teal);text-shadow:0 0 35px #18e0c826;font-style:normal}
.support-hero__copy>p{max-width:650px;color:var(--muted);margin:0;font-size:clamp(18px,1.5vw,22px);line-height:1.62}
.hero-actions{align-items:center;gap:16px;margin-top:38px;display:flex}
.trust-line{color:var(--muted-dark);align-items:center;gap:8px;margin-top:25px;font-size:13px;display:flex}
.trust-line svg{color:var(--teal)}
.support-console{background:var(--surface-strong);border:1px solid var(--line);box-shadow:var(--shadow),0 0 0 1px #5b8cff0a inset;border-radius:21px;overflow:hidden;transform:perspective(1200px)rotateY(-3deg)rotateX(1deg)}
.support-console__bar{border-bottom:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;height:58px;padding:0 20px;font-size:11px;display:grid}
.support-console__bar>div{gap:7px;display:flex}
.support-console__bar>div span{background:#3d4350;border-radius:50%;width:8px;height:8px}
.support-console__bar>div span:first-child{background:var(--red)}
.support-console__bar>div span:nth-child(2){background:var(--amber)}
.support-console__bar>div span:last-child{background:var(--teal)}
.support-console__bar code{color:var(--muted);letter-spacing:.08em}
.support-console__bar small{color:var(--blue);letter-spacing:.1em;justify-self:end;font-weight:900}
.support-console__body{padding:35px 30px}
.signal-card{border:1px solid var(--line);background:var(--surface-soft);min-height:86px;color:var(--muted-dark);border-radius:13px;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;padding:16px 18px;display:grid}
.signal-card>svg:first-child{color:var(--muted-dark)}
.signal-card div{gap:5px;display:grid}
.signal-card div span{text-transform:uppercase;letter-spacing:.13em;font-size:11px}
.signal-card strong{color:var(--paper);font-size:15px}
.signal-card--active{border-color:#18e0c859}
.signal-card--active>svg{color:var(--teal)}
.signal-card--current{border-color:#5b8cff73;box-shadow:inset 0 0 35px #5b8cff14}
.signal-card--current>svg{color:var(--blue)}
.signal-card__pending{font-family:var(--font-display);font-size:23px}
.signal-line{background:linear-gradient(var(--teal),var(--blue));width:1px;height:24px;margin-left:35px}
.signal-line--muted{background:var(--line)}
.support-console__footer{border-top:1px solid var(--line);height:56px;color:var(--muted);align-items:center;gap:9px;padding:0 25px;font-size:12px;display:flex}
.live-dot{background:var(--teal);width:7px;height:7px;box-shadow:0 0 12px var(--teal);border-radius:50%}
.support-pillars{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(3,1fr);display:grid}
.support-pillars article{border-right:1px solid var(--line);padding:45px clamp(24px,4vw,64px)}
.support-pillars article:last-child{border-right:0}
.support-pillars article>span{color:var(--blue);font:600 12px var(--font-display);letter-spacing:.15em}
.support-pillars h2{font:600 22px var(--font-display);margin:35px 0 12px}
.support-pillars p{color:var(--muted);margin:0;line-height:1.6}
.public-footer{min-height:110px;color:var(--muted-dark);justify-content:space-between;align-items:center;gap:30px;padding:0 clamp(24px,5vw,80px);font-size:13px;display:flex}
.public-footer a:hover{color:var(--teal)}
.auth-page{grid-template-columns:minmax(360px,.88fr) minmax(520px,1.12fr);min-height:100vh;display:grid}
.auth-panel{min-height:100vh;padding:clamp(32px,5vw,75px);position:relative}
.auth-panel--brand{background:var(--ink-raised);border-right:1px solid var(--line);flex-direction:column;display:flex;overflow:hidden}
.auth-panel--brand:before{content:"";pointer-events:none;background:radial-gradient(circle at 80% 15%,#5b8cff33,#0000 35%),linear-gradient(135deg,#0000 45%,#18e0c80b);position:absolute;inset:0}
.auth-panel--brand:after{content:"";border:1px solid #5b8cff26;border-radius:50%;width:420px;height:420px;position:absolute;bottom:-130px;right:-250px;box-shadow:0 0 0 60px #5b8cff06,0 0 0 120px #5b8cff04}
.back-link{color:var(--muted);align-items:center;gap:7px;width:fit-content;margin-bottom:35px;font-size:14px;display:inline-flex}
.back-link:hover{color:var(--paper)}
.auth-panel__statement{z-index:1;margin:auto 0;position:relative}
.auth-panel__statement h1{font:700 clamp(48px,5vw,79px)/.95 var(--font-display);letter-spacing:-.045em;margin:24px 0}
.auth-panel__statement p{color:var(--muted);max-width:430px;font-size:18px;line-height:1.6}
.auth-panel__code{z-index:1;color:var(--muted-dark);letter-spacing:.1em;font:11px monospace;position:relative}
.auth-panel--form{background:var(--surface-soft);justify-content:center;align-items:center;display:flex}
.auth-form-wrap{width:min(460px,100%)}
.auth-form-wrap h2{font:600 40px var(--font-display);letter-spacing:-.025em;margin:12px 0 8px}
.auth-form-wrap>p{color:var(--muted);margin:0 0 28px}
.form-stack{gap:20px;display:grid}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}
.form-grid__full{grid-column:1/-1}
.field{gap:8px;min-width:0;display:grid}
.field>span,.field-label{color:#c7cbd5;font-size:13px;font-weight:700}
.field>small{color:var(--muted-dark);font-size:11px}
.input-plain,.field textarea,.field select{width:100%;color:var(--paper);border:1px solid var(--line);background:#ffffff06;border-radius:10px;outline:none;transition:border-color .15s,box-shadow .15s}
.input-plain,.field select{min-height:48px;padding:0 14px}
.field textarea{resize:vertical;min-height:120px;padding:14px;line-height:1.6}
.input-plain:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #5b8cff1c}
input::placeholder,textarea::placeholder{color:#596171}
.field-value-static{min-height:50px;display:flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--muted);background:rgba(255,255,255,0.03)}
.form-actions{justify-content:space-between;align-items:center;gap:20px;display:flex}
.alert{border-radius:10px;align-items:flex-start;gap:10px;margin:18px 0;padding:13px 15px;font-size:13px;line-height:1.45;display:flex}
.alert--error{color:#ffbdc6;background:#ff5c7217;border:1px solid #ff5c724d}
.alert--success{color:#a8f2d8;background:#34d39914;border:1px solid #34d39940}
.alert--info{color:#93c5fd;background:#3b82f614;border:1px solid #3b82f640}
.alert--warning{color:#fde68a;background:#f59e0b14;border:1px solid #f59e0b40}
.app-header{z-index:50;background:var(--header-bg);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);height:76px;position:sticky;top:0}
.app-header__inner{justify-content:space-between;align-items:center;width:min(1500px,100%);height:100%;margin:auto;padding:0 clamp(18px,4vw,58px);display:flex}
.app-nav{align-items:center;gap:12px;display:flex}
.app-nav__link{min-height:40px;color:var(--muted);border-radius:9px;align-items:center;gap:8px;padding:0 13px;font-size:13px;display:flex}
.app-nav__link:hover{color:var(--paper);background:#ffffff09}
.user-chip{border-left:1px solid var(--line);gap:1px;margin-left:6px;padding-left:18px;display:grid}
.user-chip span{text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:13px;font-weight:700;overflow:hidden}
.user-chip small{color:var(--muted-dark);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.icon-button{width:40px;height:40px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:9px;place-items:center;display:grid;cursor:pointer}
.icon-button:hover{color:var(--paper);border-color:var(--line);background:#ffffff09}
.app-main{min-height:calc(100vh - 76px)}
.app-container{width:min(1400px,calc(100% - 40px));margin:auto;padding:52px 0 80px}
.app-container--narrow{width:min(900px,calc(100% - 40px))}
.app-container--detail{width:min(1460px,calc(100% - 40px))}
.panel{background:var(--surface-strong);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px #00000021;padding:24px}
.panel__header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:24px;min-height:82px;padding:18px 24px;margin:-24px -24px 24px;display:flex}
.panel__header h2{font:600 23px var(--font-display);margin:4px 0 0}
.panel__count{min-width:34px;height:28px;color:var(--muted);background:var(--ink-soft);border-radius:999px;place-items:center;padding:0 10px;font-size:12px;display:grid}
.page-heading{justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px;display:flex}
.page-heading h1{font:600 clamp(38px,4vw,58px)/1 var(--font-display);letter-spacing:-.04em;margin:15px 0 10px}
.page-heading p{color:var(--muted);margin:0}
.badge{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent;border-radius:999px;align-items:center;width:fit-content;min-height:25px;padding:0 9px;font-size:10px;font-weight:900;display:inline-flex}
.badge-abierto,.status-abierto{color:#9db9ff;background:#5b8cff1a;border-color:#5b8cff47}
.badge-en_progreso,.status-en_progreso{color:#72efe0;background:#18e0c814;border-color:#18e0c840}
.badge-resuelto,.status-resuelto{color:#9ee8c8;background:#34d39914;border-color:#34d3993b}
.badge-cerrado,.status-cerrado{color:#a9afbc;background:#969fb014;border-color:#969fb033}
.priority-pill{display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;font-size:10px;font-weight:900;min-height:25px;color:#fff;letter-spacing:.04em;text-transform:uppercase}
.ticket-list{display:grid}
.ticket-row{border-bottom:1px solid var(--line);grid-template-columns:minmax(250px,1.5fr) minmax(200px,.8fr) minmax(145px,.45fr) auto;align-items:center;gap:24px;min-height:90px;padding:16px 24px;transition:background .15s;display:grid}
.ticket-row:last-child{border-bottom:0}
.ticket-row:hover{background:#5b8cff09}
.ticket-id{color:var(--blue);letter-spacing:.08em;font:700 11px monospace}
.ticket-title{font-size:15px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ticket-meta{color:var(--muted-dark);font-size:11px}
.ticket-badges{flex-wrap:wrap;gap:7px;display:flex}
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{color:var(--muted-dark);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:12px 16px;border-bottom:1px solid var(--line);text-align:left}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--line)}
.data-table tr:last-child td{border-bottom:0}
.data-table tr:hover td{background:#5b8cff06}
.timeline{display:grid}
.message{border-bottom:1px solid var(--line);grid-template-columns:38px minmax(0,1fr);gap:14px;padding:22px 0;display:grid}
.message:last-child{border-bottom:0}
.message__avatar{color:#a8c0ff;background:#5b8cff17;border:1px solid #5b8cff59;border-radius:10px;place-items:center;width:38px;height:38px;font-size:11px;font-weight:900;display:grid}
.message__content header{justify-content:space-between;gap:20px;display:flex;margin-bottom:10px}
.message__content strong{font-size:14px}
.message__content time{color:var(--muted-dark);font-size:11px}
.message__content p{white-space:pre-wrap;color:#ccd1dd;margin:0;line-height:1.7}
.message__attachments{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}
.attachment-img{max-width:220px;max-height:160px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.attachment-file{border:1px solid var(--line);min-height:36px;color:var(--muted);border-radius:8px;align-items:center;gap:7px;padding:0 11px;font-size:11px;display:inline-flex}
.attachment-file:hover{color:var(--paper);border-color:var(--blue)}
.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:260px;padding:30px;display:flex}
.empty-state h3{font:600 20px var(--font-display);margin:18px 0 5px;color:var(--muted)}
.empty-state p{color:var(--muted-dark);margin:0}
.detail-card{padding:23px}
.detail-card dl{margin:18px 0 0;display:grid}
.detail-card dl div{border-bottom:1px solid var(--line);gap:5px;padding:13px 0;display:grid}
.detail-card dl div:last-child{border-bottom:0}
.detail-card dt{color:var(--muted-dark);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.detail-card dd{margin:0;font-size:13px}
.ticket-heading{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:18px;padding-bottom:28px;display:flex}
.ticket-heading h1{font:600 clamp(34px,3.5vw,52px)/1.1 var(--font-display);letter-spacing:-.04em;margin:15px 0 10px}
.ticket-heading p{color:var(--muted);margin:0}
.ticket-heading__badges{gap:8px;display:flex;flex-wrap:wrap}
.detail-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr);align-items:start;gap:20px;display:grid}
.detail-sidebar{gap:20px;display:grid;position:sticky;top:96px}
.sidebar-dl{margin:0;display:grid}
.sidebar-dl div{border-bottom:1px solid var(--line);gap:5px;padding:13px 0;display:grid}
.sidebar-dl div:last-child{border-bottom:0}
.sidebar-dl dt{color:var(--muted-dark);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.sidebar-dl dd{margin:0;font-size:13px}
.ticket-form,.reply-form{display:grid;gap:18px}
.back-link-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.status-timeline{display:flex;gap:0;overflow:hidden;border-radius:10px;border:1px solid var(--line)}
.status-timeline__step{flex:1;padding:16px;border-right:1px solid var(--line);opacity:.4}
.status-timeline__step:last-child{border-right:0}
.status-timeline__step--done{opacity:1}
.status-timeline__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal)}
.status-timeline__date{font-size:12px;color:var(--muted);margin-top:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters select{min-height:38px;padding:0 12px;border:1px solid var(--line);background:#ffffff06;border-radius:9px;color:var(--paper);font-size:12px;outline:none}
.filters select:focus{border-color:var(--blue)}
details[style]{position:relative}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.fw-bold{font-weight:700}
@media(max-width:1050px){
  .support-hero{grid-template-columns:1fr}
  .support-console{width:min(660px,100%);transform:none}
  .detail-grid{grid-template-columns:1fr}
  .detail-sidebar{position:static}
  .ticket-row{grid-template-columns:minmax(250px,1fr) minmax(180px,.7fr) auto}
}
@media(max-width:760px){
  .public-header{height:72px}
  .support-hero{min-height:auto;padding-block:70px}
  .support-hero h1{font-size:clamp(50px,16vw,74px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .support-pillars{grid-template-columns:1fr}
  .support-pillars article{border-right:0;border-bottom:1px solid var(--line)}
  .public-footer{flex-direction:column;align-items:flex-start;padding-block:28px}
  .auth-page{display:block}
  .auth-panel{min-height:auto;padding:30px 22px}
  .auth-panel--brand{min-height:280px}
  .auth-panel__statement h1{font-size:43px}
  .auth-panel--form{min-height:calc(100vh - 280px);padding-block:50px}
  .app-header{height:68px}
  .app-container,.app-container--narrow,.app-container--detail{width:min(100% - 24px,720px);padding-top:34px}
  .page-heading,.ticket-heading{flex-direction:column;align-items:flex-start}
  .detail-sidebar{position:static;grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch}
  .filters select{width:100%}
  .ticket-row{grid-template-columns:1fr auto;gap:14px}
}