/* =========================================================
   Garantía — UI styles
   Login + App Shell + Modules
   ========================================================= */
:root {
    --bg: #0b0f1a;
    --bg-soft: #0f1424;
    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #eef0f6;
    --border: #e3e6ef;
    --border-strong: #c8cee0;
    --text: #0f172a;
    --text-soft: #475569;
    --text-muted: #94a3b8;
    --primary: #1f6feb;
    --primary-600: #1858c4;
    --primary-50: #eef4ff;
    --success: #16a34a;
    --success-50: #dcfce7;
    --warning: #d97706;
    --warning-50: #fef3c7;
    --danger: #dc2626;
    --danger-50: #fee2e2;
    --info: #0ea5e9;
    --info-50: #e0f2fe;
    --purple: #7c3aed;
    --purple-50: #ede9fe;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
    --shadow: 0 4px 14px rgba(15,23,42,.08);
    --shadow-lg: 0 16px 40px rgba(15,23,42,.12);
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--text);
    background: var(--surface-2);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
h4 { font-size: 14px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 0 0 .8em; }
.muted { color: var(--text-muted); }
.small { font-size: 12px; }
.center { text-align: center; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.mono { font-family: var(--mono); }

/* ===================== LOGIN ===================== */
.login-body {
    background:
      radial-gradient(900px 600px at 80% -10%, rgba(31,111,235,.25), transparent 50%),
      radial-gradient(900px 600px at -10% 80%, rgba(124,58,237,.22), transparent 50%),
      linear-gradient(120deg, #0b0f1a 0%, #0f1424 100%);
    min-height: 100vh;
    color: #e6e9f3;
}
.login-wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}
.login-aside {
    padding: 56px 56px 40px;
    display: flex; flex-direction: column; gap: 48px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 7px;
}
.brand-mark span { background: rgba(255,255,255,.85); border-radius: 3px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .b1 { font-weight: 800; font-size: 18px; }
.brand-text .b2 { color: #aab3cc; font-size: 12px; }
.crumbs {
    text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
    color: #aab3cc; margin-bottom: 16px;
}
.login-hero h1 { font-size: 44px; line-height: 1.1; color: #fff; margin: 0 0 18px; }
.login-hero h1 em { color: #93c5fd; font-style: normal; }
.login-hero p { color: #c4cbe0; max-width: 540px; font-size: 15px; }
.login-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px;
}
.login-stats .n { font-size: 28px; font-weight: 800; color: #fff; }
.login-stats .l { color: #aab3cc; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }

.login-main {
    background: #fff; color: var(--text);
    display: grid; place-items: center; padding: 40px;
    border-top-left-radius: 24px; border-bottom-left-radius: 24px;
}
.login-card { width: 100%; max-width: 420px; }
.login-card h2 { font-size: 26px; }
.login-card label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 13px; }
.login-card label.row { display: flex; justify-content: space-between; align-items: center; }
.login-card .link { color: var(--primary); font-size: 12px; }
.input {
    width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px;
    font-family: var(--font); font-size: 14px; transition: border-color .15s, box-shadow .15s;
    background: #fff; color: var(--text);
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,111,235,.15); }

@media (max-width: 900px) {
    .login-wrap { grid-template-columns: 1fr; }
    .login-aside { padding: 32px; }
    .login-hero h1 { font-size: 32px; }
    .login-main { border-radius: 24px 24px 0 0; }
}

/* ===================== BUTTONS / PILLS / ALERTS ===================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border);
    background: #fff; color: var(--text); font-family: var(--font); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all .15s; line-height: 1;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-600); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn.ghost   { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { padding: 6px 11px; font-size: 12px; }
.btn.lg { padding: 12px 22px; font-size: 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.alert { padding: 11px 14px; border-radius: 10px; display: flex; gap: 10px; align-items: center; margin: 14px 0; font-size: 13px; }
.alert.danger  { background: var(--danger-50);  color: #7f1d1d; }
.alert.info    { background: var(--info-50);    color: #075985; }
.alert.success { background: var(--success-50); color: #14532d; }
.alert.warning { background: var(--warning-50); color: #78350f; }
.alert .dot {
    width: 22px; height: 22px; border-radius: 999px; background: currentColor; color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: 13px;
}

.pill, .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: var(--surface-3); color: var(--text-soft); white-space: nowrap;
    text-transform: uppercase; letter-spacing: .04em;
}
.pill.primary { background: var(--primary-50); color: var(--primary-600); }
.pill.success { background: var(--success-50); color: #166534; }
.pill.warning { background: var(--warning-50); color: #92400e; }
.pill.danger  { background: var(--danger-50);  color: #991b1b; }
.pill.info    { background: var(--info-50);    color: #0369a1; }
.pill.purple  { background: var(--purple-50);  color: #5b21b6; }

/* ===================== APP SHELL ===================== */
.app, .shell {
    display: grid;
    grid-template-columns: 248px 1fr;
    min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
    background: var(--bg);
    color: #cfd5e6;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.sidebar .brand {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 8px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    margin-bottom: 12px;
}
.sidebar .brand-text .b1 { color: #fff; font-weight: 800; font-size: 15px; line-height: 1.1; }
.sidebar .brand-text .b2 { color: #93a0c2; font-size: 11px; }

/* ── Nav ── */
.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
button.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #b6bfd6;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font);
}
button.nav-item:hover  { background: rgba(255,255,255,.06); color: #fff; }
button.nav-item.active { background: var(--primary); color: #fff; }
.nav-item .ic { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }

/* ── Sidebar footer ── */
.sidebar-foot, .sb-foot {
    border-top: 1px solid rgba(255,255,255,.07);
    padding-top: 10px;
    margin-top: auto;
}
.me, .sb-user {
    display: flex; gap: 10px; align-items: center; padding: 6px 8px;
}
.me .meta   { line-height: 1.25; flex: 1; min-width: 0; }
.me .meta .n { color: #fff; display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .meta .r { color: #93a0c2; font-size: 11px; text-transform: capitalize; }
.avatar {
    width: 32px; height: 32px; border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--purple));
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.logout {
    display: block; text-align: center; margin-top: 6px; padding: 7px 12px;
    border-radius: 9px; color: #93a0c2; font-size: 12px;
    text-decoration: none; transition: all .15s;
}
.logout:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }

/* ── Main content area ── */
.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-2);
}
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 5;
    flex-shrink: 0;
}
.topbar h1 { margin: 0; font-size: 19px; }
.topbar .crumbs { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.content { padding: 24px 28px 60px; flex: 1; }

/* ── KPI grid (dashboard) ── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi {
    display: flex; flex-direction: column; gap: 6px;
    padding: 20px 18px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
    transition: box-shadow .15s; border-bottom-width: 3px;
}
.kpi:hover { box-shadow: var(--shadow); }
.kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.kpi-value { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.kpi.accent-blue   { border-bottom-color: var(--primary); }
.kpi.accent-amber  { border-bottom-color: var(--warning); }
.kpi.accent-red    { border-bottom-color: var(--danger); }
.kpi.accent-green  { border-bottom-color: var(--success); }

@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .kpi-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
    .app, .shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; }
    .content { padding: 16px; }
}

/* ── Legacy sb-* aliases (backward compat) ── */
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: #b6bfd6; font-size: 13px; font-weight: 500; text-decoration: none; transition: all .15s; }
.sb-nav a:hover  { background: rgba(255,255,255,.06); color: #fff; }
.sb-nav a.active { background: var(--primary); color: #fff; }
.sb-section { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #6f7da0; padding: 14px 12px 6px; }

/* ===================== CARDS & GRIDS ===================== */
.card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 18px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card h3 { margin-top: 0; }
.card-head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.card-head h3 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1100px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* KPI — ver sección APP SHELL arriba */

/* ===================== TABLES ===================== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    text-align: left; padding: 10px 12px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.table td {
    padding: 11px 12px; border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:hover td { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { white-space: nowrap; text-align: right; }
.table .clickable { cursor: pointer; }

/* ===================== FORMS ===================== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.form-grid .field.full { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-weight: 600; font-size: 12px; color: var(--text-soft); }
.field input, .field select, .field textarea {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
    font-family: var(--font); font-size: 13px; background: #fff; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,111,235,.13);
}
.field textarea { min-height: 88px; resize: vertical; }
.field .hint { font-size: 11px; color: var(--text-muted); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ===================== TABS ===================== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
    background: none; border: 0; padding: 10px 16px; cursor: pointer;
    font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--text-soft);
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all .15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===================== TIMELINE ===================== */
.timeline { position: relative; padding: 8px 0 0 28px; }
.timeline::before {
    content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px;
    width: 2px; background: var(--border);
}
.tl-item { position: relative; padding: 0 0 18px 0; }
.tl-item::before {
    content: ''; position: absolute; left: -23px; top: 4px;
    width: 12px; height: 12px; border-radius: 999px;
    background: #fff; border: 2px solid var(--primary);
}
.tl-item.estado::before { border-color: var(--warning); background: var(--warning-50); }
.tl-item.sistema::before { border-color: var(--text-muted); }
.tl-item.asignacion::before { border-color: var(--purple); background: var(--purple-50); }
.tl-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.tl-head b { font-size: 13px; }
.tl-head .when { color: var(--text-muted); }
.tl-body { font-size: 13px; margin-top: 4px; color: var(--text); white-space: pre-wrap; }

/* ===================== TOAST ===================== */
.toasts {
    position: fixed; right: 20px; bottom: 20px; z-index: 1000;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.toast {
    background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--primary);
    border-radius: 10px; padding: 11px 14px; box-shadow: var(--shadow-lg);
    font-size: 13px; animation: toast-in .25s ease-out;
}
.toast.error   { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===================== EMPTY / LOADING ===================== */
.empty {
    text-align: center; padding: 50px 20px;
    color: var(--text-muted); border: 2px dashed var(--border); border-radius: var(--radius);
}
.empty h3 { color: var(--text-soft); margin-bottom: 6px; }
.loading { color: var(--text-muted); padding: 28px; text-align: center; }

/* ===================== MISC ===================== */
.row-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-flex.right { justify-content: flex-end; }
.spacer { flex: 1; }
.toolbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar .input, .toolbar select { padding: 8px 12px; }
.search { flex: 1; min-width: 220px; }
.list-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.list-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.list-item + .list-item { margin-top: 10px; }
.kv { display: flex; gap: 6px; font-size: 12px; }
.kv .k { color: var(--text-muted); }
.kv .v { color: var(--text); font-weight: 500; }

/* Mini progress / SLA indicator */
.sla {
    display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 999px;
}
.sla.ok { background: var(--success-50); color: #166534; }
.sla.warn { background: var(--warning-50); color: #92400e; }
.sla.late { background: var(--danger-50); color: #991b1b; }

/* ===================== MISSING CLASS ALIASES ===================== */

/* Tabla (.tbl = alias de .table) */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
    text-align: left; padding: 10px 12px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
    border-bottom: 2px solid var(--border); background: var(--surface-2);
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.row-click { cursor: pointer; }
.row-click:hover td { background: var(--primary-50); }

/* Grids standalones */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .grid-3 { grid-template-columns: 1fr; } }

/* Filtros / barra herramientas */
.filters {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px;
}
.filters .input, .filters select { padding: 8px 12px; flex: 1; min-width: 180px; }

/* Pill colores usados en JSX */
.pill.green  { background: var(--success-50);  color: #166534; }
.pill.red    { background: var(--danger-50);   color: #991b1b; }
.pill.amber  { background: var(--warning-50);  color: #92400e; }
.pill.blue   { background: var(--info-50);     color: #0369a1; }
.pill.violet { background: var(--purple-50);   color: #5b21b6; }
.pill.gray   { background: var(--surface-3);   color: var(--text-soft); }

/* Utilidades */
.pad       { padding: 24px; }
.row-end   { display: flex; justify-content: flex-end; gap: 8px; }
.lbl       { font-weight: 600; font-size: 12px; color: var(--text-soft); }
.gap-1     { gap: 4px; }
.gap-2     { gap: 8px; }
.link      { color: var(--primary); cursor: pointer; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* Card body padding */
.card-body { padding: 2px 0; }

/* ===================== MODAL ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: grid; place-items: center; z-index: 100;
}
.modal-box {
  background: #fff; border-radius: 16px; padding: 28px;
  width: 100%; max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

/* ===================== PORTAL PÚBLICO ===================== */
.portal-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }
.portal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 40px;
}
.portal-hero { text-align: center; padding: 48px 0 40px; }
.portal-hero h1 { font-size: 48px; color: #fff; margin-bottom: 12px; }
.portal-hero h1 em { color: #93c5fd; font-style: normal; }
.portal-hero p { color: #c4cbe0; font-size: 15px; max-width: 560px; margin: 0 auto 32px; }
.portal-steps { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pstep { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px 18px; color: #cfd5e6; font-size: 13px; }
.pstep-n { width: 26px; height: 26px; border-radius: 999px; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.pstep-arrow { color: #6f7da0; font-size: 18px; }
.portal-section { margin-bottom: 24px; }
.portal-card { background: #fff; border-radius: var(--radius-xl); padding: 32px; color: var(--text); }
.portal-card h2 { margin-top: 0; }
.portal-footer { text-align: center; padding: 24px 0; color: #6f7da0; font-size: 13px; }
.portal-footer a { color: #93c5fd; }

/* Resultado de consulta */
.lookup-result-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.lrc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.lrc-num { font-family: var(--mono); font-size: 13px; color: var(--text-muted); }
.lrc-product { font-size: 17px; font-weight: 700; margin-top: 2px; }
.lrc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lrc-grid > div { display: flex; flex-direction: column; gap: 2px; }
.lrc-grid .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.text-danger { color: var(--danger); font-weight: 600; }
.text-warning { color: var(--warning); font-weight: 600; }

@media (max-width: 640px) {
  .portal-hero h1 { font-size: 32px; }
  .lrc-grid { grid-template-columns: repeat(2, 1fr); }
  .portal-card { padding: 20px; }
}

/* ============ Cliente Dashboard ============ */
.welcome-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.08));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 32px; margin-bottom: 24px;
}
.welcome-banner h2 { font-size: 28px; margin: 8px 0 6px; font-weight: 700; }
.welcome-banner p { margin: 0; max-width: 540px; }
.welcome-actions { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.help-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elev, rgba(255,255,255,.02));
}
.help-item h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.help-item p { margin: 0 0 6px; }
.help-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,130,246,.12); color: var(--accent, #3b82f6);
  font-size: 20px; font-weight: 700;
}
@media (max-width: 900px) {
  .welcome-banner { flex-direction: column; align-items: flex-start; }
  .welcome-actions { width: 100%; }
  .help-grid { grid-template-columns: 1fr; }
}

/* Global search (topbar) */
.gs-wrap { position: relative; flex: 1; max-width: 480px; }
.gs-input { width: 100%; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); font-size: 14px; }
.gs-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.gs-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0,0,0,.18); max-height: 480px; overflow-y: auto; z-index: 50; padding: 8px 0; }
.gs-group { padding: 4px 0; }
.gs-group + .gs-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.gs-group-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 4px 14px; font-weight: 600; }
.gs-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; cursor: pointer; border: none; background: transparent; color: var(--text); width: 100%; text-align: left; font-size: 13px; }
.gs-item:hover { background: rgba(37,99,235,.08); }
.gs-item .gs-title { font-weight: 600; }
.gs-item .gs-sub { color: var(--text-muted); font-size: 12px; }
.gs-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* Small pill variant for timeline meta */
.pill.sm { font-size: 10px; padding: 2px 6px; }

/* Adjuntos */
.adj-drop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px dashed var(--border); border-radius: var(--radius-md); background: rgba(37,99,235,.03); margin-bottom: 12px; }
.adj-drop.is-drag { background: rgba(37,99,235,.10); border-color: var(--primary); }
.adj-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.adj-item { display:flex; align-items:center; gap:12px; padding:8px 10px; background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius-md); }
.adj-thumb { width:54px; height:54px; object-fit:cover; border-radius:6px; display:block; border:1px solid var(--border); }
.adj-icon { width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-size:26px; background: rgba(37,99,235,.06); border-radius:6px; border:1px solid var(--border); }
.adj-meta { flex:1; min-width:0; }
.adj-name { font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.mt { margin-top: 16px; }

/* Dashboard gerencial */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi.accent-violet { border-bottom-color: #8b5cf6; }
.kpi.accent-gray   { border-bottom-color: #64748b; }
.big-stat { font-size: 44px; font-weight: 800; text-align: center; color: var(--primary); padding: 10px 0; }

/* ===== Notificaciones (campanita) ===== */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell {
  background: transparent; border: 1px solid #e5e7eb; border-radius: 999px;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; font-size: 18px; transition: background .15s, border-color .15s;
}
.notif-bell:hover { background: #f3f4f6; border-color: #cbd5e1; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid #fff;
}
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: 90vw; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  z-index: 200; overflow: hidden;
}
.notif-head {
  padding: 12px 14px; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between; background: #f9fafb;
}
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .12s; }
.notif-item:hover { background: #f9fafb; }
.notif-item.unread { background: #eff6ff; }
.notif-item.unread:hover { background: #dbeafe; }
.notif-title { font-weight: 600; font-size: 14px; color: #0f172a; }
.notif-msg { font-size: 13px; color: #475569; margin-top: 3px; line-height: 1.4; }
.notif-time { margin-top: 4px; font-size: 11px; }
.link.sm { font-size: 12px; }

/* ===== Importador CSV ===== */
.imp-step { padding: 18px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; margin-bottom: 14px; }
.imp-step.ok { border-color: #16a34a; background: #f0fdf4; }
.imp-step.err { border-color: #dc2626; background: #fef2f2; }
.imp-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.imp-tab { padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 999px; cursor: pointer; background: #fff; font-size: 13px; font-weight: 500; }
.imp-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.imp-preview { max-height: 320px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 10px; }
.imp-preview table { font-size: 12px; }
.imp-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0; }
.imp-result-grid .kpi-small { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; text-align: center; }
.imp-result-grid .kpi-small .v { font-size: 26px; font-weight: 700; line-height: 1; }
.imp-result-grid .kpi-small .l { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin-top: 4px; }

/* ===== Signature pad / Cámara ===== */
.sign-pad { background: #fafafa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.sign-label { font-size: 12px; color: #475569; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.sign-canvas { width: 100%; height: auto; max-height: 240px; background: #fff; border: 1px dashed #94a3b8; border-radius: 8px; touch-action: none; cursor: crosshair; display: block; }
.cam-capture { background: #fafafa; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.pill.violet { background: #ede9fe; color: #5b21b6; }