/* SelectShop clear glass system. Bootstrap supplies reset, grid and form primitives. */
:root {
  color-scheme:light; --bs-body-font-family:Inter,"Segoe UI",Arial,sans-serif; --bs-body-color:#182235; --bs-body-bg:#eef4fc;
  --ink:#182235; --muted:#63718a; --line:rgba(96,118,153,.19); --line-strong:rgba(78,103,142,.30);
  --surface:rgba(255,255,255,.68); --surface-strong:rgba(255,255,255,.88); --brand:#315cc9; --brand-2:#7b61d8;
  --blue:#3478e5; --green:#198b69; --amber:#a96c0d; --red:#c64658; --r:20px; --r-sm:13px;
  --shadow:0 18px 50px rgba(49,72,111,.12); --shadow-soft:0 8px 28px rgba(49,72,111,.09);
}
* { box-sizing:border-box; } body { min-width:320px; color:var(--ink); background:radial-gradient(circle at 3% 0%,#bcd8ff9c,transparent 29rem),radial-gradient(circle at 92% 10%,#dec5ff99,transparent 32rem),linear-gradient(135deg,#f8fbff,#eaf1fb 48%,#f6f1ff); font-family:var(--bs-body-font-family); line-height:1.5; }
body::before { content:""; position:fixed; z-index:-1; inset:0; opacity:.55; pointer-events:none; background-image:linear-gradient(#7891b709 1px,transparent 1px),linear-gradient(90deg,#7891b709 1px,transparent 1px); background-size:32px 32px; }
::selection { color:#fff; background:var(--brand); } h1,h2,h3 { color:var(--ink); letter-spacing:-.04em; line-height:1.12; } p { color:var(--muted); } button,input,select,textarea { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.micro-label,.eyebrow { color:#6b7890; font:700 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.13em; }

/* Brand */
.brand-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; flex-shrink:0; }.brand-art { display:block; position:relative; flex:none; width:156px; height:40px; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 5px 14px #324a711f; }.brand-logo { display:block; position:absolute; top:-58px; left:0; width:156px; max-width:none; height:156px; object-fit:contain; }.brand-caption { color:#627087; font-size:11px; font-weight:650; letter-spacing:.055em; }

/* Bootstrap controls */
.form-control,.form-select,textarea { min-height:46px; color:var(--ink)!important; border:1px solid var(--line-strong)!important; border-radius:11px!important; background:#ffffffc7!important; box-shadow:inset 0 1px #ffffffb3; }.form-control::placeholder,textarea::placeholder { color:#94a0b3; }.form-control:focus,.form-select:focus,textarea:focus { border-color:#315cc994!important; box-shadow:0 0 0 .22rem #315cc922!important; }
.form-grid input,.form-grid select,#user-form input,#user-form select { color:var(--ink)!important; border:1px solid var(--line-strong)!important; border-radius:11px!important; background:#ffffffc7!important; box-shadow:inset 0 1px #ffffffb3!important; }
.btn,button { min-height:40px; border-radius:11px; font-weight:700; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; }.btn:hover:not(:disabled),button:hover:not(:disabled) { transform:translateY(-1px); }.btn:active:not(:disabled),button:active:not(:disabled) { transform:translateY(0); }
.primary,.form-grid button,.filter-action,.report-actions button { color:#fff!important; border:1px solid transparent!important; background:linear-gradient(135deg,var(--brand),var(--brand-2))!important; box-shadow:0 9px 20px #3e5bbe38; }.primary:hover:not(:disabled),.form-grid button:hover,.filter-action:hover,.report-actions button:hover:not(:disabled) { box-shadow:0 12px 26px #3e5bbe48; }.error { color:var(--red); font-size:13px; }

/* Login */
#login { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); grid-template-rows:auto 1fr auto; gap:42px 8%; align-items:center; min-height:100svh; padding:28px max(30px,calc((100vw - 1260px)/2)); background:radial-gradient(circle at 3% 0%,#bcd8ff9c,transparent 29rem),radial-gradient(circle at 92% 10%,#dec5ff99,transparent 32rem),linear-gradient(135deg,#f8fbff,#eaf1fb 48%,#f6f1ff)!important; }.login-header,.login-footer { display:flex; grid-column:1/-1; align-items:center; justify-content:space-between; gap:18px; }.login-header { padding-bottom:22px; border-bottom:1px solid var(--line); }.login-header .brand-lockup { flex-direction:row; align-items:center; gap:15px; }.login-header .brand-caption { padding-left:15px; border-left:1px solid var(--line); }.login-header .micro-label { padding:8px 12px; border:1px solid #fff; border-radius:999px; background:#ffffff6e; }
.login-manifesto { min-width:0; padding:32px 0; }.login-kicker { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; color:#54647d; border:1px solid #fff; border-radius:999px; background:#ffffff78; box-shadow:0 6px 16px #465b840d; font-size:12px; }.login-kicker > span { width:7px; height:7px; border-radius:50%; background:#6b5bd0; box-shadow:0 0 0 4px #6b5bd022; }.display-title { max-width:670px; margin:26px 0 18px; font-size:clamp(40px,5vw,72px); font-weight:680; letter-spacing:-.06em; }.display-title > span { color:transparent; background:linear-gradient(115deg,#294eae,#7560d4 55%,#b4549b); background-clip:text; }.login-description { max-width:540px; margin:0; font-size:16px; line-height:1.75; }.login-capabilities { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }.login-capabilities span { padding:8px 12px; color:#52617a; border:1px solid #fff; border-radius:10px; background:#ffffff73; box-shadow:0 6px 16px #465b840d; font-size:12px; }
.login-card { width:100%; max-width:430px; justify-self:end; padding:32px; border:1px solid #ffffffed; border-radius:24px; background:linear-gradient(135deg,#ffffffd6,#f5f9ffa3); box-shadow:var(--shadow); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); }.login-card h2 { margin:14px 0 10px; font-size:29px; font-weight:680; }.login-welcome { margin:0 0 25px; font-size:13px; }.login-card label { display:block; margin:17px 0 7px; color:#44536b; font-size:12px; font-weight:700; }.login-card .primary { width:100%; margin-top:24px; padding:11px 18px; }.login-card .error { min-height:0; margin-top:12px; }.login-card .error:empty { display:none; }.login-help { margin:18px 0 0; font-size:11px; line-height:1.65; }.login-footer { padding-top:19px; color:#748097; border-top:1px solid var(--line); font-size:10px; letter-spacing:.1em; }.login-footer i { font-style:normal; }

/* Workspace */
#app { display:grid; grid-template-columns:254px minmax(0,1fr); min-height:100vh; } #app > aside { position:sticky; top:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:254px; min-width:0; gap:16px; height:100svh; padding:24px 14px 18px; overflow:hidden; border-right:1px solid #ffffffcc; background:#f8fbffa1; box-shadow:10px 0 30px #34486e0f; backdrop-filter:blur(24px) saturate(130%); -webkit-backdrop-filter:blur(24px) saturate(130%); } #app > aside .brand-lockup { padding:0 9px 17px; border-bottom:1px solid var(--line); }
.account { padding:13px; color:var(--muted); border:1px solid #ffffffdf; border-radius:14px; background:#ffffff85; box-shadow:0 6px 17px #374b710d; font-size:11px; overflow-wrap:anywhere; }.account b { display:block; margin-bottom:3px; color:var(--ink); font-size:12px; } nav { display:grid; gap:4px; min-height:0; overflow-y:auto; } nav button { display:flex; align-items:center; gap:11px; padding:10px 12px; color:#607087; border:1px solid transparent; background:transparent; text-align:left; font-size:12px; } nav button:hover:not(:disabled) { color:var(--brand); border-color:#4865b01a; background:#ffffff9e; } nav button.active,nav button.active:hover:not(:disabled) { color:#2449aa; border-color:#6674d926; background:linear-gradient(120deg,#e2ebffef,#f2ebffc7); box-shadow:0 5px 14px #4f5bad14; }.nav-icon { display:inline-grid; place-items:center; width:18px; color:currentColor; font-size:16px; }.logout { margin-top:auto; color:#617087; border:1px solid #66789733; background:#ffffff73; }.logout:hover:not(:disabled) { color:var(--red); border-color:#c6465838; background:#fff5f6de; }.nav-toggle { position:absolute; z-index:4; top:37px; right:-14px; width:28px; min-height:28px; height:28px; padding:0; color:#53627a; border:1px solid #fff; border-radius:50%; background:#fafcfff2; box-shadow:0 4px 12px #2f426621; } #app.compact { grid-template-columns:78px minmax(0,1fr); }
main { width:100%; max-width:1800px; padding:34px 36px 56px; }.topbar { align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; padding-bottom:25px; border-bottom:1px solid var(--line); }.topbar h1 { margin:8px 0 6px; font-size:clamp(28px,2.8vw,40px); font-weight:690; }.topbar p { margin:0; font-size:12px; }.role,.period-chip { color:#596984; border:1px solid #ffffffed; background:#ffffff7d; box-shadow:0 5px 15px #3f547d0f; }.role { padding:8px 13px; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }.period-chip { padding:9px 13px; border-radius:999px; font-size:10px; white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px; }.metric,.section { border:1px solid #ffffffe0; border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-soft); backdrop-filter:blur(17px) saturate(135%); -webkit-backdrop-filter:blur(17px) saturate(135%); }.metric { position:relative; min-width:0; padding:22px; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; }.metric::after { content:""; position:absolute; right:-35px; bottom:-45px; width:90px; height:90px; border-radius:50%; background:#6f85e119; }.metric:hover { transform:translateY(-2px); box-shadow:0 14px 34px #34486e21; }.metric > span { display:block; color:#71809a; font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }.metric strong { display:block; margin-top:15px; color:var(--ink); font-size:30px; font-weight:720; letter-spacing:-.055em; overflow-wrap:anywhere; }.section { padding:24px; margin-bottom:22px; overflow:auto; }.section-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }.section-head h2 { margin:0 0 5px; font-size:19px; font-weight:680; }.section-head p { margin:0; font-size:12px; }.dashboard-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px; }.dashboard-intro h2 { margin:5px 0 0; font-size:25px; font-weight:680; }.eyebrow { color:#536fc3; }.dashboard-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:kpi; }.dashboard-kpis .metric { min-height:156px; padding-top:38px; counter-increment:kpi; }.dashboard-kpis .metric::before { content:"0" counter(kpi) " /"; position:absolute; top:13px; right:18px; color:#92a0b7; font:10px ui-monospace,monospace; letter-spacing:.08em; }.dashboard-kpis .metric:first-child { background:linear-gradient(135deg,#e8efffe6,#f6f1ffd1); }.dashboard-kpis .metric:first-child strong { color:var(--brand); }.delta { display:flex; flex-wrap:wrap; gap:4px 7px; margin-top:10px; color:#708099; font-size:11px; }.delta b { font-weight:750; }.delta.up b { color:var(--green); }.delta.down b { color:var(--red); }.dashboard-bottom { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; align-items:start; }.dashboard-bottom > .section:only-child { grid-column:1/-1; }.trend-data { margin-top:17px; padding-top:14px; border-top:1px solid var(--line); }.trend-data summary { color:#586984; cursor:pointer; font-size:12px; }.section svg[role="img"] { min-width:500px!important; }.section svg text { fill:#71809a; }.section svg line { stroke:#647a9d33; }.section svg polyline { stroke:var(--blue); }.section svg polygon,.section svg circle { fill:var(--blue); }

/* Operational content */
table { width:100%; min-width:620px; border-collapse:collapse; } th { padding:0 12px 12px; color:#74829a; font-size:10px; font-weight:750; letter-spacing:.075em; } td { padding:13px 12px; color:#334159; border-top:1px solid var(--line); font-size:12px; } tbody tr:hover { background:#f1f6ffb8; } td.num,th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }.tabla-ancha { margin:0 -24px; padding:0 24px; overflow-x:auto; }.tabla-ancha table { width:auto; min-width:100%; }.tabla-ancha td,.tabla-ancha th { max-width:none; white-space:nowrap; }.tabla-ancha td.wrap { min-width:190px; max-width:280px; white-space:normal; overflow-wrap:break-word; }.empty { padding:26px 0; color:var(--muted); }.badge { display:inline-block; padding:5px 9px; color:#51617b; border:1px solid #6e7e9c2e; border-radius:999px; background:#f1f5fcd1; font-size:10px; font-weight:700; white-space:nowrap; }.badge.succeeded,.badge.accepted,.badge.activo,.badge.en_tiempo { color:#147353; border-color:#198b692e; background:#e7f7f0; }.badge.failed,.badge.vencido,.badge.critical { color:#ae3a4b; border-color:#c646582b; background:#fff0f2; }.badge.partial,.badge.alerta,.badge.pending { color:#91600c; border-color:#a96c0d2e; background:#fff7df; }.attention { display:grid; }.att { display:flex; align-items:center; gap:13px; padding:15px 3px; border-bottom:1px solid var(--line); }.att:last-child { border-bottom:0; }.att[data-goto] { cursor:pointer; border-radius:8px; }.att[data-goto]:hover { background:#f0f5ffb8; }.att .dot { width:7px; height:7px; flex:none; border-radius:50%; }.att.good .dot { background:var(--green); }.att.warn .dot { background:var(--amber); }.att.crit .dot { background:var(--red); }.att.calm .dot { background:#8b98ab; }.att .txt { flex:1; min-width:0; }.att .txt b { display:block; color:#2b3950; font-size:13px; font-weight:680; }.att .txt span { color:#748199; font-size:11px; }.att .n { color:#26354d; font-size:23px; font-weight:700; }
.filtros,.acciones { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }.filtros input,.filtros select { flex:1 1 160px; min-width:140px; }.casos { display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto; }.caso { display:grid; gap:5px; width:100%; padding:12px 13px; color:var(--ink); text-align:left; border:1px solid var(--line); border-radius:12px; background:#ffffff8a; }.caso:hover,.caso[aria-current="true"] { border-color:#315cc952; background:#e9efffc2; }.caso b { font-size:13px; }.caso p { margin:0; font-size:12px; }.caso-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.ficha .pregunta,.api-payload { border:1px solid var(--line); border-radius:12px; background:#f7faffb5; }.ficha .pregunta { padding:14px; margin:12px 0; }.acciones button { padding:9px 13px; color:#53627a; border:1px solid var(--line); background:#ffffff8f; }.acciones button.principal { color:#fff; border-color:transparent; background:var(--brand); }.aviso,.reason-panel { padding:14px 16px; border:1px solid #a96c0d38; border-radius:13px; background:#fff7dfbd; }.aviso b,.reason-panel span { color:var(--amber); }.detail-button,.back-button,.secondary-action,.report-pager button { color:#48608e; border:1px solid #506a9d3d; background:#ffffff78; }.detail-button::after { content:" ↗"; margin-left:6px; color:var(--brand); }.detail-button[data-goto]::after { content:none; }.detail-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--line); }.detail-list div { min-width:0; padding:16px; background:#ffffff9e; }.detail-list span { display:block; margin-bottom:7px; color:#71809a; font-size:10px; letter-spacing:.045em; text-transform:uppercase; }.detail-list b { color:#334159; font-size:13px; overflow-wrap:anywhere; }.api-payload { color:#43536d; padding:18px; font:12px/1.65 ui-monospace,Consolas,monospace; white-space:pre-wrap; }.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end; }.form-grid label { margin:0 0 6px; }.skeleton { display:grid; gap:16px; }.sk { height:100px; border-radius:var(--r); background:#ffffff8a; animation:pulse 1.4s ease infinite alternate; } @keyframes pulse { to { opacity:.48; } }

/* Legacy inline controls inherit the Bootstrap treatment without changing their behavior. */
textarea[style*="background:"],input[style*="background:"],select[style*="background:"] { color:var(--ink)!important; border-color:var(--line-strong)!important; background:#ffffffc7!important; }
button[style*="background:"] { color:#48608e!important; border:1px solid #506a9d3d!important; border-radius:10px!important; background:#ffffff8f!important; box-shadow:none!important; }
button[style*="background:#5ea0ff"],button[style*="background:#2f81f7"],button[style*="background:#51d09b"] { color:#fff!important; border-color:transparent!important; background:linear-gradient(135deg,var(--brand),var(--brand-2))!important; box-shadow:0 8px 18px #3e5bbe2e!important; }
button[style*="background:#ff8e98"] { color:#ae3a4b!important; border-color:#c646582e!important; background:#fff0f2!important; }

@media(min-width:761px) { #app.compact > aside .brand-lockup { align-items:center; padding:0 0 17px; } #app.compact .brand-art { width:42px; } #app.compact .brand-logo { width:260px; height:260px; top:-100px; left:-8px; } #app.compact .brand-caption,#app.compact .account { display:none; } #app.compact nav button { justify-content:center; padding:10px 6px; } #app.compact nav button > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } #app.compact .logout { padding:8px; font-size:0; } #app.compact .logout::before { content:"↪"; font-size:19px; } }
@media(max-width:1200px) { .dashboard-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-bottom { grid-template-columns:1fr; } }
@media(max-width:1000px) { #login { grid-template-columns:minmax(0,1fr) minmax(300px,1fr); gap:30px; padding:24px; } main { padding:28px 24px 42px; }.dashboard-intro { flex-wrap:wrap; }.topbar > div { min-width:0; } }
@media(max-width:760px) { #login { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:26px; padding:21px; }.login-header .micro-label { display:none; }.login-header .brand-lockup { gap:11px; flex-wrap:wrap; }.login-header .brand-caption { padding-left:0; border:0; }.login-manifesto { padding:4px 0 0; }.display-title { margin:19px 0 15px; font-size:39px; }.login-description { font-size:14px; }.login-capabilities { margin-top:20px; }.login-card { justify-self:center; padding:24px; border-radius:19px; }.login-footer { font-size:9px; } #app,#app.compact { display:block; } #app > aside { position:relative; top:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; height:auto; gap:13px; padding:15px; overflow:visible; border-right:0; border-bottom:1px solid #ffffffcc; } #app > aside .brand-lockup { display:flex; padding:0; border:0; } #app > aside .brand-caption,.account,.nav-toggle { display:none; } #navigation { display:flex; grid-row:2; grid-column:1/-1; width:100%; min-width:0; gap:6px; overflow-x:auto; padding:2px 0 6px; } #navigation button { flex:none; padding:9px 12px; white-space:nowrap; font-size:12px; }.nav-icon { display:none; }.logout { grid-row:1; grid-column:2; align-self:center; margin:0; padding:9px 11px; white-space:nowrap; font-size:11px; } main { padding:23px 15px 40px; }.topbar { flex-wrap:wrap; gap:11px; margin-bottom:24px; padding-bottom:20px; }.topbar h1 { font-size:28px; }.role { padding:6px 10px; font-size:9px; }.period-chip { white-space:normal; }.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.metric { padding:16px; }.metric strong { font-size:23px; }.dashboard-kpis .metric { min-height:148px; padding:34px 15px 18px; }.dashboard-intro { flex-direction:column; align-items:flex-start; gap:13px; }.dashboard-intro h2 { font-size:22px; }.section { padding:19px; border-radius:15px; }.section-head { flex-wrap:wrap; }.tabla-ancha { margin:0 -19px; padding:0 19px; }.report-actions,.report-pager { align-items:flex-start; flex-wrap:wrap; }.report-search { grid-column:1/-1; }.form-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:420px) { .dashboard-kpis { grid-template-columns:minmax(0,1fr); } }

/* Material-inspired information hierarchy, adapted for operational data. */
.breadcrumb-line { display:flex; align-items:center; gap:8px; margin-bottom:9px; color:#7c89a0; font-size:11px; font-weight:650; }
.breadcrumb-home { color:#395ebe; font-weight:750; }
.topbar-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.live-indicator { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; color:#5f6f88; border:1px solid #ffffffed; border-radius:999px; background:#ffffff82; box-shadow:0 5px 15px #3f547d0f; font-size:10px; font-weight:700; }
.live-indicator i { width:7px; height:7px; border-radius:50%; background:#24a176; box-shadow:0 0 0 4px #24a1761c; }
.app-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:12px; padding:22px 5px 0; color:#7a879c; border-top:1px solid var(--line); font-size:10px; font-weight:650; letter-spacing:.04em; }

nav { flex:1 1 auto; width:100%; gap:13px; }
.nav-group { display:grid; width:100%; gap:3px; }
.nav-group button > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-group-title { padding:0 11px 3px; color:#8894a7; font:750 9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; }
.nav-sub { display:grid; gap:3px; margin:2px 0 4px 25px; padding-left:11px; border-left:1px solid var(--line); }
.nav-sub button { padding:7px 10px; font-size:11px; }

.muted { color:var(--muted); }

/* Puntos de las 4 etapas del proceso de una devolución, como en la app de CEDI: rellenos los
   ya pasados, resaltado el actual, vacíos los que faltan. */
.timeline-compact { display:inline-flex; align-items:center; gap:3px; }
.timeline-compact .dot { width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.timeline-compact .dot.done { background:var(--green); }
.timeline-compact .dot.current { background:var(--brand); box-shadow:0 0 0 3px #315cc933; }

/* Vista Pipeline de Casos: una columna por etapa, tarjetas apilables dentro. */
.pipeline-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; }
.pipeline-column { display:flex; flex-direction:column; flex:1 1 240px; min-width:240px; max-height:74vh; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.pipeline-col-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--ink); }
.pipeline-col-body { display:grid; gap:8px; padding:10px; overflow-y:auto; }
.pipeline-card { display:grid; gap:3px; width:100%; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:10px; background:var(--surface-strong); }
.pipeline-card:hover { border-color:#315cc952; background:#fff; }
.pipeline-card-folio { font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.05em; }
.pipeline-card-titulo { overflow:hidden; color:var(--ink); font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.pipeline-card-meta { margin-top:2px; }

/* Fila etiqueta/valor como en la ficha de detalle de la app de CEDI, pero en cuadrícula: una
   sola columna (antes) hacía que un resumen de 9 datos ocupara 9 líneas completas de ancho de
   pantalla sin necesidad, ya que casi todos los valores son cortos. */
.info-filas { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:0 24px; }
.info-filas > div { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.info-filas span { flex:none; color:var(--muted); font-size:12px; }
.info-filas b { min-width:0; color:var(--ink); font-size:12px; font-weight:650; text-align:right; overflow-wrap:anywhere; }

.metric { padding-left:24px; }
.metric-icon { display:grid; place-items:center; width:32px; height:32px; margin-bottom:15px; color:#315cc9; border-radius:10px; background:linear-gradient(135deg,#e4edff,#f0eaff); box-shadow:0 7px 14px #315cc91c; font-size:16px; font-weight:800; }
.metric-label { display:block; color:#71809a; font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.metric > span:not(.metric-icon):not(.metric-label) { color:#71809a; }
.metric strong { margin-top:8px; }
.dashboard-kpis .metric { padding-top:23px; }
.dashboard-kpis .metric::before { top:16px; right:18px; }
.dashboard-kpis .metric:first-child .metric-icon { color:#253fa2; background:linear-gradient(135deg,#dce9ff,#eee5ff); }
.section-kicker { display:block; margin-bottom:6px; color:#6574ad; font:750 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }
.section-head { position:relative; }
.section-head::after { content:""; position:absolute; bottom:-1px; left:0; width:38px; height:2px; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }

.table-responsive { border-radius:12px; }
.table { --bs-table-bg:transparent; --bs-table-color:#334159; --bs-table-hover-bg:#f1f6ffb8; margin:0; }
.table > :not(caption) > * > * { box-shadow:none; }
.table thead th { vertical-align:middle; border-bottom:1px solid var(--line); }
.table tbody tr:last-child td { border-bottom:0; }
.empty { display:flex; align-items:flex-start; gap:11px; }
.empty > span { display:grid; place-items:center; width:28px; height:28px; flex:none; color:#6680c2; border-radius:9px; background:#e8efff; font-size:17px; }
.empty b { display:block; color:#3e4e68; font-size:13px; }.empty p { margin:3px 0 0; font-size:12px; }
.detail-button,.back-button,.secondary-action,.report-pager button { border-radius:10px; font-size:11px; font-weight:750; }
.report-actions,.report-pager { padding:14px 0; }

@media(max-width:760px) {
  .breadcrumb-line { margin-bottom:7px; }
  .topbar-actions { justify-content:flex-start; width:100%; }
  .live-indicator { font-size:9px; }
  .app-footer { flex-direction:column; align-items:flex-start; gap:5px; padding-bottom:8px; }
  #navigation { gap:13px; }
  .nav-group { display:flex; gap:6px; }
  .nav-group-title { display:none; }
  .nav-group + .nav-group { padding-left:7px; border-left:1px solid var(--line); }
  .dashboard-kpis .metric { padding-top:18px; }
  .dashboard-kpis .metric::before { top:12px; right:13px; }
  .metric-icon { width:28px; height:28px; margin-bottom:11px; font-size:14px; }
  .metric { padding:15px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Atención a clientes: bandeja de casos.
   Vivían en el bloque <style> de index.html con los colores del tema oscuro, y como ui.css no
   los definía ganaban por defecto: etiquetas verdes sobre #12301f y filtros #16243a en una
   página clara. Se mueven aquí, que es donde vive el sistema visual. */
.espera { padding:3px 9px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.espera.fresca { color:#147353; border-color:#198b692e; background:#e7f7f0; }
.espera.media { color:#91600c; border-color:#a96c0d2e; background:#fff7df; }
.espera.tarde { color:#ae3a4b; border-color:#c646582b; background:#fff0f2; }
.atendido { color:#147353; font-size:11px; font-weight:700; }
.hermanas { margin-top:14px; color:var(--muted); font-size:12px; }
.hermanas li { margin:6px 0; overflow-wrap:anywhere; }
.ficha h3 { margin:0 0 4px; font-size:16px; font-weight:680; overflow-wrap:anywhere; }
.ficha .pregunta { overflow-wrap:anywhere; }

/* Hilo de conversación de un reclamo de Mercado Libre, calcado de Desktop/returns: un mensaje
   por burbuja, con quién-a-quién y fecha arriba, para no confundir «lo dijo el comprador» con
   «lo dijo el vendedor» al leer rápido. */
.claim-thread { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.claim-msg { padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:#f8faff; }
.claim-msg.from-complainant { border-left:3px solid #ae3a4b; }
.claim-msg.from-respondent { border-left:3px solid var(--brand); }
.claim-msg.from-mediator { border-left:3px solid #91600c; background:#fffaf0; }
.claim-msg-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; }
.claim-msg-sender { font-size:12px; font-weight:700; color:var(--ink); }
.claim-msg-date { font-size:11px; color:var(--muted); white-space:nowrap; }
.claim-msg-body { font-size:12.5px; color:var(--ink); line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.claim-msg-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.claim-attachment-file { font-size:11px; color:var(--brand); text-decoration:none; }
.claim-attachment-file:hover { text-decoration:underline; }
.claim-attachment-thumb { display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; overflow:hidden; border:1px solid var(--line-strong); border-radius:9px; background:#eef2fb; cursor:pointer; }
.claim-attachment-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.claim-attachment-loading { font-size:11px; color:var(--muted); }

/* Conversación, revisión física, dictamen y logística iban una debajo de otra y alargaban la
   ficha mucho más de lo necesario para leerlas — 2 columnas, cada una con su propio scroll
   interno, para que la altura de la ficha no dependa de cuál de las cuatro sea la más larga. */
.ficha-grid-2x2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.ficha-grid-2x2 .section { margin-bottom:0; max-height:440px; overflow-y:auto; }
@media(max-width:900px) { .ficha-grid-2x2 { grid-template-columns:1fr; } }

/* Evidencia fotográfica del producto recibido, subida por quien lo recibe en el CEDI — separada
   de las fotos que adjunta el comprador en la conversación de Mercado Libre. Vive dentro de la
   tarjeta de revisión física (mismo momento, mismo actor), con un separador para no confundirla
   con la condición/motivo que va debajo. */
.fotos-caso { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.foto-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.foto-item { position:relative; width:96px; height:96px; }
.foto-thumb { display:inline-flex; align-items:center; justify-content:center; width:96px; height:96px; padding:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:9px; background:#eef2fb; cursor:pointer; }
.foto-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-thumb-error { font-size:11px; color:var(--muted); }
.foto-eliminar { position:absolute; top:-7px; right:-7px; display:flex; align-items:center; justify-content:center; width:22px; height:22px; min-width:0; min-height:0; padding:0; border:1px solid #ffffff; border-radius:50%; background:var(--red); color:#fff; font-size:11px; line-height:1; cursor:pointer; box-shadow:0 2px 6px #0000002e; }
.foto-eliminar:hover { background:#a83448; }
.foto-dropzone { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; border:1.5px dashed var(--line-strong); border-radius:11px; background:#f8faffb5; color:var(--muted); font-size:12px; text-align:center; cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease; }
.foto-dropzone u { color:var(--brand); }
.foto-dropzone:hover,.foto-dropzone.sobre { border-color:var(--brand); background:#eef3ffcf; }
.foto-dropzone.subiendo { opacity:.6; pointer-events:none; }
.foto-mensaje { margin:8px 0 0; font-size:11px; color:var(--muted); }
.foto-mensaje.error { color:var(--red); }

/* Ventana emergente para ver una foto en grande, compartida por la conversación de ML y las
   fotos del CEDI. */
.img-modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:30px; background:#0b1220cc; backdrop-filter:blur(4px); }
.img-modal.abierto { display:flex; }
.img-modal img { max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:0 20px 60px #00000066; }
.img-modal-cerrar { position:absolute; top:18px; right:22px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:0; min-height:0; padding:0; border:1px solid #ffffff3a; border-radius:50%; background:#ffffff1f; color:#fff; font-size:16px; cursor:pointer; }
.img-modal-cerrar:hover { background:#ffffff33; }
.ficha textarea { width:100%; min-height:110px; }
.acciones button:disabled { opacity:.45; cursor:default; transform:none; }
.acciones button.peligro { color:var(--red); border-color:#c646582e; }
.acciones button.peligro:hover:not(:disabled) { background:#fff5f6; }

/* Una cifra que se sale de lo esperado. En cero pierde el color: un número neutro no debe
   competir por la atención con los que sí la piden. */
.gap { color:var(--amber); font-weight:700; }
.gap.cero { color:var(--muted); font-weight:400; }

/* Bandeja unificada de atención a clientes. */
.chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.chip { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 13px; color:#53627a; border:1px solid var(--line-strong); border-radius:999px; background:#ffffff8f; font-size:12px; font-weight:650; }
.chip:hover:not(:disabled) { border-color:#315cc952; background:#fff; }
/* Color sólido además del degradado: el chip activo lleva texto blanco, y si el degradado no
   llega a pintar —pasa dentro de un ancestro con backdrop-filter— quedaría blanco sobre blanco.
   El fondo sólido garantiza que el texto se lea pase lo que pase. */
.chip[aria-pressed="true"] { color:#fff; border-color:transparent; background-color:var(--brand); background-image:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 8px 18px #3e5bbe30; }
.chip i { font-style:normal; font-variant-numeric:tabular-nums; opacity:.72; }
.chip[aria-pressed="true"] i { opacity:.9; }
/* Un cero se atenúa en vez de desaparecer: que el filtro siga ahí dice que la categoría existe
   y que hoy está vacía, que es información. Quitarlo haría dudar de si alguna vez estuvo. */
.chip.vacio { opacity:.5; }
.tipo { padding:3px 8px; border:1px solid var(--line); border-radius:7px; background:#f1f5fcd1; color:#51617b; font-size:10px; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.tipo.pregunta { color:#2449aa; border-color:#315cc92e; background:#e9efff; }
.tipo.conversacion { color:#5b3fb5; border-color:#7b61d82e; background:#f0ebff; }
.tipo.reclamo { color:#ae3a4b; border-color:#c646582b; background:#fff0f2; }
.tipo.devolucion { color:#91600c; border-color:#a96c0d2e; background:#fff7df; }
.caso.cerrado { opacity:.62; }
.caso.cerrado b { text-decoration:line-through; text-decoration-color:#8f9cb2; }
.asignado { color:#5b6a83; font-size:11px; }
.sin-asignar { color:#a96c0d; font-size:11px; font-weight:650; }

/* --- Ficha de una línea de venta ---------------------------------------------------------- */

/* La fila entera es el objetivo, no un botón dentro de ella: en una tabla de 19 columnas con
   desplazamiento horizontal, un botón queda fuera de la vista justo cuando se le necesita. */
.fila-abrible { cursor:pointer; }
.fila-abrible:hover td { background:#f4f7fdc4; }
.fila-abrible[aria-current="true"] td { background:#e9efff; box-shadow:inset 0 -1px 0 #315cc92e; }

.grupos-venta { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.grupo-venta h4 { margin:0 0 8px; font-size:11px; font-weight:750; letter-spacing:.04em;
  text-transform:uppercase; color:#51617b; }
/* Sin ancho mínimo las etiquetas largas —«Cargo por venta e impuestos»— empujan el valor fuera
   de su columna y la ficha deja de leerse en dos golpes de vista. */
.grupo-venta .detail-list > div { display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--line); font-size:12px; }
.grupo-venta .detail-list > div:last-child { border-bottom:0; }
.grupo-venta .detail-list span { color:var(--muted); }
.grupo-venta .detail-list b { text-align:right; overflow-wrap:anywhere; }
/* Un vacío se ve como vacío y no como un dato más: la diferencia entre «no llegó» y «es cero»
   ya costó una lectura equivocada del costo de envío. */
.grupo-venta .detail-list b.vacio { color:#a3adbe; font-weight:500; }

@media (max-width:640px) { .grupos-venta { grid-template-columns:1fr } }

/* --- Quién lleva cada caso ------------------------------------------------------------------ */

/* En la fila, no sólo en la ficha: en una cola compartida hay que poder ver de un vistazo qué
   está tomado, sin abrir caso por caso. */
.dueno { padding:2px 7px; border:1px solid var(--line); border-radius:7px; background:#f4f6fb;
  color:#5b6a83; font-size:10px; font-weight:650; overflow-wrap:anywhere; }
/* Lo propio se distingue por color y no sólo por texto: «tuyo» se busca de un vistazo, un nombre
   ajeno hay que leerlo. */
.dueno.mio { color:#2449aa; border-color:#315cc93d; background:#e9efff; }