/* «Soporte» del cliente (prefijo .sp) */
.sp{--sp-ink:#0b1b3d;--sp-muted:#667691;--sp-line:#e3eaf4;--sp-blue:#0b63f6;display:grid;gap:16px;color:var(--sp-ink)}
.sp *{box-sizing:border-box}
.sp-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp h2,.sp h3,.sp p{letter-spacing:0}.sp p{margin:0}
.sp-card{border:1px solid var(--sp-line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 6px 22px rgba(11,31,77,.05);min-width:0;display:flex;flex-direction:column;gap:12px}
.sp-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}.sp-head>div{min-width:0;flex:1}
.sp .sp-head h2{margin:0;font-size:18px;line-height:1.2;color:var(--sp-ink)}
.sp-head-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#e4efff;color:var(--sp-blue);flex:none}
.sp-sub,.sp-muted,.sp-fine,.sp-addr{color:var(--sp-muted);font-size:13px;line-height:1.4}
.sp-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:0;color:var(--sp-blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}.sp-link .sp-i{width:14px;height:14px}.sp-link:hover{text-decoration:underline}
.sp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}.sp .btn .sp-i{width:17px;height:17px}
.sp-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:700;font-style:normal;background:#dcf5e7;color:#0f6f3f}.sp-chip.is-wait{background:#fff1c7;color:#8a5b00}
.sp-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:16px 8px;color:var(--sp-muted)}.sp-empty .sp-i{width:30px;height:30px;color:#9bb0d3}.sp-empty b{color:var(--sp-ink);font-size:15px}.sp-empty p{font-size:13px;max-width:36ch}

/* Búsqueda */
.sp-search{display:flex;align-items:center;gap:10px;padding:0 16px;height:50px;border:1px solid var(--sp-line);border-radius:14px;background:#fff;box-shadow:0 6px 22px rgba(11,31,77,.05)}
.sp-search .sp-i{color:#7b8aa3}.sp-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--sp-ink)}
.sp .sp-search input,.sp .sp-mini input{border:0;box-shadow:none;background:transparent;padding:0;min-height:0;height:auto;width:auto;border-radius:0;outline:0}
.sp-search:focus-within,.sp-mini:focus-within{outline:2px solid #9cc4ff}

/* Portada */
.sp-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:center;padding:26px;border-radius:24px;color:#fff;background:#0b2a66 url(/assets/plans-water.webp) center/cover no-repeat}
.sp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(6,24,64,.95),rgba(6,24,64,.8) 55%,rgba(6,24,64,.45))}
.sp-hero>*{position:relative}
.sp-eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#9cc4ff}
.sp .sp-hero h2{margin:6px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.02em;color:#fff}
body[data-page="panel"] .sp .sp-hero p{max-width:46ch;color:#e3edff;font-size:15px;line-height:1.45}
.sp-float{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sp-chip-float{display:grid;text-align:left;gap:0;padding:9px 14px;border:0;border-radius:14px;background:rgba(255,255,255,.95);color:var(--sp-ink);font:inherit;line-height:1.2;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.2)}.sp-chip-float b{font-size:13.5px}.sp-chip-float small{font-size:12px;color:var(--sp-muted)}.sp-chip-float:hover{background:#fff;transform:translateY(-1px)}
.sp-chatcard{display:grid;gap:10px;padding:18px;border-radius:18px;background:#fff;color:var(--sp-ink);box-shadow:0 14px 34px rgba(0,0,0,.25)}
.sp .sp-chatcard h3{margin:0;font-size:19px}body[data-page="panel"] .sp .sp-chatcard p{color:var(--sp-muted);font-size:13.5px;line-height:1.4;max-width:none}
.sp-chat-btn{min-height:48px;width:100%}
.sp-chat-info{display:flex;align-items:center;gap:8px;color:var(--sp-muted);font-size:12.5px}.sp-chat-info .sp-i{width:16px;height:16px}

/* Chat abierto */
.sp-chat .portal-chat-messages{max-height:420px}

/* Temas */
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.sp-tile{display:grid;justify-items:center;align-content:start;gap:8px;padding:14px 8px;border:1px solid var(--sp-line);border-radius:14px;background:#fff;font:inherit;font-size:12.5px;line-height:1.25;text-align:center;color:#2f4468;cursor:pointer}
.sp-tile:hover,.sp-tile.is-on{border-color:#9cc4ff;background:#f1f7ff}.sp-tile.is-on{box-shadow:inset 0 0 0 1px #0b63f6;color:var(--sp-ink);font-weight:700}
.sp-tile-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e4efff;color:var(--sp-blue)}.sp-tile-ico .sp-i{width:23px;height:23px}
.sp-tile:nth-child(2) .sp-tile-ico{background:#dcf5e7;color:#0f8a4c}.sp-tile:nth-child(3) .sp-tile-ico{background:#e4efff}.sp-tile:nth-child(4) .sp-tile-ico{background:#e4efff;color:#0b63f6}.sp-tile:nth-child(5) .sp-tile-ico{background:#efe7ff;color:#6d3fd0}.sp-tile:nth-child(6) .sp-tile-ico{background:#ffe1e1;color:#c0392b}.sp-tile:nth-child(7) .sp-tile-ico{background:#e4efff}.sp-tile:nth-child(8) .sp-tile-ico{background:#e4efff}.sp-tile:nth-child(9) .sp-tile-ico{background:#e4efff}

/* Tres columnas */
.sp-trio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sp-mini{display:flex;align-items:center;gap:8px;margin-left:auto;padding:0 12px;height:38px;border:1px solid var(--sp-line);border-radius:12px;min-width:150px;flex:1 1 150px;max-width:260px}.sp-mini .sp-i{width:16px;height:16px;color:#7b8aa3}
.sp-mini input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:13px;color:var(--sp-ink)}
.sp-faq{list-style:none;margin:0;padding:0;display:grid}
.sp-faq li{border-top:1px solid #eef2f8}.sp-faq li:first-child{border-top:0}
.sp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;font-size:14px;cursor:pointer;list-style:none;color:var(--sp-ink)}.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary:hover span{color:var(--sp-blue)}
.sp-plus{width:18px;height:18px;color:#7b8aa3;transition:transform .15s}.sp-faq details[open] .sp-plus{transform:rotate(45deg)}
.sp-answer{display:grid;gap:8px;padding:0 2px 14px;color:#41557c;font-size:13.5px;line-height:1.5}.sp-answer .sp-link{margin-left:0;justify-self:start}
.sp-more-btn{align-self:center;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:9px 18px;border:0;border-radius:12px;background:#eef5ff;color:var(--sp-blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.sp-more-btn .sp-i{width:14px;height:14px}
.sp-guides,.sp-reqs{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sp-guide{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:12px;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}.sp-guide:hover{background:#f6f9ff}
.sp-guide img,.sp-guide-ico{width:92px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:#e4efff}
.sp-guide-ico{display:grid;place-items:center;color:var(--sp-blue)}.sp-guide-ico .sp-i{width:26px;height:26px}
.sp-guide-body{display:grid;gap:2px;min-width:0}.sp-guide-body b{font-size:14px;line-height:1.25}.sp-guide-body small{color:var(--sp-muted);font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sp-guide-body em{font-style:normal;color:#7b8aa3;font-size:11.5px}
.sp-new{min-height:36px;font-size:12.5px!important;padding:6px 14px}.sp-reqcard .sp-head{flex-wrap:nowrap}.sp-reqcard .sp-new{margin-left:auto}
.sp-req{display:flex;align-items:center;gap:12px;width:100%;padding:10px 6px;border:0;border-bottom:1px solid #eef2f8;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}.sp-req:hover{background:#f6f9ff}
.sp-reqs li:last-child .sp-req{border-bottom:0}
.sp-req-state{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none}.sp-req-state.is-ok{background:#dcf5e7;color:#0f8a4c}.sp-req-state.is-wait{background:#fff1c7;color:#c98200}.sp-req-state .sp-i{width:17px;height:17px}
.sp-req-body{display:grid;gap:2px;min-width:0;flex:1}.sp-req-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sp-req-top small{color:var(--sp-muted);font-size:12px}
.sp-req-body b{font-size:14px;line-height:1.25;overflow-wrap:anywhere}.sp-req-body>small{color:var(--sp-muted);font-size:12.5px}
.sp-go{width:16px;height:16px;color:#9bb0d3}
.sp-more{margin-left:0;justify-self:start}

/* Canales */
.sp-channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-channel{flex-direction:row;align-items:center;gap:16px}.sp-channel>div{display:grid;gap:6px;min-width:0;flex:1;justify-items:start}
.sp .sp-channel h2{margin:0;font-size:16px}
.sp-channel-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;flex:none;background:#e4efff;color:var(--sp-blue)}.sp-channel-ico .sp-i{width:26px;height:26px}
.sp-channel.is-wa .sp-channel-ico{background:#dcf5e7;color:#0f8a4c}.sp-channel.is-mail .sp-channel-ico{background:#e4efff}
.sp-btn{min-height:40px;font-size:13px!important}.sp-phone{font-size:16px}
.sp-addr{overflow-wrap:anywhere}

/* Guía abierta */
.sp-article{display:grid;gap:10px;color:#2f4468;line-height:1.55}.sp-article img{width:100%;max-height:240px;object-fit:cover;border-radius:14px}.sp-article p,.sp-article h2,.sp-article h3,.sp-article ul,.sp-article ol{margin:0}.sp-article h2,.sp-article h3{color:#0f2548;font-size:1rem;line-height:1.3}.sp-article ul,.sp-article ol{padding-left:1.2em;display:grid;gap:4px}.sp-article a{color:#1f6fe5}

body[data-page="panel"] .sp .sp-sub,body[data-page="panel"] .sp .sp-muted,body[data-page="panel"] .sp .sp-fine,body[data-page="panel"] .sp .sp-addr,body[data-page="panel"] .sp .sp-empty p{color:#667691}
body[data-page="panel"] .sp .sp-answer p{color:#41557c}

@media (max-width:1180px){
 .sp-trio{grid-template-columns:1fr}.sp-channels{grid-template-columns:1fr}.sp-hero{grid-template-columns:1fr}
}
@media (max-width:720px){
 .sp-hero{padding:20px}.sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-channel{flex-wrap:wrap}.sp-mini{max-width:none;flex-basis:100%;margin-left:0}
 .sp-reqcard .sp-head{flex-wrap:wrap}
}