.soporte-page { background: radial-gradient(circle at 88% 0, #dce8ff 0, transparent 30rem), #f4f6fa; }
.soporte-shell { margin: 0 auto; max-width: 1280px; min-height: 100vh; padding: 24px clamp(18px, 4vw, 56px) 56px; }
.soporte-hero, .soporte-cuenta, .soporte-resumen, .soporte-seccion-cabecera { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.soporte-marca { align-items: center; color: #61718f; display: inline-flex; font-size: .8rem; font-weight: 700; gap: .75rem; letter-spacing: .02em; }.soporte-marca-logo { display:block; height:auto; width:148px; }.soporte-marca-seccion { border-left:1px solid #d6dfec; padding-left:.75rem; }
.soporte-volver { font-size: .82rem; }
.soporte-intro { align-items: end; display: flex; gap: 2rem; justify-content: space-between; padding: clamp(2.4rem, 6vw, 5rem) 0 2rem; }.soporte-intro h1 { color: #17264a; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1; margin: .6rem 0 .8rem; max-width: 14ch; }.soporte-intro p { font-size: 1rem; margin: 0; max-width: 52ch; }
.soporte-compromiso { background: #eff5ff; border: 1px solid #d4e2ff; border-radius: 14px; display: grid; gap: .3rem; max-width: 270px; padding: 1rem; }.soporte-compromiso strong { color: #26499d; font-size: .8rem; }.soporte-compromiso span { color: #506383; font-size: .75rem; line-height: 1.45; }
.soporte-estado { margin-bottom: 1rem; }.soporte-otro-acceso { margin-bottom: 1rem; }.soporte-login { margin: 2rem auto; max-width: 680px; }.soporte-login p { font-size: .85rem; margin-top: 0; }.soporte-login .primary { width: 100%; }
.soporte-cuenta { border-bottom: 1px solid #dde4f0; margin-bottom: 1.5rem; padding-bottom: 1rem; }.soporte-cuenta > div { align-items: center; display: flex; gap: .7rem; }.soporte-cuenta small, .soporte-cuenta strong { display: block; }.soporte-cuenta small { color: #77859d; font-size: .68rem; }.soporte-cuenta strong { font-size: .82rem; font-weight: 600; margin-top: .1rem; }.soporte-avatar { align-items: center; background: #e1eaff; border-radius: 50%; color: #365ee8; display: inline-flex; font-weight: 800; height: 34px; justify-content: center; width: 34px; }
.soporte-resumen { background: #172a52; border-radius: 18px; color: #fff; margin-bottom: 1.4rem; padding: clamp(1.25rem, 3vw, 2rem); }.soporte-resumen .eyebrow { color: #aebff1; }.soporte-resumen h2 { font-size: 1.4rem; margin: .35rem 0; }.soporte-resumen p { color: #c4d0ee; font-size: .82rem; margin: 0; }.soporte-metricas { align-items: center; display: flex; gap: .65rem; }.soporte-metricas > div { background: #243b6d; border-radius: 10px; display: grid; min-width: 76px; padding: .65rem .8rem; }.soporte-metricas strong { font-size: 1.25rem; }.soporte-metricas span { color: #c4d0ee; font-size: .68rem; }.soporte-metricas button { background: transparent; border-color: #526fae; color: #fff; font-size: .78rem; }.soporte-metricas button:hover { background: #243b6d; }
.soporte-contenido { align-items: start; display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); }.soporte-listado { margin: 0; min-height: 420px; }.soporte-seccion-cabecera { border-bottom: 1px solid #edf0f5; margin-bottom: .8rem; padding-bottom: 1rem; }.soporte-seccion-cabecera h2 { font-size: 1rem; margin: 0; }.soporte-seccion-cabecera p { font-size: .78rem; margin: .25rem 0 0; }
.ticket-list { display: grid; gap: .65rem; }.ticket-card { align-items: center; border: 1px solid #e4e9f2; border-radius: 13px; cursor: pointer; display: flex; gap: 1rem; justify-content: space-between; padding: 1rem; transition: border-color .15s, box-shadow .15s, transform .15s; }.ticket-card:hover { border-color: #a9bef5; box-shadow: 0 8px 18px #182a5010; transform: translateY(-1px); }.ticket-card h3 { color: #202d44; font-size: .92rem; margin: .5rem 0 .35rem; }.ticket-card p { color: #76849a; font-size: .72rem; margin: 0; }.ticket-card button { flex: 0 0 auto; font-size: .76rem; padding: .55rem .75rem; }.ticket-tags { display: flex; flex-wrap: wrap; gap: .35rem; }.ticket-tag { border-radius: 999px; font-size: .65rem; font-weight: 700; padding: .28rem .5rem; text-transform: capitalize; }.ticket-tag.abierto { background: #eaf2ff; color: #2459bd; }.ticket-tag.en_proceso { background: #fff5df; color: #9a6511; }.ticket-tag.resuelto { background: #e8f8ef; color: #247047; }.ticket-tag.categoria { background: #f1f3f7; color: #61708a; }.soporte-cargar-mas { margin-top: 1rem; width: 100%; }
.soporte-lateral { display: grid; gap: 1rem; }.soporte-compositor { margin:0; overflow:hidden; padding:0; }.soporte-tabs { background:#f5f8ff; border-bottom:1px solid #e1e8f7; display:grid; gap:4px; grid-template-columns:1fr 1fr; padding:8px; }.soporte-tabs button { align-items:center; background:transparent; border:0; border-radius:10px; color:#63728b; display:flex; font-size:.73rem; font-weight:700; gap:.45rem; justify-content:center; padding:.72rem .45rem; }.soporte-tabs button[aria-selected="true"] { background:#fff; box-shadow:0 2px 7px #1e356012; color:#2855c7; }.soporte-tabs svg { height:16px; width:16px; }.soporte-crear, .soporte-diagnostico { margin:0; padding:1.25rem; }.soporte-crear h2, .soporte-diagnostico h2 { font-size:1.08rem; margin:.35rem 0; }.soporte-crear > p, .soporte-diagnostico > p { font-size:.76rem; line-height:1.5; margin:0 0 1rem; }.soporte-crear .primary, .soporte-diagnostico .primary { width:100%; }.soporte-diagnostico { background:linear-gradient(145deg,#f8fbff,#fff); position:relative; }.soporte-diagnostico::before { background:#365ee8; border-radius:9px; content:""; height:28px; position:absolute; right:18px; top:18px; width:4px; }.soporte-diagnostico small { color:#71809a; display:block; font-size:.68rem; line-height:1.4; margin-top:.3rem; }.soporte-check { align-items:flex-start; color:#52637f; display:flex!important; font-size:.74rem!important; gap:.55rem; line-height:1.4; }.soporte-check input { margin-top:.15rem; width:auto!important; }.soporte-guia { background:#fff; border:1px solid #e2e7f0; border-radius:14px; padding:1rem 1.15rem; }.soporte-guia h3 { font-size:.85rem; margin:0; }.soporte-guia ul { color:#67758e; font-size:.75rem; line-height:1.5; margin:.75rem 0 0; padding-left:1.1rem; }.soporte-guia li + li { margin-top:.35rem; }
.soporte-page dialog { padding: 1.5rem; }.soporte-page .thread { max-height: min(48vh, 440px); }.soporte-page .message { max-width: 88%; }.soporte-page .message.staff { margin-left: auto; }.soporte-page #error { color: #a62c39; font-size: .78rem; margin: 0 0 .7rem; }
@media (max-width: 820px) { .soporte-intro { align-items: start; flex-direction: column; padding-top: 3rem; }.soporte-compromiso { max-width: none; width: 100%; }.soporte-contenido { grid-template-columns: 1fr; }.soporte-lateral { grid-row: 1; }.soporte-resumen { align-items: start; flex-direction: column; }.soporte-metricas { width: 100%; }.soporte-metricas button { margin-left: auto; } }
@media (max-width: 540px) { .soporte-shell { padding: 16px 14px 32px; }.soporte-hero { align-items: start; }.soporte-volver { font-size: .72rem; padding: .55rem .65rem; }.soporte-intro h1 { font-size: 2.25rem; }.soporte-metricas { flex-wrap: wrap; }.soporte-metricas button { margin-left: 0; }.ticket-card { align-items: start; flex-direction: column; }.ticket-card button { width: 100%; }.soporte-cuenta { align-items: start; }.soporte-cuenta > div { min-width: 0; }.soporte-cuenta strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }