/*
 * Silverhost base layer for the WHMCS client area (child of Nexus).
 *
 * Source of truth for the visual language: DESIGN.md in the silverhost-website
 * repo (www.silverhost.cl). Cool silver canvas, petrol ink, one cyan signal
 * from the wordmark dot, Geist everywhere, 10px controls / 20px panels.
 *
 * Layers:
 *   1. Fonts and tokens (--sh-*), plus Nexus variables remapped onto them
 *   2. Base elements and Bootstrap component overrides
 *   3. Silverhost components (sh-btn, sh-card, chips, badges)
 *   4. Header and footer
 *   5. Motion (reveal, enter, glow) — all off under prefers-reduced-motion
 *
 * Page-specific client area styles live in client.css; the order form ships
 * its own stylesheet (orderforms/silverhost_flow/css/flow.css).
 */

/* ---------- 1. Fonts and tokens ---------- */
@font-face {
    font-family: "Geist Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
    /* surfaces */
    --sh-canvas: #f6f8f9;
    --sh-surface: #fcfdfd;
    --sh-tint: #e8f6fa;
    --sh-hairline: #dce3e7;
    --sh-hairline-strong: #7a8b92;
    /* text */
    --sh-ink: #0b1a20;
    --sh-muted: #4e6169;
    /* brand */
    --sh-petrol: #0a2c36;
    --sh-petrol-strong: #103b47;
    --sh-on-petrol: #f2f7f8;
    --sh-cyan: #51cee9;
    --sh-cyan-ink: #0a6a80;
    --sh-panel: #0a2c36;
    --sh-on-panel: #f2f7f8;
    --sh-on-panel-muted: #a9c3ca;
    --sh-live: #3ddc84;
    /* semantic */
    --sh-ok: #0f7b4f;
    --sh-ok-bg: #e6f4ee;
    --sh-danger: #9f1c1c;
    --sh-danger-bg: #fbeaea;
    --sh-notice-bg: #fff6e0;
    --sh-notice: #7a4b00;
    /* lines under tinted alerts */
    --sh-info-line: #c7e9f2;
    --sh-ok-line: #c4e5d6;
    --sh-ok-ink: #0a4f33;
    --sh-danger-line: #f0c9c9;
    --sh-notice-line: #f2dfae;
    /* role tokens that flip in dark mode (petrol turns cyan there) */
    --sh-raised: #fcfdfd;          /* cards over a band; the pre-header in dark */
    --sh-on-cyan: #0a2c36;         /* text and icons on a cyan fill */
    --sh-petrol-mark: #51cee9;     /* icons on a petrol fill (step dots, chips) */
    --sh-overlay: rgb(246 248 249 / .85);
    --sh-neutral-bg: #eef2f4;      /* neutral status pills */
    --sh-on-danger: #fff;
    --sh-on-ok: #fff;
    /* elevation */
    --sh-shadow-float: 0 1px 2px rgb(10 44 54 / .06), 0 8px 24px rgb(10 44 54 / .08);
    --sh-shadow-lift: 0 2px 4px rgb(10 44 54 / .06), 0 16px 40px rgb(10 44 54 / .12);
    /* type */
    --sh-font: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --sh-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
    /* shape */
    --sh-r-chip: 6px;
    --sh-r-control: 10px;
    --sh-r-nav: 16px;
    --sh-r-panel: 20px;
    --sh-ease: cubic-bezier(.2, .7, .2, 1);

    /* The cyan dot of the inline wordmark reads this name (shared with the site). */
    --color-cyan: var(--sh-cyan);

    /* Nexus variables, remapped onto the brand */
    --primary: var(--sh-petrol);
    --primary-lifted: var(--sh-petrol-strong);
    --primary-accented: var(--sh-petrol-strong);
    --text: var(--sh-ink);
    --text-lifted: var(--sh-muted);
    --text-accented: var(--sh-muted);
    --text-muted: var(--sh-muted);
    --border-muted: var(--sh-hairline);
    --border: var(--sh-hairline);
    --border-lifted: var(--sh-hairline-strong);
    --bg: var(--sh-surface);
    --bg-muted: var(--sh-canvas);
    --bg-lifted: var(--sh-canvas);
    --bg-accented: var(--sh-tint);
    --bg-inverted: var(--sh-petrol);
    --grayscale: var(--sh-petrol);
    --grayscale-lifted: var(--sh-petrol-strong);
    --success: var(--sh-ok);
    --info: var(--sh-cyan-ink);
    --error: var(--sh-danger);
    --rounding-sm: var(--sh-r-chip);
    --rounding-md: var(--sh-r-control);
    --rounding-lg: var(--sh-r-panel);
}

/*
 * Dark mode, same values as www.silverhost.cl (DESIGN.md > colors-dark). Driven by data-theme on
 * <html>, set before first paint by the inline script in includes/head.tpl (stored choice or
 * prefers-color-scheme). Petrol's role (primary fill) is taken by cyan with near-black text, so the
 * main action stays the brightest thing on the page; dark panels keep using --sh-panel.
 */
:root[data-theme="dark"] {
    color-scheme: dark;
    --sh-canvas: #071317;
    --sh-surface: #0d1e24;
    --sh-tint: #0e2a33;
    --sh-raised: #16343e;
    --sh-hairline: #1c3038;
    --sh-hairline-strong: #587079;
    --sh-ink: #e6eef0;
    --sh-muted: #93a7ae;
    --sh-petrol: #51cee9;
    --sh-petrol-strong: #7fdcf0;
    --sh-on-petrol: #071317;
    --sh-cyan-ink: #7fdcf0;
    --sh-panel: #0e2a33;
    --sh-on-panel: #e6eef0;
    --sh-on-panel-muted: #a9c3ca;
    --sh-on-cyan: #071317;
    --sh-petrol-mark: #071317;
    --sh-ok: #6fd3a5;
    --sh-ok-bg: #0f2a20;
    --sh-ok-ink: #a6e6c8;
    --sh-ok-line: #1f4a38;
    --sh-danger: #f3a5a5;
    --sh-danger-bg: #3a1414;
    --sh-danger-line: #5c2323;
    --sh-notice: #f2cf7e;
    --sh-notice-bg: #2e2410;
    --sh-notice-line: #5a4519;
    --sh-info-line: #1d4655;
    --sh-overlay: rgb(7 19 23 / .85);
    --sh-neutral-bg: #1c3038;
    --sh-on-danger: #3a1414;
    --sh-on-ok: #071317;
    --sh-shadow-float: 0 0 0 1px rgb(255 255 255 / .04);
    --sh-shadow-lift: 0 0 0 1px rgb(255 255 255 / .06), 0 16px 40px rgb(0 0 0 / .45);

    /* Nexus semantic variables. Nexus' own css/custom.css declares them on :root and loads after
       this file, so they are restated here (0,2,0 specificity) for dark mode only. */
    --text: var(--sh-ink);
    --text-lifted: var(--sh-muted);
    --text-accented: var(--sh-ink);
    --text-muted: var(--sh-muted);
    --text-inverted: var(--sh-canvas);
    --border-muted: var(--sh-hairline);
    --border: var(--sh-hairline);
    --border-lifted: var(--sh-hairline-strong);
    --border-accented: var(--sh-hairline-strong);
    --bg: var(--sh-surface);
    --bg-muted: var(--sh-canvas);
    --bg-lifted: var(--sh-tint);
    --bg-accented: var(--sh-tint);
    --bg-inverted: var(--sh-ink);
    --primary: var(--sh-petrol);
    --primary-lifted: var(--sh-petrol-strong);
    --primary-accented: var(--sh-petrol-strong);
    --grayscale: var(--sh-raised);
    --grayscale-lifted: var(--sh-hairline-strong);
    --grayscale-accented: var(--sh-hairline-strong);
    --neutral: var(--sh-muted);
    --neutral-lifted: var(--sh-ink);
    --neutral-accented: var(--sh-ink);
    --white: var(--sh-surface);
    --neutral-50: #0d1e24;
    --neutral-100: #0e2a33;
    --neutral-200: #1c3038;
    --neutral-300: #2a434c;
    --neutral-400: #587079;
    --neutral-500: #7a8b92;
    --neutral-600: #93a7ae;
    --neutral-700: #b8c7cc;
    --neutral-800: #d5e0e3;
    --neutral-900: #e6eef0;
    --neutral-950: #f2f7f8;
}

/* ---------- 2. Base and Bootstrap overrides ---------- */
html { -webkit-text-size-adjust: 100%; }
html:has(body.sh), body.sh { background-color: var(--sh-canvas); height: auto; min-height: 100%; }
body.sh {
    background: var(--sh-canvas);
    color: var(--sh-ink);
    font-family: var(--sh-font);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
}
.sh h1, .sh h2, .sh h3, .sh h4, .sh h5, .sh h6,
.sh .h1, .sh .h2, .sh .h3, .sh .h4, .sh .h5 {
    font-family: var(--sh-font);
    font-weight: 600;
    color: var(--sh-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}
.sh h3, .sh h4, .sh .h3, .sh .h4 { letter-spacing: -0.01em; line-height: 1.25; }
.sh p, .sh li { text-wrap: pretty; }
.sh a { color: var(--sh-cyan-ink); }
.sh a:hover { color: var(--sh-petrol); }
.sh code, .sh kbd, .sh pre, .sh samp { font-family: var(--sh-mono); }
.sh ::selection { background: rgb(81 206 233 / .35); color: var(--sh-ink); }
.sh .text-muted { color: var(--sh-muted) !important; }
.sh .tabular, .sh .price, .sh .amt { font-variant-numeric: tabular-nums; }

.sh :focus-visible {
    outline: 3px solid var(--sh-cyan-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--sh-canvas);
}
.sh .sh-on-dark :focus-visible, .sh .sh-prebar :focus-visible { outline-color: var(--sh-cyan); box-shadow: none; }

.sh-skip {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--sh-petrol); color: var(--sh-on-petrol) !important;
    padding: 10px 16px; border-radius: var(--sh-r-control); font-weight: 500;
}
.sh-skip:focus { top: 12px; }

.sh-icon { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; vertical-align: -0.125em; }

/* Buttons: Bootstrap classes adopt the site's button language */
.sh .btn {
    font-family: var(--sh-font);
    font-weight: 500;
    border-radius: var(--sh-r-control);
    transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--sh-ease), box-shadow .2s;
}
.sh .btn:active { transform: scale(.98); }
.sh .btn-primary, .sh .btn-success, .sh .btn-info {
    background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-on-petrol);
}
.sh .btn-primary:hover, .sh .btn-primary:focus, .sh .btn-success:hover, .sh .btn-success:focus,
.sh .btn-info:hover, .sh .btn-info:focus,
.sh .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--sh-petrol-strong); border-color: var(--sh-petrol-strong); color: var(--sh-on-petrol);
    box-shadow: var(--sh-shadow-float);
}
.sh .btn-default, .sh .btn-secondary, .sh .btn-light, .sh .btn-outline-primary, .sh .btn-outline-secondary {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-ink);
}
.sh .btn-default:hover, .sh .btn-secondary:hover, .sh .btn-light:hover,
.sh .btn-outline-primary:hover, .sh .btn-outline-secondary:hover {
    background: var(--sh-tint); border-color: var(--sh-petrol); color: var(--sh-ink);
}
.sh .btn-danger { background: var(--sh-danger); border-color: var(--sh-danger); color: var(--sh-on-danger); }
.sh .btn-link { color: var(--sh-cyan-ink); }
.sh .btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }

/* Forms */
.sh .form-control, .sh .custom-select, .sh select.form-control {
    min-height: 44px;
    border: 1px solid var(--sh-hairline-strong);
    border-radius: var(--sh-r-control);
    background-color: var(--sh-surface);
    color: var(--sh-ink);
    font-family: var(--sh-font);
    font-size: 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.sh .form-control:focus, .sh .custom-select:focus {
    border-color: var(--sh-petrol);
    box-shadow: 0 0 0 3px rgb(81 206 233 / .35);
}
.sh label, .sh .control-label, .sh .col-form-label { font-size: .875rem; font-weight: 500; color: var(--sh-ink); }
.sh .form-text, .sh .help-block { color: var(--sh-muted); }
.sh .input-group-text {
    background: var(--sh-canvas); border-color: var(--sh-hairline-strong); color: var(--sh-muted);
    border-radius: var(--sh-r-control);
}
.sh .input-group > .form-control:not(:first-child), .sh .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sh .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sh .custom-control-input:checked ~ .custom-control-label::before { background: var(--sh-petrol); border-color: var(--sh-petrol); }

/* Cards, panels, tables */
.sh .card, .sh .panel {
    background: var(--sh-surface);
    border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel);
    box-shadow: none;
}
.sh .card-header, .sh .panel-heading {
    background: transparent; border-bottom: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel) var(--sh-r-panel) 0 0 !important;
}
.sh .card-footer { background: transparent; border-top: 1px solid var(--sh-hairline); border-radius: 0 0 var(--sh-r-panel) var(--sh-r-panel) !important; }
.sh .card-title, .sh .card-header h3 { font-size: 1.125rem; font-weight: 600; }
.sh .table { color: var(--sh-ink); }
.sh .table thead th { border-bottom: 1px solid var(--sh-hairline); color: var(--sh-muted); font-size: .8125rem; font-weight: 500; }
.sh .table td, .sh .table th { border-top-color: var(--sh-hairline); }
.sh .list-group-item { border-color: var(--sh-hairline); background: var(--sh-surface); }
.sh .list-group-item.active { background: var(--sh-tint); border-color: var(--sh-hairline); color: var(--sh-ink); }
.sh .list-group-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--sh-cyan); }

/* Alerts: tinted, never loud */
.sh .alert { border-radius: var(--sh-r-control); border: 1px solid transparent; }
.sh .alert-info { background: var(--sh-tint); border-color: var(--sh-info-line); color: var(--sh-ink); }
.sh .alert-success { background: var(--sh-ok-bg); border-color: var(--sh-ok-line); color: var(--sh-ok-ink); }
.sh .alert-danger, .sh .alert-error { background: var(--sh-danger-bg); border-color: var(--sh-danger-line); color: var(--sh-danger); }
.sh .alert-warning { background: var(--sh-notice-bg); border-color: var(--sh-notice-line); color: var(--sh-notice); }

/* Badges / labels: pills */
.sh .badge, .sh .label { border-radius: 9999px; font-weight: 500; font-size: .75rem; padding: .3em .7em; }
.sh .badge-primary, .sh .label-primary { background: var(--sh-petrol); }
.sh .status, .sh .label.status { border-radius: 9999px; }

/* Dropdowns, modals, popovers */
.sh .dropdown-menu {
    border: 1px solid var(--sh-hairline); border-radius: 14px;
    box-shadow: var(--sh-shadow-float); padding: 6px;
}
.sh .dropdown-item, .sh .dropdown-menu .dropdown-item a { border-radius: 8px; color: var(--sh-ink); }
.sh .dropdown-item:hover, .sh .dropdown-item:focus { background: var(--sh-tint); color: var(--sh-ink); }
.sh .modal-content { border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); box-shadow: var(--sh-shadow-lift); }
.sh .popover { border-radius: 14px; border-color: var(--sh-hairline); box-shadow: var(--sh-shadow-float); font-family: var(--sh-font); }
.sh .pagination .page-link { color: var(--sh-ink); border-color: var(--sh-hairline); }
.sh .pagination .page-item.active .page-link { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-on-petrol); }
.sh .nav-tabs .nav-link.active { border-color: var(--sh-hairline) var(--sh-hairline) var(--sh-surface); color: var(--sh-ink); }
.sh .nav-tabs .nav-link { color: var(--sh-muted); }
.sh .progress { border-radius: 9999px; background: var(--sh-hairline); }
.sh .progress-bar { background: var(--sh-petrol); }

/* ---------- 3. Silverhost components ---------- */
.sh-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
    font-family: var(--sh-font); font-weight: 500; font-size: 1rem; line-height: 1.2;
    border-radius: var(--sh-r-control); border: 1px solid transparent;
    padding: 10px 10px 10px 20px; white-space: nowrap; text-decoration: none !important;
    cursor: pointer; position: relative; overflow: hidden;
    transition: background-color .2s, border-color .2s, transform .2s var(--sh-ease), box-shadow .2s;
}
.sh-btn:active { transform: scale(.98); }
.sh-btn.sh-btn-sm { font-size: .875rem; padding: 6px 6px 6px 16px; }
.sh-btn.sh-btn-lg { font-size: 1.0625rem; padding: 12px 12px 12px 24px; }
.sh-btn.sh-btn-block { width: 100%; }
.sh-btn.no-chip { justify-content: center; padding: 12px 20px; }
.sh-btn-primary { background: var(--sh-petrol); color: var(--sh-on-petrol) !important; }
.sh-btn-primary:hover { background: var(--sh-petrol-strong); box-shadow: var(--sh-shadow-float); transform: translateY(-2px); }
.sh-btn-secondary { background: var(--sh-surface); color: var(--sh-ink) !important; border-color: var(--sh-hairline-strong); }
.sh-btn-secondary:hover { background: var(--sh-tint); border-color: var(--sh-petrol); }
.sh-btn-accent { background: var(--sh-cyan); color: var(--sh-on-cyan) !important; }
.sh-btn-accent:hover { box-shadow: 0 8px 24px rgb(81 206 233 / .25); transform: translateY(-2px); }
.sh-btn[disabled], .sh-btn.disabled { opacity: .5; pointer-events: none; }
.sh-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--sh-r-chip);
    background: var(--sh-cyan); color: var(--sh-on-cyan);
    transition: transform .2s var(--sh-ease);
}
.sh-btn-sm .sh-chip { width: 24px; height: 24px; }
.sh-btn-secondary .sh-chip { background: var(--sh-tint); color: var(--sh-ink); }
.sh-btn-accent .sh-chip { background: var(--sh-panel); color: var(--sh-cyan); }
.sh-btn:hover .sh-chip .sh-icon { transform: translateX(2px); }
.sh-chip .sh-icon { transition: transform .2s var(--sh-ease); }
/* Sheen on primary buttons (from the site): a diagonal light sweeps once on hover */
.sh-btn-primary::after, .sh-btn-accent::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .18) 50%, transparent 70%);
    transform: translateX(-120%);
}

.sh-card {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel); padding: 24px;
}
.sh-panel-dark {
    background: var(--sh-panel); color: var(--sh-on-panel);
    border-radius: var(--sh-r-panel); padding: 32px; position: relative; overflow: hidden;
}
.sh-panel-dark h1, .sh-panel-dark h2, .sh-panel-dark h3 { color: var(--sh-on-panel); }
.sh-panel-dark p { color: var(--sh-on-panel-muted); }
.sh-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 9999px; padding: 4px 12px; font-size: .8125rem; font-weight: 500;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); color: var(--sh-ink);
}
.sh-pill-cyan { background: var(--sh-cyan); border-color: var(--sh-cyan); color: var(--sh-on-cyan); }
.sh-eyebrow { font-size: .8125rem; font-weight: 500; color: var(--sh-cyan-ink); letter-spacing: 0; }
.sh-muted { color: var(--sh-muted); }
.sh-two-tone .sh-dim { color: var(--sh-muted); display: block; }

/* Glow that follows the pointer (set by silverhost.js via --mx/--my) */
.sh-glow { position: relative; isolation: isolate; }
.sh-glow::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(81 206 233 / .14), transparent 60%);
}
.sh-glow:hover::before { opacity: 1; }
.sh-panel-glow::before {
    content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px;
    background: radial-gradient(circle, rgb(81 206 233 / .28), transparent 65%); pointer-events: none;
}

/* ---------- 4. Header ---------- */
.sh header.sh-header { background: transparent; box-shadow: none; position: relative; z-index: 1030; border: 0; }
.sh header.sh-header .navbar.sh-nav { background: var(--sh-surface); }
.sh-prebar { background: var(--sh-panel); color: var(--sh-on-panel); font-size: .875rem; }
.sh-prebar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.sh-prebar-right { display: flex; align-items: center; min-width: 0; }
.sh .sh-prebar-link, .sh .sh-prebar .btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px;
    color: var(--sh-on-panel); background: none; border: 0; font-size: .875rem; white-space: nowrap;
    border-radius: 0; box-shadow: none;
}
.sh .sh-prebar-link:hover, .sh .sh-prebar .btn:hover { color: var(--sh-on-panel); text-decoration: underline; background: none; }
.sh-prebar-status { padding-left: 0 !important; }
.sh-prebar .sh-dim { opacity: .8; }
.sh-prebar-sep { width: 1px; height: 16px; background: rgb(242 247 248 / .3); }
.sh-prebar-account span { max-width: 220px; }
.sh-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 9999px; background: var(--sh-cyan); color: var(--sh-on-cyan); font-size: .75rem; font-weight: 600;
}
.sh-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-live); box-shadow: 0 0 8px rgb(61 220 132 / .7); }
.sh-live-dot::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sh-live);
    animation: sh-ping 2s var(--sh-ease) 2; opacity: 0;
}

.sh-navwrap { position: sticky; top: 0; padding: 12px 12px 0; z-index: 1030; }
.sh-nav.navbar {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-nav); box-shadow: var(--sh-shadow-float);
    min-height: 64px; padding: 8px 12px 8px 20px !important; flex-wrap: wrap; gap: 8px;
}
.sh-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--sh-ink) !important; text-decoration: none !important; margin-right: 8px; }
.sh-logo { height: 22px; width: auto; display: block; }
.sh-brand-tag {
    font-size: .8125rem; color: var(--sh-muted); padding-left: 12px; border-left: 1px solid var(--sh-hairline);
    white-space: nowrap;
}
.sh-nav-collapse { order: 2; }
.sh-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; order: 3; }
.sh-nav .navbar-nav > li > a, .sh-nav .navbar-nav > li > .dropdown-toggle {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 44px;
    color: var(--sh-ink); font-size: .9375rem; font-weight: 500; border-radius: var(--sh-r-control);
    text-decoration: none;
}
.sh-nav .navbar-nav > li > a:hover, .sh-nav .navbar-nav > li.show > a { background: var(--sh-tint); color: var(--sh-ink); }
.sh-nav .navbar-nav > li > a i { color: var(--sh-muted); }
.sh-nav .dropdown-menu { margin-top: 6px; min-width: 220px; }
.sh-nav .dropdown-menu li.dropdown-item { padding: 0; background: none; }
.sh-nav .dropdown-menu li.dropdown-item > a { display: block; padding: 8px 12px !important; font-size: .9375rem; }
.sh-nav .collapsable-dropdown { display: none !important; }
.sh-cart-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--sh-r-control); color: var(--sh-ink) !important; font-size: 1.25rem;
}
.sh-cart-btn:hover { background: var(--sh-tint); }
.sh-cart-count {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
    background: var(--sh-petrol); color: var(--sh-on-petrol); font-size: .6875rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    transition: transform .3s var(--sh-ease);
}
.sh-cart-count.is-empty { display: none; }
.sh-cart-count.is-bump { animation: sh-bump .5s var(--sh-ease); }
.sh-menu-btn {
    width: 44px; height: 44px; border-radius: var(--sh-r-control); border: 1px solid var(--sh-hairline);
    background: var(--sh-surface); color: var(--sh-ink); font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
}
/* The nav expands at 1280px (own breakpoint, not Bootstrap's xl): below it, a sheet menu. */
.sh-nav .navbar-nav > li > a .badge { background: var(--sh-tint); color: var(--sh-cyan-ink); }
.sh-nav .navbar-nav > li.sh-active > a { color: var(--sh-ink); background: var(--sh-canvas); }
.sh-nav .dropdown-toggle::after { border: 0; width: 10px; height: 10px; margin-left: 2px; vertical-align: 0;
    background: currentColor; opacity: .6; transition: transform .2s var(--sh-ease);
    --sh-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E");
    -webkit-mask: var(--sh-caret) center / contain no-repeat; mask: var(--sh-caret) center / contain no-repeat; }
.sh-nav .show > .dropdown-toggle::after { transform: rotate(180deg); }
.sh-nav .dropdown-menu li.dropdown-item > a:hover, .sh-nav .dropdown-menu li.dropdown-item > a:focus { background: var(--sh-tint); }
.sh-nav .dropdown-menu li.dropdown-item > a.sh-current { background: var(--sh-tint); font-weight: 500; }
.sh-nav .dropdown-menu li.dropdown-item > a i { width: 1.25em; color: var(--sh-muted); }
@media (min-width: 1280px) {
    .sh .container { max-width: 1232px; }
    .sh-menu-btn { display: none !important; }
    .sh-nav.navbar { flex-wrap: nowrap; }
    .sh-nav-collapse { display: flex !important; flex-basis: auto; flex-grow: 1; align-items: center; justify-content: space-between; order: 2; }
    .sh-nav .navbar-nav { flex-direction: row; align-items: center; }
    .sh-nav .navbar-nav .dropdown-menu { position: absolute; }
    .sh-nav-primary { margin: 0 auto 0 4px; }
    .sh-nav-secondary { margin-left: auto; }
    .sh-nav .navbar-nav > li > a, .sh-nav .navbar-nav > li > .dropdown-toggle { padding: 10px 11px; }
    .sh-nav-actions { order: 3; margin-left: 4px; }
}
.sh-nav .navbar-nav, .sh-nav #nav { column-gap: 2px; row-gap: 0; gap: 0 2px; margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 1280px) and (max-width: 1439.98px) {
    /* "Abrir ticket" is also in the Soporte menu; on mid-size screens it gives its room to the rest */
    .sh-logged-in #Primary_Navbar-Open_Ticket { display: none !important; }
}
/* The primary nav is long: the "Portal de clientes" tag waits for wide screens */
@media (max-width: 1439.98px) { .sh-brand-tag { display: none !important; } }
.sh-nav .navbar-nav > li > a { white-space: nowrap; }
@media (max-width: 1279.98px) {
    .sh-nav-collapse { order: 4; flex-basis: 100%; }
    .sh-nav-collapse.collapsing { transition: height .3s var(--sh-ease); }
    .sh-nav-collapse .navbar-nav { padding: 8px 0; border-top: 1px solid var(--sh-hairline); }
    .sh-nav-collapse .sh-nav-secondary { padding-top: 8px; }
    .sh-nav-collapse .navbar-nav > li > a { min-height: 48px; font-size: 1rem; justify-content: space-between; }
    .sh-nav-collapse .dropdown-menu {
        box-shadow: none; border: 0; margin: 0 0 4px; padding: 0 0 0 12px; background: transparent;
        border-left: 2px solid var(--sh-hairline); border-radius: 0; margin-left: 12px;
    }
    .sh-nav-collapse .dropdown-menu li.dropdown-item > a { min-height: 44px; display: flex !important; align-items: center; }
    .sh-nav-collapse .dropdown-divider { margin: 4px 0; }
}
@media (max-width: 575.98px) {
    .sh-navwrap { padding: 8px 8px 0; }
    .sh-nav.navbar { padding-left: 14px !important; }
    .sh-logo { height: 18px; }
    .sh-nav-actions { gap: 4px; }
    .sh-prebar-account span { max-width: 128px; }
    .sh .sh-prebar-link, .sh .sh-prebar .btn { padding: 0 8px; }
}
/* Menu button morphs between list and close icons (silverhost.js swaps the <use>) */
.sh-menu-btn[aria-expanded="true"] { background: var(--sh-tint); border-color: var(--sh-petrol); }

/* Notifications popover */
.sh .popover-user-notifications { max-width: 360px; width: calc(100vw - 24px); border: 1px solid var(--sh-hairline); }
.sh .popover-user-notifications .popover-header { display: none; }
.sh .popover-user-notifications .popover-body { padding: 6px; }
.sh .popover-user-notifications ul.client-alerts { list-style: none; margin: 0; padding: 0; }
.sh .popover-user-notifications ul.client-alerts li a {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
    color: var(--sh-ink); text-decoration: none; font-size: .875rem; line-height: 1.45;
}
.sh .popover-user-notifications ul.client-alerts li a:hover { background: var(--sh-tint); }
.sh .popover-user-notifications ul.client-alerts li i { margin-top: 3px; color: var(--sh-cyan-ink); }
.sh .popover-user-notifications ul.client-alerts li i.fa-exclamation-circle { color: var(--sh-danger); }
.sh .popover-user-notifications ul.client-alerts li i.fa-exclamation-triangle { color: var(--sh-notice); }
.sh .popover-user-notifications ul.client-alerts li.none { padding: 12px; color: var(--sh-muted); font-size: .875rem; }

.sh-breadcrumb.master-breadcrumb { background: transparent; border: 0; padding-top: 16px; }
.sh-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .875rem; }
.sh-breadcrumb .breadcrumb-item, .sh-breadcrumb .breadcrumb-item a { color: var(--sh-muted); }
.sh-breadcrumb .breadcrumb-item.active { color: var(--sh-ink); }
.sh section#main-body.sh-main { padding: 24px 0 64px; background: transparent; min-height: 50vh; }
.sh footer.sh-footer { background: transparent; color: var(--sh-muted); padding: 0 0 12px; font-size: inherit; }
.sh-main:focus { outline: none; }

/* Sidebar (client area lists) */
.sh .sidebar .card { border-radius: var(--sh-r-panel); overflow: hidden; }
.sh .sidebar .card-header { padding: 14px 18px; }
.sh .sidebar .card-title { font-size: .9375rem; }
.sh .sidebar .list-group-item { position: relative; padding: 10px 18px; font-size: .9375rem; border-left: 0; border-right: 0; }
.sh .sidebar .list-group-item:hover { background: var(--sh-canvas); }

/* ---------- Footer ---------- */
.sh-footer { padding: 0 0 12px; background: transparent; color: var(--sh-muted); }
.sh-footer-panel {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 48px 24px 24px;
}
.sh-footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sh-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .sh-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .sh-footer-panel { padding: 48px 40px 24px; } }
.sh-footer-logo { color: var(--sh-ink) !important; display: inline-block; }
.sh-footer-logo .sh-logo { height: 22px; }
.sh-footer-brand p { margin-top: 12px; max-width: 280px; font-size: .875rem; }
.sh-footer h2 { font-size: .875rem !important; font-weight: 600; letter-spacing: 0 !important; margin-bottom: 4px; }
.sh-footer ul { list-style: none; padding: 0; margin: 0; }
.sh-footer nav a { display: inline-flex; min-height: 40px; align-items: center; color: var(--sh-muted); font-size: .875rem; }
.sh-footer nav a:hover { color: var(--sh-ink); }
.sh-footer-row {
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sh-hairline);
    display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between;
}
.sh-footer-label { font-size: .875rem; font-weight: 600; color: var(--sh-ink); margin-bottom: 8px; }
.sh-paymarks { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-paymarks li {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-control); font-size: .8125rem; color: var(--sh-ink); background: var(--sh-canvas);
}
.sh-wa-card {
    display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 10px; min-height: 44px;
    border: 1px solid var(--sh-hairline-strong); border-radius: var(--sh-r-control); color: var(--sh-ink) !important;
    background: var(--sh-surface); text-decoration: none !important; transition: background .15s, border-color .15s;
}
.sh-wa-card:hover { background: var(--sh-tint); border-color: var(--sh-petrol); }
.sh-wa-chip { width: 32px; height: 32px; border-radius: var(--sh-r-chip); background: var(--sh-tint); display: inline-flex; align-items: center; justify-content: center; }
.sh-wa-text { display: flex; flex-direction: column; line-height: 1.25; }
.sh-wa-text strong { font-size: .875rem; font-weight: 500; }
.sh-wa-text span { font-size: .8125rem; color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.sh-footer-legal {
    margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sh-hairline);
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .8125rem;
}
/* Legal lines stacked on the left, the theme switch on the right (below them on phones) */
@media (min-width: 768px) {
    .sh-footer-legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 24px; }
    .sh-footer-legal > p { grid-column: 1; }
    .sh-footer-legal > .sh-theme-switch { grid-column: 2; grid-row: 1 / span 2; }
}
.sh-footer-legal p { margin: 0; }
.sh-footer-legal a { color: var(--sh-muted); }
.sh-linkbtn { background: none; border: 0; padding: 0; color: var(--sh-muted); text-decoration: underline; font-size: inherit; }

/* Overlay spinner (cart transitions) */
.sh #fullpage-overlay { background: var(--sh-overlay); backdrop-filter: blur(4px); }
.sh #fullpage-overlay .msg { color: var(--sh-ink); font-weight: 500; }

/* ---------- 5. Motion ---------- */
@keyframes sh-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes sh-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes sh-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sh-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sh-draw { from { stroke-dashoffset: var(--len, 100); } to { stroke-dashoffset: 0; } }
@keyframes sh-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
    [data-enter] { animation: sh-enter .6s var(--sh-ease) both; animation-delay: calc(var(--i, 0) * 80ms); }
    .sh-reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--sh-ease), transform .6s var(--sh-ease); transition-delay: calc(var(--i, 0) * 70ms); }
    .sh-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
    .sh-btn-primary:hover::after, .sh-btn-accent:hover::after,
    .sh-btn-primary:focus-visible::after, .sh-btn-accent:focus-visible::after { animation: sh-sheen .8s var(--sh-ease); }
    .sh-lift { transition: transform .25s var(--sh-ease), box-shadow .25s var(--sh-ease), border-color .2s; }
    .sh-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-shadow-float); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Selects: one clear chevron with breathing room (the native arrow sat on the edge) */
.sh select.form-control:not([multiple]):not([size]), .sh .custom-select:not([multiple]) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230A2C36' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
    cursor: pointer;
}
.sh select.form-control::-ms-expand { display: none; }

/* ---------- Language / currency modal (footer.tpl) ---------- */
.sh .modal-localisation.sh-locale .modal-content {
    background: var(--sh-surface); background-image: none; color: var(--sh-ink);
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); box-shadow: var(--sh-shadow-lift); overflow: hidden;
}
.sh .sh-locale .modal-dialog { max-width: 720px; }
.sh-locale-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px 4px; }
.sh .sh-locale-title { font-size: 1.375rem; margin: 0; letter-spacing: -0.01em; }
.sh-locale-close {
    width: 40px; height: 40px; border-radius: var(--sh-r-control); border: 1px solid var(--sh-hairline);
    background: var(--sh-surface); color: var(--sh-ink); display: inline-flex; align-items: center; justify-content: center;
}
.sh-locale-close:hover { background: var(--sh-tint); }
.sh .sh-locale .modal-body { padding: 12px 24px 8px; max-height: 64vh; overflow-y: auto; }
.sh-locale-section + .sh-locale-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sh-hairline); }
.sh .sh-locale-label { margin: 0 0 8px; font-size: .8125rem; font-weight: 500; color: var(--sh-muted); }
.sh-locale-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sh-locale-grid-top { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sh .sh-locale .item-selector .item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px 8px 14px;
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-control); background: var(--sh-surface);
    color: var(--sh-ink); font-size: .9375rem; font-weight: 400; text-align: left; text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.sh .sh-locale .item-selector .item:hover { border-color: var(--sh-petrol); background: var(--sh-tint); color: var(--sh-ink); }
.sh .sh-locale .item-selector .item.active { border: 2px solid var(--sh-petrol); background: var(--sh-tint); font-weight: 500; padding: 7px 11px 7px 13px; }
.sh-locale-check { opacity: 0; color: var(--sh-petrol); flex-shrink: 0; }
.sh .sh-locale .item.active .sh-locale-check { opacity: 1; }
.sh-locale-more { margin-top: 12px; }
.sh-locale-more > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
    font-size: .875rem; font-weight: 500; color: var(--sh-cyan-ink);
}
.sh-locale-more > summary::-webkit-details-marker { display: none; }
.sh-locale-more > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.sh-locale-more[open] > summary::after { content: "–"; }
.sh-locale-more .sh-locale-grid { margin-top: 4px; }
.sh-locale-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--sh-hairline); margin-top: 12px; }
@media (max-width: 575.98px) { .sh-locale-foot .sh-btn { flex: 1; justify-content: center; } }

/* ---------- Chat launcher (Chatwoot facade, same as the website) ---------- */
.sh-chat-launcher {
    position: fixed; right: 16px; bottom: 16px; z-index: 1035;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 52px; height: 52px; padding: 0; border: 0; border-radius: 9999px;
    background: var(--sh-petrol); color: var(--sh-on-petrol); box-shadow: var(--sh-shadow-float);
    font-family: var(--sh-font); font-size: .875rem; font-weight: 600; cursor: pointer;
    transition: background-color .2s, transform .2s var(--sh-ease);
}
.sh-chat-launcher .sh-icon { font-size: 1.5rem; }
.sh-chat-launcher:hover { background: var(--sh-petrol-strong); }
.sh-chat-launcher:disabled { cursor: progress; opacity: .85; }
.sh-chat-launcher:focus-visible { outline: 3px solid var(--sh-cyan-ink); outline-offset: 2px; }
.sh-chat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The "Hablemos" label only where the content column leaves room for it (it covered card text at 1280px) */
@media (min-width: 1440px) {
    .sh-chat-launcher { right: 20px; bottom: 20px; width: auto; height: auto; padding: 12px 20px 12px 16px; }
    .sh-chat-launcher .sh-icon { font-size: 1.25rem; }
    .sh-chat-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (prefers-reduced-motion: no-preference) {
    .sh-chat-launcher { animation: sh-enter .5s .8s var(--sh-ease) both; }
    .sh-chat-launcher:hover { transform: translateY(-2px); }
}
/* Keep clear of the cart's mobile summary bar */
@media (max-width: 991.98px) {
    body:has(.shf-mobilebar:not(.is-hidden)) .sh-chat-launcher { bottom: 96px; }
}

/* ---------- Header v2: contact menu, notifications, fit ---------- */
.sh-prebar-go { font-size: .8125rem; transition: transform .2s var(--sh-ease); }
.sh-prebar-status:hover .sh-prebar-go { transform: translateX(2px); }
.sh-contact { position: relative; }
.sh-contact > summary { list-style: none; cursor: pointer; }
.sh-contact > summary::-webkit-details-marker { display: none; }
.sh-contact-caret { font-size: .75rem; transition: transform .15s; }
.sh-contact[open] .sh-contact-caret { transform: rotate(180deg); }
.sh-contact-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1060; width: 320px; max-width: calc(100vw - 24px);
    padding: 12px; border-radius: var(--sh-r-panel); border: 1px solid var(--sh-hairline);
    background: var(--sh-surface); color: var(--sh-ink); box-shadow: var(--sh-shadow-lift);
}
.sh .sh-contact-title { margin: 0; padding: 4px 8px 10px; font-size: .875rem; font-weight: 600; border-bottom: 1px solid var(--sh-hairline); }
.sh-contact-panel ul { list-style: none; margin: 8px 0 0; padding: 0; }
.sh .sh-contact-panel a {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border-radius: 12px;
    color: var(--sh-ink); text-decoration: none;
}
.sh .sh-contact-panel a:hover { background: var(--sh-tint); color: var(--sh-ink); }
.sh-contact-ic {
    flex: 0 0 36px; height: 36px; border-radius: var(--sh-r-control); border: 1px solid var(--sh-hairline);
    display: inline-flex; align-items: center; justify-content: center; background: var(--sh-surface); font-size: 1.125rem;
}
.sh-contact-panel strong { display: block; font-size: .9375rem; font-weight: 500; }
.sh-contact-panel small { display: block; font-size: .8125rem; color: var(--sh-muted); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
    .sh-contact[open] .sh-contact-panel { animation: sh-enter .2s var(--sh-ease) both; }
}

.sh-icon-btn {
    position: relative; width: 44px; height: 44px; border: 0; border-radius: var(--sh-r-control);
    background: none; color: var(--sh-ink); font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
}
.sh-icon-btn:hover { background: var(--sh-tint); }
.sh .popover .client-alerts { list-style: none; margin: 0; padding: 0; }
.sh .popover .client-alerts a { display: flex; gap: 8px; padding: 8px; border-radius: 8px; color: var(--sh-ink); }
.sh .popover .client-alerts a:hover { background: var(--sh-tint); text-decoration: none; }

/* The bar never pushes Contratar out: links shrink first, actions never do */
.sh-nav.navbar { flex-wrap: nowrap; }
.sh-brand, .sh-nav-actions { flex-shrink: 0; }
.sh-nav-collapse { min-width: 0; }
@media (max-width: 1199.98px) { .sh-nav.navbar { flex-wrap: wrap; } }
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .sh-brand-tag { display: none !important; }
    .sh-nav .navbar-nav > li > a, .sh-nav .navbar-nav > li > .dropdown-toggle { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Account: avatar (clients) / Ingresar (guests), fixed at the end of the bar ---------- */
.sh-account { position: relative; }
.sh-avatar-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 6px 0 4px; border: 0;
    border-radius: 9999px; background: none; color: var(--sh-ink);
}
.sh-avatar-btn:hover, .sh-account.show .sh-avatar-btn { background: var(--sh-tint); }
.sh-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sh-petrol); color: var(--sh-on-petrol); font-weight: 600; font-size: .9375rem;
    box-shadow: 0 0 0 2px var(--sh-surface), 0 0 0 3px var(--sh-cyan);
}
.sh-avatar-caret { font-size: .75rem; color: var(--sh-muted); transition: transform .15s; }
.sh-account.show .sh-avatar-caret { transform: rotate(180deg); }
.sh .sh-account-menu { min-width: 260px; margin-top: 8px; padding: 6px; }
.sh-account-head { display: flex; flex-direction: column; gap: 1px; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--sh-hairline); }
.sh-account-head strong { font-size: .9375rem; font-weight: 600; color: var(--sh-ink); }
.sh-account-head span { font-size: .8125rem; color: var(--sh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh .sh-account-menu .dropdown-item { padding: 8px 12px; font-size: .9375rem; }
.sh .sh-account-menu .sh-account-logout { color: var(--sh-danger); }
.sh-login-btn { min-height: 36px; }
@media (max-width: 374.98px) { .sh-login-btn { padding: 6px 10px; } .sh-brand { margin-right: 0; } }
/* Some page rules reset `background` on inputs; the select chevron must survive them */
.sh select.form-control:not([multiple]):not([size]), .sh select.custom-select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%230A2C36' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 16px 16px !important;
    -webkit-appearance: none; appearance: none; padding-right: 42px;
}
.sh-account-kicker { font-size: .6875rem !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-cyan-ink) !important; }
.sh .sh-account-switch {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 8px; padding: 5px 10px;
    border: 1px solid var(--sh-hairline-strong); border-radius: 8px; font-size: .8125rem; font-weight: 500; color: var(--sh-ink);
    text-decoration: none;
}
.sh .sh-account-switch:hover { background: var(--sh-tint); border-color: var(--sh-petrol); color: var(--sh-ink); }
.sh .sh-account-label { margin: 2px 12px 4px; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 6. Dark mode adjustments ----------
 * Tokens do most of the work (see the :root[data-theme="dark"] block). These rules cover the
 * places where a role changes rather than a value: the primary fill is cyan in dark, so its arrow
 * chip inverts to the canvas colour (as on the site), and Nexus / Bootstrap pieces that hardcode
 * white or light greys. */
:root[data-theme="dark"] .sh-btn-primary .sh-chip { background: var(--sh-canvas); color: var(--sh-cyan); }
:root[data-theme="dark"] .sh-prebar { background: var(--sh-raised); color: var(--sh-ink); border-bottom: 1px solid rgb(81 206 233 / .25); }
:root[data-theme="dark"] .sh .sh-prebar-link, :root[data-theme="dark"] .sh .sh-prebar .btn,
:root[data-theme="dark"] .sh .sh-prebar-link:hover { color: var(--sh-ink); }
:root[data-theme="dark"] .sh-prebar-sep { background: var(--sh-hairline-strong); }
:root[data-theme="dark"] .sh ::selection { background: rgb(81 206 233 / .4); color: var(--sh-ink); }

:root[data-theme="dark"] .sh .breadcrumb-item.active { color: var(--sh-muted); }
/* Markdown editor (tickets): bootstrap-markdown paints its parts white / light grey */
:root[data-theme="dark"] .sh .md-editor > .md-header,
:root[data-theme="dark"] .sh .md-editor > .md-footer,
:root[data-theme="dark"] .sh .md-editor .md-preview { background: var(--sh-canvas) !important; border-color: var(--sh-hairline) !important; color: var(--sh-muted); }
:root[data-theme="dark"] .sh .md-editor > textarea,
:root[data-theme="dark"] .sh .md-editor > .md-input { background: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-hairline) !important; }
:root[data-theme="dark"] .sh .markdown-editor-status, :root[data-theme="dark"] .sh .markdown-editor-status .small-font { color: var(--sh-muted) !important; }
:root[data-theme="dark"] .sh .multiselect.btn, :root[data-theme="dark"] .sh .multiselect-selected-text { color: var(--sh-ink) !important; }
/* Nexus paints the registration fields white by id */
.sh #registration .field, .sh #registration .form-control { background-color: var(--sh-surface); color: var(--sh-ink); }
/* Floating surfaces read the tokens (Nexus paints them white) */
.sh .dropdown-menu { background-color: var(--sh-surface); color: var(--sh-ink); }
.sh .dropdown-divider { border-top-color: var(--sh-hairline); }
.sh .popover { background-color: var(--sh-surface); }
.sh .popover-body, .sh .popover-header { color: var(--sh-ink); background-color: transparent; border-bottom-color: var(--sh-hairline); }
.sh .bs-popover-bottom > .arrow::after, .sh .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--sh-surface); }
.sh .bs-popover-bottom > .arrow::before, .sh .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--sh-hairline); }
.sh .bs-popover-top > .arrow::after, .sh .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--sh-surface); }
.sh .bs-popover-top > .arrow::before, .sh .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--sh-hairline); }
.sh .modal-content { background-color: var(--sh-surface); color: var(--sh-ink); }
.sh .modal-header, .sh .modal-footer { border-color: var(--sh-hairline); }
.sh .close { color: var(--sh-ink); text-shadow: none; }
:root[data-theme="dark"] .sh .tooltip-inner { background: var(--sh-raised); color: var(--sh-ink); }
/* Theme preference in the footer (and on the invoice page): a three-option segmented control */
.sh-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--sh-hairline); border-radius: 9999px; background: var(--sh-canvas); }
.sh-theme-switch button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 9999px;
    background: none; color: var(--sh-muted); font: 500 .8125rem/1 var(--sh-font); cursor: pointer; transition: background-color .2s, color .2s;
}
.sh-theme-switch button:hover { color: var(--sh-ink); }
.sh-theme-switch button[aria-checked="true"] { background: var(--sh-surface); color: var(--sh-ink); box-shadow: 0 0 0 1px var(--sh-hairline-strong); }
.sh-theme-switch .sh-icon { font-size: 1rem; }
:root[data-theme="dark"] .sh .bs-tooltip-top .arrow::before, :root[data-theme="dark"] .sh .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--sh-raised); }
:root[data-theme="dark"] .sh .bs-tooltip-bottom .arrow::before, :root[data-theme="dark"] .sh .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--sh-raised); }
/* Data-URI images cannot read tokens: light versions of the select chevron and the checkbox tick */
:root[data-theme="dark"] .sh select.form-control:not([multiple]):not([size]),
:root[data-theme="dark"] .sh select.custom-select:not([multiple]),
:root[data-theme="dark"] .sh .custom-select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23E6EEF0' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E") !important; }
:root[data-theme="dark"] .sh-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23071317' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ---------- 7. QA fixes (2026-10-08) ---------- */
/* Nexus colours every header link #444 (header.header .navbar a), which also hit the account menu */
.sh header.sh-header .navbar .sh-account-menu .dropdown-item:not(.sh-account-logout),
.sh header.sh-header .navbar .sh-account-menu .sh-account-switch { color: var(--sh-ink); }
:root[data-theme="dark"] .sh .bg-light { background-color: var(--sh-surface) !important; }
.sh .markdown-editor-status, .sh .markdown-editor-status .small-font { color: var(--sh-muted) !important; }
/* Sticky bar: the sticky box must be the header itself (the nav wrapper is only as tall as its
   parent, so it never stuck). The pre-header scrolls away; only the floating nav stays. */
.sh header.sh-header { position: sticky; top: -40px; z-index: 1030; }
:root[data-theme="dark"] .sh header.sh-header { top: -41px; }
.sh .sh-navwrap { position: relative; }
@media (max-width: 1279.98px) {
    /* Hamburger layout only (the inline desktop nav must not clip its dropdowns): an open menu taller
       than the screen scrolls inside itself (the header is sticky) and never scrolls sideways */
    .sh-nav-collapse.show, .sh-nav-collapse.collapsing { max-height: calc(100vh - 96px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 374.98px) {
    .sh-avatar-caret { display: none; }
    .sh-nav-actions { gap: 2px; }
}
/* Home cards: Nexus draws a light-grey top border on .card-accent-* */
.sh .client-home-cards [class*="card-accent-"] { border-top-color: var(--sh-hairline); }
/* Sticky nav: the 12px gap above the floating bar is canvas, so content does not show through */
.sh .sh-navwrap { background: var(--sh-canvas); }
/* Room below the footer so the floating chat button never covers its last row (theme switch) */
.sh .sh-footer { margin-bottom: 84px; }
/* Theme preference inside the hamburger menu (below 1200px) */
.sh-theme-menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 4px; padding: 12px 12px 4px; border-top: 1px solid var(--sh-hairline); }
.sh-theme-menu-label { font-size: .9375rem; font-weight: 500; color: var(--sh-ink); }
/* Footer social links, as on www.silverhost.cl: quiet 44px icon buttons under the tagline */
.sh-footer-social { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 0 -12px; padding: 0; list-style: none; }
.sh-footer-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--sh-r-control); color: var(--sh-muted); font-size: 1.25rem; transition: background-color .15s, color .15s;
}
.sh-footer-social a:hover, .sh-footer-social a:focus-visible { background: var(--sh-tint); color: var(--sh-ink); text-decoration: none; }
/* The inline desktop nav (from 1280px) has no theme row: the footer control is enough */
@media (min-width: 1280px) { .sh-theme-menu { display: none; } }
/* Mouse clicks keep no focus ring (Bootstrap reboot draws the browser one); keyboard focus keeps the theme ring */
.sh button:focus:not(:focus-visible), .sh [role="radio"]:focus:not(:focus-visible) { outline: 0; }
/* Notifications popover: icon right next to the message (Nexus gives the icon a wide column) */
.sh .popover-user-notifications ul.client-alerts li a > i { flex: none; width: 1.25em; margin: 3px 0 0; }
.sh .popover-user-notifications ul.client-alerts li a > .message { flex: 1; margin: 0; padding: 0; }