html, body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: #991B1B;
    font-size: 0.8rem;
}

/* ===================== ERP page ===================== */
.erp-page-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 1rem 0;
}

/* Sidebar brand */
.erp-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1D4ED8;
    border-bottom: 1px solid #E2E8F0;
}

/* Sidebar bottom user box */
.erp-user {
    border-top: 1px solid #E2E8F0;
    padding: 0.5rem 0.75rem;
}

/* Module toolbar (Nuevo/Editar/Eliminar/Imprimir/Exportar + Buscar) */
.erp-toolbar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    gap: 0.25rem;
}

/* KPI cards row */
.erp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.erp-kpi {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}

.erp-kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
}

.erp-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.3;
}

.erp-kpi-value.pos { color: #166534; }
.erp-kpi-value.neg { color: #991B1B; }
.erp-kpi-value.warn { color: #92400E; }

/* Dense grid with gray header + gridlines (desktop ERP look) */
.erp-grid .mud-table-head .mud-table-cell {
    background: #F1F5F9;
    color: #475569;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Compact data rows */
.erp-grid .mud-table-cell {
    font-size: 0.78rem;
    padding-top: 3px;
    padding-bottom: 3px;
    height: auto;
}

.erp-grid .mud-table-cell .mud-chip {
    height: 18px;
    font-size: 0.68rem;
}

/* Compact product dialog: form fields at 14px */
.erp-compact-form .mud-input-root,
.erp-compact-form .mud-input-root input,
.erp-compact-form .mud-select .mud-input-root,
.erp-compact-form .mud-input-label {
    font-size: 0.875rem;
}

/* ===== Modal "REGISTRO" style ===== */
.erp-modal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    border-bottom: 2px solid #1D4ED8;
    padding-bottom: 8px;
}

.erp-modal-title {
    color: #1D4ED8;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

.erp-modal-required {
    color: #DC2626;
    font-size: 0.78rem;
    font-weight: 500;
}

.erp-section {
    color: #1E3A8A;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    margin: 0.75rem 0 0.4rem;
}

.erp-flabel {
    color: #334155;
    font-weight: 600;
    font-size: 0.78rem;
    margin-bottom: 3px;
}

.erp-req {
    color: #DC2626;
    margin-left: 2px;
}

.erp-grid .mud-table-row:hover {
    background: #F8FAFC;
}

.erp-grid .mud-table-row.selected {
    background: #DBEAFE !important;
}

/* Active nav item uses the corporate tokens */
.erp-nav .mud-nav-link.active {
    background-color: #DBEAFE !important;
    color: #1E3A8A !important;
    border-left: 3px solid #1D4ED8;
    font-weight: 600;
}

.erp-nav .mud-nav-link {
    border-left: 3px solid transparent;
}

/* ===================== Auth pages ===================== */
.erp-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0B1220 0%, #2563FF 100%);
    padding: 1rem;
}

.erp-auth-card {
    width: 100%;
    max-width: 400px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    padding: 2rem;
}

.erp-auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.erp-auth-logo {
    font-size: 2.4rem;
}

.erp-auth-logo-img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.erp-auth-brand h1 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0.4rem 0 0.1rem;
}

.erp-auth-brand p {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0;
}

.erp-field {
    display: block;
    margin-bottom: 1rem;
}

.erp-field > span {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.35rem;
}

.erp-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.erp-input:focus {
    outline: none;
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29,78,216,0.15);
}

.erp-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 1.25rem;
}

.erp-btn-primary {
    width: 100%;
    padding: 0.65rem;
    background: #1D4ED8;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: block;
}

.erp-btn-primary:hover {
    background: #1E40AF;
}

.erp-auth-error {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FCA5A5;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ===================== Blazor error UI ===================== */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Ha ocurrido un error."
    }

/* ===== Portal del vendedor (PWA) ===== */
.portal-wrap { max-width: 900px; margin: 0 auto; }
.portal-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.portal-head .portal-titles { flex:1 1 auto; min-width:0; }
.portal-title { font-size:1.35rem; font-weight:700; color:#1E293B; line-height:1.1; }
.portal-sub { font-size:0.9rem; color:#64748B; }
.portal-back { flex:0 0 auto; }

/* Home menu tiles */
.portal-greeting { font-size:1.05rem; color:#334155; margin:2px 0 14px; }
.portal-greeting b { color:#1E293B; }
.portal-tiles { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.portal-tile { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:22px 12px; cursor:pointer;
    text-align:center; transition:transform .06s ease, box-shadow .12s ease; text-decoration:none; }
.portal-tile:hover { box-shadow:0 4px 14px rgba(2,8,23,.08); transform:translateY(-1px); }
.portal-tile:active { transform:translateY(0); }
.portal-tile-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:#EFF6FF; color:#1D4ED8; }
.portal-tile-label { font-weight:700; color:#1E293B; font-size:0.98rem; }
.portal-tile-soon { position:absolute; top:8px; right:8px; background:#FEF3C7; color:#92400E; font-size:0.62rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:999px; }
.portal-tile.soon { opacity:.85; }

/* Customer cards */
.portal-cli { display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid #E2E8F0;
    border-radius:10px; padding:10px 12px; margin-top:8px; }
.portal-cli-name { font-weight:600; color:#1E293B; font-size:0.98rem; }
.portal-cli-meta { font-size:0.8rem; color:#64748B; display:flex; flex-wrap:wrap; gap:8px; }
.portal-cli-doc { font-family:monospace; background:#F1F5F9; padding:0 6px; border-radius:4px; color:#334155; }

/* Placeholder */
.portal-soon-box { text-align:center; padding:40px 16px; color:#64748B; }
.portal-soon-box .mud-icon-root { font-size:64px; color:#CBD5E1; }

/* Portal price list */
.portal-search { background:#fff; border-radius:8px; }
.portal-dept { margin-top:14px; }
.portal-dept-head { display:flex; align-items:center; font-weight:700; color:#0F172A;
    background:#E2E8F0; padding:8px 12px; border-radius:8px; font-size:0.95rem; }
.portal-dept-count { background:#1976d2; color:#fff; border-radius:999px; padding:1px 9px; font-size:0.75rem; }
.portal-card { display:flex; gap:10px; align-items:stretch; background:#fff; border:1px solid #E2E8F0;
    border-radius:10px; padding:10px 12px; margin-top:8px; }
.portal-card-main { flex:1 1 auto; min-width:0; }
.portal-card-name { font-weight:600; color:#1E293B; font-size:0.95rem; }
.portal-card-meta { font-size:0.78rem; color:#64748B; margin:2px 0 6px; }
.portal-code { font-family:monospace; background:#F1F5F9; padding:0 6px; border-radius:4px; color:#334155; }
.portal-prices { display:flex; flex-wrap:wrap; gap:6px; }
.portal-price { display:inline-flex; flex-direction:column; background:#EFF6FF; border:1px solid #BFDBFE;
    border-radius:8px; padding:3px 10px; line-height:1.15; }
.portal-price-name { font-size:0.68rem; color:#2563EB; text-transform:uppercase; letter-spacing:.3px; }
.portal-price-val { font-size:0.98rem; font-weight:700; color:#1D4ED8; }
.portal-price-empty { color:#94A3B8; background:#F8FAFC; border-color:#E2E8F0; justify-content:center; }
.portal-card-stock { display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:78px; border-left:1px dashed #E2E8F0; padding-left:10px; }
.portal-stock-label { font-size:0.65rem; color:#94A3B8; text-transform:uppercase; }
.portal-stock-val { font-size:1.05rem; font-weight:700; }
.portal-stock-val.ok { color:#16A34A; }
.portal-stock-val.zero { color:#DC2626; }

/* =====================================================================
   KONTIA · Sistema visual v2  (overrides — cargan al final, ganan cascada)
   Navy #0B1220 · Blue #2563FF · Cyan #00D4B3 · Purple #7C3AED · Poppins
   ===================================================================== */
:root{
  --k-navy:#0B1220; --k-navy-2:#111B30; --k-navy-3:#1A2740; --k-navy-line:#1D2740;
  --k-blue:#2563FF; --k-blue-600:#1D4FE0; --k-blue-050:#EAF0FF;
  --k-cyan:#00D4B3; --k-purple:#7C3AED;
  --k-ground:#F4F6FB; --k-surface:#FFFFFF;
  --k-ink:#0B1220; --k-ink-2:#5A6577; --k-ink-3:#8A94A6;
  --k-border:#E5E9F2; --k-border-2:#EEF1F7;
  --k-sh-sm:0 1px 2px rgba(11,18,32,.06),0 1px 3px rgba(11,18,32,.05);
  --k-sh-md:0 4px 14px rgba(11,18,32,.08);
  /* Make all MudBlazor typography use Poppins */
  --mud-typography-default-family:'Poppins','Segoe UI','Roboto',sans-serif;
}
html, body{ font-family:'Poppins','Segoe UI','Roboto',sans-serif; }

.erp-page-title{ color:var(--k-ink); letter-spacing:-.01em; }

/* ---- Navy sidebar chrome ---- */
.erp-brand{
  color:#FFFFFF; border-bottom:1px solid var(--k-navy-line);
  letter-spacing:-.01em; font-weight:600;
}
.erp-user{ border-top:1px solid var(--k-navy-line); }
.erp-user .mud-button-root{ color:#C4CDE0; }

.erp-nav .mud-nav-link{ color:#AEB9D3; border-left:3px solid transparent; border-radius:0 8px 8px 0; margin:0 8px 0 0; font-size:12px; padding-top:2px; padding-bottom:2px; padding-left:20px; min-height:22px; line-height:1.1; }
.erp-nav .mud-nav-link:hover{ background:var(--k-navy-3); color:#EAF0FF; }
.erp-nav .mud-nav-link.active{
  background:linear-gradient(90deg, rgba(37,99,255,.24), rgba(0,212,179,.08)) !important;
  color:#FFFFFF !important; border-left:3px solid var(--k-cyan) !important; font-weight:600;
}
.erp-nav .mud-nav-link .mud-nav-link-icon{ color:#93A0B8; font-size:17px; width:17px; height:17px; min-width:17px; margin-right:3px; }
.erp-nav .mud-nav-link.active .mud-nav-link-icon,
.erp-nav .mud-nav-link:hover .mud-nav-link-icon{ color:#FFFFFF; }
.erp-nav .mud-nav-group .mud-nav-link{ color:#C4CDE0; }
.erp-nav .mud-divider{ border-color:var(--k-navy-line) !important; }
/* flat section titles */
.erp-navsec{ color:#6B7691; font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:15px 18px 5px; user-select:none; }
/* Planned (not yet implemented) items: rendered disabled, but styled like normal items */
.erp-nav .mud-nav-link.mud-nav-link-disabled{ color:#AEB9D3 !important; opacity:1 !important; cursor:default; }
.erp-nav .mud-nav-link.mud-nav-link-disabled:hover{ background:transparent; color:#AEB9D3 !important; }
.erp-nav .mud-nav-link.mud-nav-link-disabled .mud-nav-link-icon{ color:#93A0B8 !important; }

/* ---- KPI cards ---- */
.erp-kpis{ grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }
.erp-kpi{
  border:1px solid var(--k-border); border-radius:14px; box-shadow:var(--k-sh-sm);
  padding:14px 16px; transition:box-shadow .15s ease, transform .06s ease;
}
.erp-kpi:hover{ box-shadow:var(--k-sh-md); }
.erp-kpi-label{ color:var(--k-ink-3); letter-spacing:.08em; }
.erp-kpi-value{ color:var(--k-ink); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.erp-kpi-value.pos{ color:#16A34A; } .erp-kpi-value.warn{ color:#B26608; } .erp-kpi-value.neg{ color:#DC2626; }

/* ---- Cards / paper ---- */
.mud-paper.mud-elevation-1{ box-shadow:var(--k-sh-sm) !important; }

/* ---- Toolbar + buttons ---- */
.erp-toolbar{ background:var(--k-surface); border-bottom:1px solid var(--k-border); }
.mud-button-root{ text-transform:none; font-weight:600; letter-spacing:0; }
.mud-button-filled.mud-button-filled-primary{ box-shadow:0 2px 8px rgba(37,99,255,.28); }
.mud-button-filled.mud-button-filled-primary:hover{ box-shadow:0 4px 14px rgba(37,99,255,.36); }

/* ---- Data grid ---- */
.erp-grid .mud-table-head .mud-table-cell{ background:#F1F4FA; color:#5A6577; }
.erp-grid .mud-table-row:hover{ background:#FAFBFE; }
.erp-grid .mud-table-row.selected{ background:var(--k-blue-050) !important; }

/* ---- Modal header / sections ---- */
.erp-modal-header{ border-bottom:2px solid var(--k-blue); }
.erp-modal-title{ color:var(--k-blue); }
.erp-section{ color:var(--k-navy); }
.erp-flabel{ color:#3A4658; }

/* ---- Auth (login) primary button ---- */
.erp-btn-primary{ background:var(--k-blue); border-radius:9px; box-shadow:0 2px 8px rgba(37,99,255,.28); }
.erp-btn-primary:hover{ background:var(--k-blue-600); }
.erp-input:focus{ border-color:var(--k-blue); box-shadow:0 0 0 3px rgba(37,99,255,.16); }

/* ---- Portal accents to Kontia blue/cyan ---- */
.portal-title{ color:var(--k-ink); }
.portal-tile-icon{ background:var(--k-blue-050); color:var(--k-blue); }
.portal-dept-count{ background:var(--k-blue); }
.portal-price{ background:var(--k-blue-050); border-color:#C9D6FF; }
.portal-price-name{ color:var(--k-blue); }
.portal-price-val{ color:var(--k-blue-600); }

/* ---- Dashboard KPI icons ---- */
.erp-kpi .kpi-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.erp-kpi .kpi-ic .mud-icon-root{ font-size:18px; }
.kpi-ic-blue{ background:var(--k-blue-050); color:var(--k-blue); }
.kpi-ic-cyan{ background:#E4FBF6; color:#0A9D86; }
.kpi-ic-purple{ background:#F1EBFE; color:#6D28D9; }
.kpi-ic-warn{ background:#FDF1E3; color:#B26608; }

/* ---- Login brand lockup (Poppins, isotipo + kontia.co juntos + lema legible) ---- */
.erp-auth-brand{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:1.6rem; text-align:center; }
.erp-auth-iso{ width:66px; height:66px; display:block; }
.erp-auth-word{ font-family:'Poppins','Segoe UI',sans-serif; font-weight:600; font-size:2.5rem;
  letter-spacing:-1.5px; color:var(--k-navy); line-height:1; }
.erp-auth-word .dot{ background:linear-gradient(90deg,#2563FF,#00D4B3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.erp-auth-brand .erp-auth-tag{ font-family:'Poppins','Segoe UI',sans-serif; font-weight:400;
  font-size:clamp(13px, 3.9vw, 15px); color:#6B7280; margin:2px 0 0; white-space:nowrap; }

/* ---- Portal CxC ---- */
.cxc-tot{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.cxc-tot-box{ background:#fff; border:1px solid var(--k-border); border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; box-shadow:var(--k-sh-sm); }
.cxc-tot-box span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--k-ink-3); font-weight:600; }
.cxc-tot-box b{ font-size:1.5rem; font-weight:600; color:var(--k-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cxc-tot-box.bad b{ color:#DC2626; }
.cxc-pend{ display:flex; align-items:center; background:#FDF1E3; color:#8f4c08; border-radius:10px;
  padding:9px 12px; font-size:.85rem; font-weight:500; margin-top:12px; }
.cxc-over{ color:#DC2626; font-weight:600; }
.cxc-rep{ color:#B26608; font-weight:600; }
.cxc-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; justify-content:center; min-width:96px; }
.cxc-bal{ font-size:1.05rem; font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; }

/* ---- Reconnection modal (mobile-friendly) ---- */
#components-reconnect-modal{ display:none; position:fixed; inset:0; z-index:1200;
  align-items:center; justify-content:center; background:rgba(11,18,32,.55); }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected{ display:flex; }
.k-reconnect-box{ background:#fff; border-radius:12px; padding:16px 22px; display:flex; align-items:center;
  gap:12px; font-family:'Poppins','Segoe UI',sans-serif; font-weight:500; color:#0B1220;
  box-shadow:0 12px 34px rgba(11,18,32,.32); }
.k-reconnect-spin{ width:22px; height:22px; border:3px solid #E5E9F2; border-top-color:#2563FF;
  border-radius:50%; animation:kspin .8s linear infinite; }
@keyframes kspin{ to{ transform:rotate(360deg); } }

/* =====================================================================
   KONTIA · Login v2 (solo pantalla de login; no toca erp-auth-* de logout/access-denied)
   ===================================================================== */
.login-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: #0B1220 url('brand/login-bg.jpg?v=2') center center / cover no-repeat;
}
.login-k{ position:absolute; left:-120px; top:50%; transform:translateY(-50%);
  width:720px; height:720px; opacity:.09; pointer-events:none; }
.login-dots{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.92) 1.4px, transparent 1.6px);
  background-size: 26px 26px; opacity:.11;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, transparent 34%, #000 78%);
          mask-image: radial-gradient(130% 130% at 50% 50%, transparent 34%, #000 78%); }
.login-glow{ position:absolute; top:-150px; right:-110px; width:460px; height:460px; border-radius:50%;
  background: radial-gradient(circle, rgba(37,99,255,.22), transparent 62%); filter:blur(20px); pointer-events:none; }

.login-card{
  position:relative; z-index:1; width:100%; max-width:520px; margin:auto;
  background:#FFFFFF; border:1px solid rgba(255,255,255,.65); border-radius:20px;
  padding:2.5rem 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(11,18,32,.35), 0 10px 30px rgba(11,18,32,.25);
  font-family:'Poppins','Segoe UI',sans-serif;
}
.login-brand{ text-align:center; }
.login-iso{ height:84px; width:auto; display:block; margin:0 auto 6px;
  filter: drop-shadow(0 10px 20px rgba(37,99,255,.30)); }
.login-word{ font-family:'Poppins','Segoe UI',sans-serif; font-weight:600; font-size:2.5rem;
  letter-spacing:-1.5px; color:var(--k-navy); line-height:1; }
.login-word .login-dot{ background:linear-gradient(90deg,#2563FF,#00D4B3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.login-tag{ font-family:'Poppins','Segoe UI',sans-serif; font-weight:400;
  font-size:clamp(13px,3.9vw,15px); color:#6B7280; margin:8px 0 0; white-space:nowrap; }
.login-tag .hl{ color:var(--k-blue); font-weight:600; }
.login-divider{ width:46px; height:3px; border-radius:2px; background:#E5E9F2; margin:16px auto 22px; }

.login-field{ margin-bottom:16px; }
.login-field > label{ display:block; font-size:.82rem; font-weight:600; color:#334155; margin-bottom:7px; }
.login-inp{ position:relative; display:flex; align-items:center; }
.login-inp-ic{ position:absolute; left:15px; width:20px; height:20px; color:#94A3B8; pointer-events:none; }
.login-input{ width:100%; height:56px; box-sizing:border-box; font-family:inherit; font-size:15px;
  color:var(--k-navy); background:#FFFFFF; border:1.5px solid #E3E8F2; border-radius:11px;
  padding:0 16px 0 46px; transition:border-color .18s ease, box-shadow .18s ease; }
.login-input.has-eye{ padding-right:48px; }
.login-input::placeholder{ color:#9AA6BD; }
.login-input:focus{ outline:none; border-color:var(--k-blue); box-shadow:0 0 0 4px rgba(37,99,255,.14); }
.login-eye{ position:absolute; right:8px; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:9px; color:#94A3B8; cursor:pointer; transition:color .15s, background .15s; }
.login-eye svg{ width:20px; height:20px; }
.login-eye:hover{ color:var(--k-blue); background:#EFF3FB; }
.login-eye.on{ color:var(--k-blue); }

.login-check{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:#334155; margin:4px 0 20px; cursor:pointer; }
.login-check input[type=checkbox]{ width:18px; height:18px; accent-color:var(--k-blue); border-radius:5px; cursor:pointer; }

.login-btn{ width:100%; height:56px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:1rem; font-weight:600; color:#fff; cursor:pointer;
  border:0; border-radius:11px; background:linear-gradient(135deg,#2563FF 0%,#1D4ED8 100%);
  box-shadow:0 10px 22px -6px rgba(37,99,255,.55), 0 2px 6px rgba(37,99,255,.35);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.login-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -8px rgba(37,99,255,.6), 0 4px 10px rgba(37,99,255,.4); }
.login-btn:active{ transform:translateY(0); filter:brightness(.97); }
.login-arrow{ width:19px; height:19px; }

.login-secure{ display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:18px; font-size:.78rem; color:#8A94A6; }
.login-secure svg{ width:15px; height:15px; }

.login-error{ background:#FCEBEB; color:#b81c1c; border:1px solid #F5C2C2; border-radius:9px;
  padding:.6rem .8rem; font-size:.85rem; margin-bottom:1rem; text-align:center; }
.login-field .validation-message{ color:#DC2626; font-size:.78rem; margin-top:4px; }

@media (max-width:560px){
  .login-card{ padding:1.7rem 1.35rem 1.5rem; border-radius:16px; }
  .login-word{ font-size:2.2rem; }
  .login-iso{ width:64px; height:64px; }
  .login-k{ width:440px; left:-120px; opacity:.045; }
  .login-glow{ width:340px; height:340px; }
}

/* ---- Login feature bar (bottom) ---- */
.login-features{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  width:min(1040px, 92%); display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  background:rgba(11,18,32,.34); border:1px solid rgba(255,255,255,.10); border-radius:16px;
  padding:16px 14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.lf-item{ display:flex; align-items:flex-start; gap:11px; padding:2px 14px; }
.lf-item + .lf-item{ border-left:1px solid rgba(255,255,255,.08); }
.lf-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(37,99,255,.20); color:#8FB3FF; }
.lf-ic svg{ width:18px; height:18px; }
.lf-t{ color:#FFFFFF; font-weight:600; font-size:.9rem; line-height:1.15; }
.lf-s{ color:#AEB9D6; font-size:.75rem; line-height:1.3; margin-top:2px; }
@media(max-width:900px){ .login-features{ display:none; } }

/* Login: avoid card/feature-bar overlap; lift card on tall desktop, hide bar when short */
@media (max-height:780px){ .login-features{ display:none; } }
@media (min-width:901px) and (min-height:781px){ .login-card{ transform: translateY(-54px); } }

/* =====================================================================
   KONTIA · Sistema de formularios (scope .kprod / .kprod-*)
   Diseño reutilizable compartido por los diálogos: Registro de producto,
   Registro de cliente y futuros formularios. NO duplicar por pantalla:
   envolver el contenido en <div class="kprod"> y usar .kprod-sec / .kprod-lbl
   / .kprod-switch / .kprod-actions / .kprod-head, etc.
   ===================================================================== */

/* --- Cabecera del diálogo: icono azul claro + título/subtítulo + divisor gris --- */
.kprod-dialog .mud-dialog-title{ padding-bottom:16px; border-bottom:1px solid var(--k-border-2); }
.kprod-head{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
.kprod-head-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.kprod-head-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  background:var(--k-blue-050); color:var(--k-blue); display:flex; align-items:center; justify-content:center; }
.kprod-head-ic .mud-icon-root{ font-size:26px; }
.kprod-title{ font-size:1.5rem; font-weight:700; color:var(--k-navy); line-height:1.15; letter-spacing:-.01em; }
.kprod-sub{ font-size:.9rem; color:var(--k-ink-2); margin-top:2px; }
.kprod-req{ flex:0 0 auto; font-size:.78rem; color:var(--k-ink-3); font-weight:500; white-space:nowrap; }
.kprod-req-dot{ color:#DC2626; font-weight:700; }

/* --- Tabs: sin mayúsculas, activo azul, indicador inferior 2px, hover sutil --- */
.kprod .kprod-tabs .mud-tabs-toolbar{ box-shadow:none; background:transparent; border-bottom:1px solid var(--k-border-2); }
.kprod .mud-tab{ text-transform:none; font-weight:500; font-size:.9rem; color:var(--k-ink-2);
  min-height:48px; letter-spacing:0; transition:color .15s, background-color .15s; border-radius:8px 8px 0 0; }
.kprod .mud-tab .mud-icon-root{ font-size:19px; color:var(--k-ink-3); transition:color .15s; }
.kprod .mud-tab:hover{ color:var(--k-navy); background:rgba(37,99,255,.05); }
.kprod .mud-tab.mud-tab-active{ color:var(--k-blue); font-weight:600; }
.kprod .mud-tab.mud-tab-active .mud-icon-root{ color:var(--k-blue); }
.kprod .mud-tab-slider{ background-color:var(--k-blue); height:2px; }

/* --- Contenedores de sección: blancos, borde muy claro, sombra imperceptible --- */
.kprod-sec{ background:var(--k-surface); border:1px solid #E5EAF1; border-radius:12px;
  padding:20px; margin-bottom:18px; box-shadow:0 1px 2px rgba(11,18,32,.03); }
.kprod-sec:last-child{ margin-bottom:4px; }
.kprod-sec-h{ display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700;
  color:var(--k-navy); margin-bottom:16px; }
.kprod-sec-h .mud-icon-root{ color:var(--k-blue); font-size:19px; }

/* --- Etiquetas de campo --- */
.kprod .kprod-lbl{ font-size:.8rem; font-weight:600; color:#334155; margin-bottom:8px; }
.kprod .kprod-req-star{ color:#DC2626; margin-left:2px; }

/* --- Inputs / selects: borde gris-azulado, radio 10px, foco azul con glow --- */
.kprod .mud-input.mud-input-outlined .mud-input-outlined-border{
  border-color:#D9E1EC; border-radius:10px; transition:border-color .18s, box-shadow .18s; }
.kprod .mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border{ border-color:#C3CEDD; }
.kprod .mud-input-control:focus-within .mud-input.mud-input-outlined .mud-input-outlined-border,
.kprod .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border{
  border-color:var(--k-blue) !important; box-shadow:0 0 0 3px rgba(37,99,255,.10); }
.kprod .mud-input.mud-input-outlined input::placeholder,
.kprod .mud-input.mud-input-outlined textarea::placeholder{ color:#9AA6BD; opacity:1; }
/* Adornos # / Aa / barcode discretos */
.kprod .mud-input-adornment{ color:#9AA6BD; }
.kprod .mud-input-adornment .mud-input-adornment-text{ font-weight:600; font-size:.9rem; }
/* Campos de solo lectura (costos automáticos) un poco atenuados */
.kprod .mud-input.mud-input-outlined.mud-readonly input{ color:var(--k-ink-2); }

/* --- Switches con título + descripción (comportamiento MudBlazor intacto) --- */
.kprod-switch{ display:flex; align-items:center; gap:12px; padding-top:4px; }
.kprod-switch .mud-switch{ margin:0; flex:0 0 auto; }
.kprod-switch-txt .ks-t{ font-weight:600; font-size:.85rem; color:var(--k-navy); line-height:1.15; }
.kprod-switch-txt .ks-s{ font-size:.76rem; color:var(--k-ink-2); margin-top:1px; }

/* --- Nota informativa (existencia inicial) --- */
.kprod-hint{ display:flex; align-items:flex-start; gap:8px; margin-top:12px;
  font-size:.78rem; color:var(--k-ink-2); }
.kprod-hint .mud-icon-root{ font-size:17px; color:var(--k-blue); margin-top:1px; }

/* --- Foto: marco suave --- */
.kprod .kprod-photo{ border-color:#E5EAF1 !important; border-radius:12px; background:#F8FAFD; }

/* --- Chips reutilizables (multiselect de departamentos, etc.) --- */
.kchips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.kchips-empty{ font-size:.85rem; color:var(--k-ink-3); }
.kchip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:rgba(37,99,255,.10); color:var(--k-blue); font-size:.8rem; font-weight:500; line-height:1; }
.kchip-x{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border:0; padding:0; border-radius:50%; cursor:pointer; background:transparent; color:var(--k-blue);
  font-size:.9rem; line-height:1; transition:background .15s; }
.kchip-x:hover{ background:rgba(37,99,255,.18); }
.kchip-more{ font-size:.8rem; font-weight:500; color:var(--k-ink-2); cursor:pointer; }
.kchip-more:hover{ color:var(--k-blue); }
.kprod .kprod-help{ font-size:.76rem; color:var(--k-ink-3); margin-top:8px; }
/* Dropdown del multiselect: alto máximo con scroll elegante */
.kprod-deptlist.mud-popover .mud-list{ max-height:290px; overflow-y:auto; }

/* --- Botones inferiores --- */
.kprod-actions{ display:flex; justify-content:flex-end; gap:12px; width:100%; padding:8px 12px 6px; }
.kprod-actions .mud-button-root{ text-transform:none; font-weight:600; border-radius:10px;
  height:46px; padding:0 22px; letter-spacing:0; transition:transform .15s, box-shadow .15s; }
.kprod-actions .kprod-cancel{ background:var(--k-surface); border-color:#D9E1EC; color:var(--k-blue); }
.kprod-actions .kprod-cancel:hover{ background:#F5F8FF; border-color:var(--k-blue); }
.kprod-actions .kprod-save{ box-shadow:0 8px 20px -6px rgba(37,99,255,.5); }
.kprod-actions .kprod-save:hover:not(.mud-disabled){ transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(37,99,255,.6); }

/* --- Responsive: en móvil el diálogo respira menos y no genera scroll horizontal --- */
@media (max-width:600px){
  .kprod-sec{ padding:16px; }
  .kprod-title{ font-size:1.25rem; }
  .kprod .mud-tab{ min-width:auto; }
  .kprod-actions{ flex-direction:row; }
}

/* =====================================================================
   KONTIA · Portal del vendedor (PWA mobile-first): shell + dashboard
   ===================================================================== */

/* ---- Shell (header + main + bottom nav) ---- */
.pshell{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#F3F6FB; }
.pshell-header{ position:sticky; top:0; z-index:20; color:#fff; overflow:hidden;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(135deg,#2563FF 0%,#155EEF 55%,#0B4FD8 100%); }
.pshell-header::after{ content:""; position:absolute; top:-70px; right:-30px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 62%); pointer-events:none; }
.pshell-header-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.pshell-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.pshell-logo{ width:34px; height:34px; border-radius:9px; display:block; flex:0 0 auto; }
.pshell-name{ font-family:Poppins,sans-serif; font-weight:600; font-size:1.25rem; color:#fff; letter-spacing:.2px; }
.pshell-profile{ width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pshell-profile:hover{ background:rgba(255,255,255,.28); }
.pshell-profile .mud-icon-root{ font-size:24px; }
.pshell-main{ flex:1 1 auto; width:100%; max-width:920px; margin:0 auto;
  padding:16px 14px calc(90px + env(safe-area-inset-bottom)); }

.pshell-bottomnav{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around;
  background:#fff; border-top:1px solid #E8EDF5; box-shadow:0 -4px 16px rgba(15,23,42,.05);
  padding-bottom:env(safe-area-inset-bottom); }
.pnav-item{ position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 0 8px; min-height:44px; text-decoration:none; cursor:pointer; border:0; background:transparent;
  color:#8A94A6; font-size:.7rem; font-weight:500; font-family:inherit; transition:color .15s; }
.pnav-item .mud-icon-root{ font-size:22px; }
.pnav-item:hover{ color:#5A6577; }
.pnav-item.active{ color:var(--k-blue); }
.pnav-item.active::before{ content:""; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--k-blue); }

/* ---- Dashboard ---- */
.pdash-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:4px 2px 16px; }
.pdash-hello{ font-size:1.7rem; font-weight:400; color:var(--k-navy); letter-spacing:-.01em; line-height:1.15; }
.pdash-hello b{ font-weight:700; }
.pdash-subtitle{ font-size:.95rem; color:var(--k-ink-2); margin-top:3px; }
.pdash-date{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #E8EDF5;
  border-radius:12px; padding:8px 12px; font-size:.8rem; color:var(--k-ink-2); font-weight:600; white-space:nowrap;
  box-shadow:0 2px 8px rgba(15,23,42,.04); }
.pdash-date .mud-icon-root{ font-size:17px; color:var(--k-blue); }

.pcard{ background:#fff; border:1px solid #E8EDF5; border-radius:16px; box-shadow:0 6px 20px rgba(15,23,42,.05); }

/* Hero: pedidos pendientes */
.pdash-hero{ padding:18px; margin-bottom:16px; }
.pdash-hero-row{ display:flex; align-items:center; gap:16px; }
.pdash-hero-ic{ flex:0 0 auto; width:64px; height:64px; border-radius:16px; background:#F1EAFE; color:#7C3AED;
  display:flex; align-items:center; justify-content:center; }
.pdash-hero-ic .mud-icon-root{ font-size:32px; }
.pdash-hero-body{ flex:1 1 auto; min-width:0; }
.pdash-hero-t{ font-size:1.05rem; font-weight:600; color:var(--k-navy); }
.pdash-hero-n{ font-size:2.2rem; font-weight:700; color:#7C3AED; line-height:1.05; font-variant-numeric:tabular-nums; }
.pdash-hero-s{ font-size:.85rem; color:var(--k-ink-2); }
.pdash-hero-arrow{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:#F1EAFE; color:#7C3AED;
  display:flex; align-items:center; justify-content:center; }
.pdash-hero-cta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px;
  padding-top:14px; border-top:1px solid #EEF1F7; color:#7C3AED; font-weight:600; font-size:.9rem; text-decoration:none; }
.pdash-hero-cta .mud-icon-root{ font-size:18px; }

/* Access grid */
.pdash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.pdash-acc{ display:flex; flex-direction:column; padding:16px; text-decoration:none;
  transition:transform .15s, box-shadow .15s; }
.pdash-acc:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(15,23,42,.09); }
.pdash-acc:active{ transform:translateY(0); }
.pdash-acc-ic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:11px; }
.pdash-acc-ic .mud-icon-root{ font-size:24px; }
.pdash-acc-t{ font-size:1rem; font-weight:600; color:var(--k-navy); line-height:1.15; }
.pdash-acc-d{ font-size:.8rem; color:var(--k-ink-2); margin-top:3px; line-height:1.3; }
.pdash-acc-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto;
  padding-top:12px; border-top:1px solid #EEF1F7; }
.pdash-acc-d{ margin-bottom:2px; }
.pdash-acc-link{ font-size:.8rem; font-weight:600; }
.pdash-acc-badge{ font-size:.76rem; font-weight:700; border-radius:999px; padding:2px 9px; }
.pdash-acc-chev{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pdash-acc-chev .mud-icon-root{ font-size:17px; }
/* color variants */
.acc-blue .pdash-acc-ic{ background:#EAF0FF; color:#2563FF; } .acc-blue .pdash-acc-link{ color:#2563FF; } .acc-blue .pdash-acc-chev{ background:#EAF0FF; color:#2563FF; }
.acc-teal .pdash-acc-ic{ background:#E1FAF3; color:#0D9488; } .acc-teal .pdash-acc-link{ color:#0D9488; } .acc-teal .pdash-acc-badge{ background:#E1FAF3; color:#0D9488; } .acc-teal .pdash-acc-chev{ background:#E1FAF3; color:#0D9488; }
.acc-orange .pdash-acc-ic{ background:#FEF1E1; color:#EA8A2E; } .acc-orange .pdash-acc-link{ color:#D97706; } .acc-orange .pdash-acc-badge{ background:#FEF1E1; color:#B45309; } .acc-orange .pdash-acc-chev{ background:#FEF1E1; color:#D97706; }
.acc-violet .pdash-acc-ic{ background:#F1EAFE; color:#7C3AED; } .acc-violet .pdash-acc-link{ color:#7C3AED; } .acc-violet .pdash-acc-badge{ background:#F1EAFE; color:#7C3AED; } .acc-violet .pdash-acc-chev{ background:#F1EAFE; color:#7C3AED; }

/* Resumen rápido */
.pdash-sum{ padding:16px; margin-bottom:8px; }
.pdash-sum-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pdash-sum-h-l{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--k-navy); font-size:.98rem; }
.pdash-sum-h-l .mud-icon-root{ color:var(--k-blue); font-size:20px; }
.pdash-sum-more{ font-size:.82rem; font-weight:600; color:var(--k-blue); text-decoration:none; display:inline-flex; align-items:center; gap:3px; }
.pdash-sum-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pdash-sum-cell{ display:flex; flex-direction:column; align-items:flex-start; }
.pdash-sum-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.pdash-sum-ic .mud-icon-root{ font-size:20px; }
.pdash-sum-n{ font-size:1.4rem; font-weight:700; color:var(--k-navy); line-height:1; font-variant-numeric:tabular-nums; }
.pdash-sum-l{ font-size:.72rem; color:var(--k-ink-2); line-height:1.2; margin-top:3px; }

/* FAB nuevo pedido */
.pdash-fab-wrap{ position:fixed; right:18px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:25;
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.pdash-fab{ width:60px; height:60px; border-radius:50%; background:var(--k-blue); color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px -6px rgba(37,99,255,.6);
  transition:transform .15s, box-shadow .15s; }
.pdash-fab .mud-icon-root{ font-size:30px; }
.pdash-fab:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -8px rgba(37,99,255,.7); }
.pdash-fab:active{ transform:translateY(0); }
.pdash-fab-label{ font-size:.74rem; font-weight:600; color:var(--k-blue);
  background:rgba(255,255,255,.92); padding:2px 9px; border-radius:8px; box-shadow:0 2px 8px rgba(15,23,42,.08); }

/* Skeletons */
.pskel{ background:linear-gradient(90deg,#EEF2F7 25%,#E2E8F0 37%,#EEF2F7 63%); background-size:400% 100%;
  animation:pskel 1.4s ease infinite; border-radius:8px; display:inline-block; }
@keyframes pskel{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

.pdash-warn{ margin-bottom:16px; }

@media (min-width:560px){ .pdash-hello{ font-size:1.9rem; } }

/* =====================================================================
   KONTIA · Nuevo pedido (full-screen, mobile-first) — scope .porder-dialog
   ===================================================================== */
.porder-dialog .mud-dialog{ display:flex; flex-direction:column; height:100dvh; max-height:100dvh; }
.porder-dialog .mud-dialog-title{ padding:0; }
.porder-dialog .mud-dialog-content{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#F3F6FB; padding:16px 14px; max-height:none; }
.porder-dialog .mud-dialog-actions{ padding:0; margin:0; }

/* Header (gradient, safe-area top) */
.porder-head{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#2563FF 0%,#155EEF 60%,#0B4FD8 100%);
  padding:calc(env(safe-area-inset-top) + 14px) 16px 16px; }
.porder-head::after{ content:""; position:absolute; right:-30px; top:-70px; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 62%); pointer-events:none; }
.porder-head-row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; }
.porder-head-btn{ width:40px; height:40px; border-radius:10px; border:0; cursor:pointer; flex:0 0 auto;
  background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.porder-head-btn:hover{ background:rgba(255,255,255,.26); }
.porder-head-tt{ flex:1 1 auto; min-width:0; }
.porder-head-t{ font-size:1.25rem; font-weight:700; line-height:1.15; }
.porder-head-s{ font-size:.82rem; opacity:.92; }

.pocard{ background:#fff; border:1px solid #E8EDF5; border-radius:16px; box-shadow:0 6px 20px rgba(15,23,42,.05); }

/* Cliente + lista de precio */
.po-cust{ padding:4px 14px; margin-bottom:16px; }
.po-cust-row{ display:flex; align-items:center; gap:12px; padding:8px 0; min-height:56px; }
.po-cust-row + .po-cust-row{ border-top:1px solid #EEF1F7; }
.po-cust-ic{ width:44px; height:44px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.po-cust-ic.blue{ background:#EAF0FF; color:#2563FF; }
.po-cust-ic.teal{ background:#E1FAF3; color:#0D9488; }
.po-cust-body{ flex:1 1 auto; min-width:0; }
.po-cust-lbl{ font-size:.74rem; color:var(--k-ink-2); font-weight:500; margin-bottom:-2px; }
.po-cust-lbl .req{ color:#DC2626; margin-left:2px; }
/* Borderless MudSelect inside the card: show bold value + chevron only */
.po-cust .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:transparent !important; }
.po-cust .mud-input-control{ margin:0; }
.po-cust .mud-select .mud-select-input .mud-input-slot,
.po-cust .mud-select input{ font-weight:700; color:var(--k-navy); font-size:1rem; padding-left:0 !important; }
.po-cust .mud-input .mud-input-adornment-end{ color:#94A3B8; }

/* Section header */
.po-sec-h{ display:flex; align-items:center; justify-content:space-between; margin:2px 2px 12px; }
.po-sec-h-l{ display:flex; align-items:center; gap:10px; font-size:1.06rem; font-weight:700; color:var(--k-navy); }
.po-sec-h-ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:#EAF0FF; color:#2563FF; }
.po-sec-h-ic .mud-icon-root{ font-size:20px; }
.po-count{ font-size:.78rem; font-weight:600; color:#2563FF; background:#EAF0FF; border-radius:999px; padding:3px 11px; }

/* Add-product bar (styled MudAutocomplete) */
.po-add{ margin-bottom:14px; }
.po-add .mud-input.mud-input-outlined .mud-input-outlined-border{ border:1.5px dashed #9DBBFF; border-radius:12px; background:#F7FAFF; transition:border-color .15s, box-shadow .15s; }
.po-add .mud-input-control:focus-within .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#2563FF !important; box-shadow:0 0 0 3px rgba(37,99,255,.10); }
.po-add .mud-input-adornment{ color:#2563FF; }
.po-add input::placeholder{ color:#2563FF !important; opacity:1; font-weight:600; }
.po-add .mud-input-slot{ min-height:52px; }

/* Product card */
.po-item{ padding:14px; margin-bottom:12px; }
.po-item-top{ display:flex; gap:12px; align-items:flex-start; }
.po-item-ic{ width:46px; height:46px; border-radius:12px; flex:0 0 auto; background:#EEF2FE; color:#6D8AF0; display:flex; align-items:center; justify-content:center; }
.po-item-ic .mud-icon-root{ font-size:24px; }
.po-item-body{ flex:1 1 auto; min-width:0; }
.po-item-name{ font-weight:700; color:var(--k-navy); font-size:.98rem; line-height:1.2; }
.po-item-meta{ font-size:.78rem; color:var(--k-ink-2); margin-top:2px; }
.po-item-stock{ font-size:.72rem; color:var(--k-ink-3); margin-top:2px; }
.po-item-warn{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:.72rem; font-weight:600; color:#D97706; }
.po-item-warn .mud-icon-root{ font-size:15px; }
.po-item-del{ width:38px; height:38px; border-radius:10px; border:0; cursor:pointer; flex:0 0 auto;
  background:#FDECEC; color:#DC2626; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.po-item-del:hover{ background:#FBD9D9; }
.po-item-del .mud-icon-root{ font-size:20px; }
.po-item-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.po-step{ display:flex; align-items:center; gap:8px; }
.po-step-btn{ width:40px; height:40px; border-radius:10px; border:1px solid #D9E1EC; background:#fff; color:var(--k-navy);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s, color .15s; }
.po-step-btn:hover{ border-color:#2563FF; color:#2563FF; }
.po-step-btn .mud-icon-root{ font-size:20px; }
.po-step-val{ width:58px; }
.po-step-val .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#D9E1EC; border-radius:10px; }
.po-step-val input{ text-align:center; font-weight:600; color:var(--k-navy); }
.po-item-sub{ font-size:1.08rem; font-weight:700; color:var(--k-navy); font-variant-numeric:tabular-nums; }

/* Summary */
.po-sum{ padding:16px; margin-bottom:16px; }
.po-sum-row{ display:flex; align-items:center; justify-content:space-between; font-size:.9rem; color:var(--k-ink-2); margin-bottom:9px; }
.po-sum-row b{ color:var(--k-navy); font-weight:600; }
.po-sum-div{ height:1px; background:#EEF1F7; margin:12px 0; }
.po-sum-total{ display:flex; align-items:center; justify-content:space-between; }
.po-sum-total .l{ font-weight:700; color:var(--k-navy); font-size:1.02rem; }
.po-sum-total .v{ font-size:1.6rem; font-weight:700; color:#2563FF; font-variant-numeric:tabular-nums; }

/* Empty state */
.po-empty{ text-align:center; padding:20px 12px 6px; }
.po-empty-t{ font-weight:600; color:var(--k-navy); }
.po-empty-s{ font-size:.85rem; color:var(--k-ink-2); margin-top:2px; }

/* Notes */
.po-notes{ margin-bottom:8px; }
.po-notes .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#D9E1EC; border-radius:12px; }
.po-notes .mud-input-control:focus-within .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#2563FF !important; box-shadow:0 0 0 3px rgba(37,99,255,.10); }

/* Sticky footer */
.po-foot{ display:flex; align-items:center; gap:14px; width:100%; background:#fff; border-top:1px solid #E8EDF5;
  box-shadow:0 -8px 30px rgba(15,23,42,.08); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
.po-foot-total{ flex:0 0 auto; }
.po-foot-total .l{ font-size:.76rem; color:var(--k-ink-2); }
.po-foot-total .v{ font-size:1.5rem; font-weight:700; color:#2563FF; line-height:1.05; font-variant-numeric:tabular-nums; }
.po-foot-cta{ flex:1 1 auto; }
.po-foot-cta.mud-button-root{ height:52px; border-radius:12px; text-transform:none; font-weight:600; font-size:1rem;
  box-shadow:0 8px 20px -6px rgba(37,99,255,.5); }

/* =====================================================================
   KONTIA · Lista de precios (PWA vendedor, mobile-first) — scope .plp-*
   ===================================================================== */
.plp-intro{ display:flex; align-items:center; gap:12px; margin:2px 2px 14px; }
.plp-back{ width:38px; height:38px; border-radius:10px; border:1px solid #E8EDF5; background:#fff; color:var(--k-navy);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; text-decoration:none; }
.plp-back:hover{ border-color:#2563FF; color:#2563FF; }
.plp-intro-tt{ min-width:0; }
.plp-intro-t{ font-size:1.35rem; font-weight:700; color:var(--k-navy); line-height:1.12; }
.plp-intro-s{ font-size:.85rem; color:var(--k-ink-2); }

/* Search + filter */
.plp-searchrow{ display:flex; gap:10px; margin-bottom:12px; }
.plp-search{ flex:1 1 auto; }
.plp-search .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#E8EDF5; border-radius:14px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.04); }
.plp-search .mud-input-control:focus-within .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:#2563FF !important; box-shadow:0 0 0 3px rgba(37,99,255,.10); }
.plp-search .mud-input-slot{ min-height:50px; }
.plp-sortbtn{ width:52px; border-radius:14px; border:1px solid #E8EDF5; background:#fff; color:var(--k-ink-2);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 2px 8px rgba(15,23,42,.04); cursor:pointer; transition:border-color .15s, color .15s; }
.plp-sortbtn:hover{ border-color:#2563FF; color:#2563FF; }

/* Chips (real departments) */
.plp-chips{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.plp-chips::-webkit-scrollbar{ display:none; }
.plp-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:999px;
  border:1px solid #E3E9F2; background:#fff; color:var(--k-navy); font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s; }
.plp-chip .mud-icon-root{ font-size:17px; }
.plp-chip.active{ background:var(--k-blue); color:#fff; border-color:var(--k-blue); }

/* Count + sort row */
.plp-bar{ display:flex; align-items:center; justify-content:space-between; margin:2px 2px 12px; }
.plp-count{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--k-ink-2); font-weight:500; }
.plp-count .mud-icon-root{ font-size:18px; color:var(--k-ink-3); }
.plp-sort{ display:inline-flex; align-items:center; gap:5px; font-size:.82rem; color:var(--k-ink-2); background:none; border:0; cursor:pointer; }
.plp-sort b{ color:var(--k-blue); font-weight:600; }
.plp-sort .mud-icon-root{ font-size:16px; color:var(--k-blue); }

/* Product card */
.plp-card{ background:#fff; border:1px solid #E8EDF5; border-radius:16px; box-shadow:0 4px 16px rgba(15,23,42,.045); padding:14px; margin-bottom:11px; }
.plp-top{ display:flex; gap:12px; align-items:flex-start; }
.plp-thumb{ width:84px; height:84px; border-radius:12px; background:#F1F4FA; color:#B4C0D4; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.plp-thumb .mud-icon-root{ font-size:34px; }
.plp-thumb img{ width:100%; height:100%; object-fit:contain; }
.plp-info{ flex:1 1 auto; min-width:0; }
.plp-name{ font-size:1rem; font-weight:700; color:var(--k-navy); line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.plp-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.plp-mbadge{ font-size:.72rem; color:var(--k-ink-2); background:#F1F4FA; border-radius:6px; padding:2px 8px; font-weight:500; white-space:nowrap; }
.plp-chev{ color:#C0CADB; flex:0 0 auto; }

.plp-mid{ display:flex; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid #EEF1F7; }
.plp-price{ flex:1 1 0; min-width:0; }
.plp-price-lbl{ font-size:.72rem; color:var(--k-ink-2); }
.plp-price-val{ font-size:1.4rem; font-weight:700; color:#2563FF; line-height:1.12; font-variant-numeric:tabular-nums; }
.plp-price-val.na{ color:#94A3B8; font-size:1rem; font-weight:600; }
.plp-vdiv{ width:1px; align-self:stretch; background:#EEF1F7; margin:0 14px; }
.plp-stock{ flex:1 1 0; min-width:0; }
.plp-stock-lbl{ font-size:.72rem; color:var(--k-ink-2); margin-bottom:4px; }
.plp-badge{ display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; border-radius:999px; padding:4px 10px; }
.plp-badge .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.plp-badge.ok{ background:#ECFDF3; color:#15803D; } .plp-badge.ok .dot{ background:#22C55E; }
.plp-badge.zero{ background:#FEF2F2; color:#DC2626; } .plp-badge.zero .dot{ background:#EF4444; }
.plp-badge.na{ background:#F1F5F9; color:#475569; } .plp-badge.na .dot{ background:#94A3B8; }

.plp-more{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:12px; padding-top:11px;
  border:0; border-top:1px solid #EEF1F7; background:none; color:#2563FF; font-weight:600; font-size:.85rem; cursor:pointer; }
.plp-more .mud-icon-root{ font-size:18px; }
.plp-prices{ margin-top:8px; }
.plp-prow{ display:flex; align-items:center; justify-content:space-between; padding:8px 2px; font-size:.9rem; }
.plp-prow + .plp-prow{ border-top:1px dashed #EEF1F7; }
.plp-prow .n{ color:var(--k-ink-2); }
.plp-prow .v{ font-weight:700; color:var(--k-navy); font-variant-numeric:tabular-nums; }
.plp-prow .v.zero{ color:#94A3B8; font-weight:600; }

/* Skeleton */
.plp-sk{ background:#fff; border:1px solid #E8EDF5; border-radius:16px; padding:14px; margin-bottom:11px; display:flex; gap:12px; }
.plp-sk-thumb{ width:84px; height:84px; border-radius:12px; flex:0 0 auto; }
.plp-sk-lines{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding-top:4px; }

/* Empty / error */
.plp-empty{ text-align:center; padding:40px 16px 20px; }
.plp-empty-ic{ width:64px; height:64px; border-radius:18px; background:#EAF0FF; color:#2563FF; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.plp-empty-ic .mud-icon-root{ font-size:32px; }
.plp-empty-t{ font-weight:700; color:var(--k-navy); }
.plp-empty-s{ font-size:.88rem; color:var(--k-ink-2); margin-top:3px; }
.plp-empty-btn{ margin-top:16px; }

/* ============================================================
   KONTIA · Dashboard v2 (panel del tenant) — sistema compartido
   Reutiliza los tokens --k-*. Cards blancas, bordes suaves,
   sombras muy sutiles, acentos por modulo.
   ============================================================ */
.dash{ display:flex; flex-direction:column; gap:18px; }

/* ---- Header (saludo + utilidades + periodo) ---- */
.dash-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dash-hi{ font-family:Poppins, sans-serif; font-size:1.55rem; font-weight:600; letter-spacing:-.02em; color:var(--k-ink); margin:0; line-height:1.15; }
.dash-hi .wave{ margin-left:6px; }
.dash-sub{ color:var(--k-ink-2); font-size:.92rem; margin-top:2px; }
.dash-head-r{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.dash-search{ display:flex; align-items:center; gap:8px; background:var(--k-surface); border:1px solid var(--k-border);
  border-radius:10px; padding:8px 12px; min-width:230px; color:var(--k-ink-3); box-shadow:var(--k-sh-sm); }
.dash-search .mud-icon-root{ font-size:18px; }
.dash-search input{ border:0; outline:0; background:transparent; font-size:.9rem; color:var(--k-ink); width:100%; font-family:inherit; }
.dash-search .kbd{ font-size:.68rem; color:var(--k-ink-3); border:1px solid var(--k-border); border-radius:6px; padding:1px 6px; white-space:nowrap; }
.dash-tool{ position:relative; width:40px; height:40px; border-radius:10px; border:1px solid var(--k-border); background:var(--k-surface);
  display:flex; align-items:center; justify-content:center; color:var(--k-ink-2); box-shadow:var(--k-sh-sm); cursor:pointer; transition:border-color .15s, color .15s; }
.dash-tool:hover{ border-color:#C9D6FF; color:var(--k-blue); }
.dash-tool .mud-icon-root{ font-size:20px; }
.dash-tool .dot{ position:absolute; top:7px; right:8px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; background:var(--k-blue);
  color:#fff; font-size:.62rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.dash-avatar{ width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,#2563FF,#0B4FD8); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; cursor:pointer; box-shadow:var(--k-sh-sm); }

.dash-period{ display:inline-flex; align-items:center; gap:8px; background:var(--k-surface); border:1px solid var(--k-border);
  border-radius:10px; padding:8px 12px; font-size:.86rem; color:var(--k-ink); box-shadow:var(--k-sh-sm); cursor:pointer; white-space:nowrap; }
.dash-period .mud-icon-root{ font-size:17px; color:var(--k-ink-3); }

/* ---- Grids ---- */
.dgrid-kpi{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.dgrid-main{ display:grid; grid-template-columns:1.9fr 1.1fr; gap:16px; }
.dgrid-bottom{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ---- Card base ---- */
.dcard{ background:var(--k-surface); border:1px solid var(--k-border); border-radius:14px; box-shadow:var(--k-sh-sm); padding:18px 20px; }
.dcard-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.dcard-t{ font-weight:600; color:var(--k-ink); font-size:1rem; }
.dcard-link{ font-size:.82rem; font-weight:600; color:var(--k-blue); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.dcard-link .mud-icon-root{ font-size:15px; }

/* ---- KPI (MetricCard) ---- */
.mcard{ background:var(--k-surface); border:1px solid var(--k-border); border-radius:14px; box-shadow:var(--k-sh-sm); padding:18px; }
.mcard-top{ display:flex; align-items:center; gap:12px; }
.mcard-ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mcard-ic .mud-icon-root{ font-size:22px; }
.mcard-lbl{ color:var(--k-ink-3); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.mcard-val{ color:var(--k-ink); font-size:1.6rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums; margin-top:2px; }
.mcard-foot{ margin-top:10px; display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--k-ink-3); }
.mdelta{ display:inline-flex; align-items:center; gap:2px; font-weight:700; }
.mdelta .mud-icon-root{ font-size:15px; }
.mdelta.up{ color:#16A34A; } .mdelta.down{ color:#DC2626; }

/* accent icon tints (reuse module palette) */
.ic-blue{ background:var(--k-blue-050); color:var(--k-blue); }
.ic-green{ background:#E7F7EE; color:#0F9D58; }
.ic-purple{ background:#F1EBFE; color:#6D28D9; }
.ic-amber{ background:#FDF1E3; color:#B26608; }
.ic-cyan{ background:#E4FBF6; color:#0A9D86; }

/* ---- Chart card ---- */
.dchart{ width:100%; }
.dchart .mud-chart{ width:100% !important; }
.dind-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--k-border-2); }
.dind{ display:flex; align-items:center; gap:10px; }
.dind-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dind-ic .mud-icon-root{ font-size:17px; }
.dind-lbl{ font-size:.74rem; color:var(--k-ink-3); }
.dind-val{ font-size:.98rem; font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; }

/* ---- Category donut + legend ---- */
.dcat{ display:flex; flex-direction:column; gap:14px; }
.dcat-chart{ display:flex; align-items:center; justify-content:center; }
.dcat-legend{ display:flex; flex-direction:column; gap:9px; }
.dcat-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; font-size:.86rem; }
.dcat-name{ display:flex; align-items:center; gap:8px; color:var(--k-ink); }
.dcat-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.dcat-amt{ font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.dcat-pct{ color:var(--k-ink-3); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }

/* ---- List widgets (receivables / inventory / activity) ---- */
.dw{ display:flex; flex-direction:column; }
.dw-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--k-border-2); }
.dw-row:first-child{ border-top:0; }
.dw-av{ width:38px; height:38px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; }
.dw-thumb{ width:38px; height:38px; border-radius:9px; flex:0 0 auto; background:var(--k-ground); display:flex; align-items:center; justify-content:center; color:var(--k-ink-3); }
.dw-thumb .mud-icon-root{ font-size:19px; }
.dw-body{ flex:1 1 auto; min-width:0; }
.dw-t{ font-weight:600; color:var(--k-ink); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dw-s{ font-size:.78rem; color:var(--k-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dw-r{ text-align:right; flex:0 0 auto; }
.dw-amt{ font-weight:700; color:var(--k-ink); font-size:.9rem; font-variant-numeric:tabular-nums; }
.dw-badge{ font-size:.72rem; font-weight:700; }
.dw-badge.red{ color:#DC2626; } .dw-badge.amber{ color:#B26608; } .dw-badge.green{ color:#0F9D58; }
.dw-foot{ margin-top:12px; padding-top:12px; border-top:1px solid var(--k-border-2); }
.dw-empty{ color:var(--k-ink-3); font-size:.86rem; padding:18px 0; text-align:center; }

/* activity icon tints */
.dact-ic{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.dact-ic .mud-icon-root{ font-size:17px; }

/* ---- Responsive ---- */
@media (max-width:1200px){
  .dgrid-main{ grid-template-columns:1fr; }
  .dgrid-bottom{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .dgrid-kpi{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .dgrid-kpi{ grid-template-columns:1fr; }
  .dash-search{ min-width:0; flex:1 1 100%; order:5; }
  .dash-hi{ font-size:1.3rem; }
}

/* ============================================================
   KONTIA · Lista administrativa v2 (patrón reutilizable)
   Encabezado + breadcrumb + KPIs + card unificada (toolbar +
   tabla + paginación). Reutiliza tokens --k-* y .mcard/.kbadge.
   ============================================================ */
.klist{ display:flex; flex-direction:column; gap:6px; }

/* Header + breadcrumb */
.klist-head{ min-height:40px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.klist-head-main{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; min-width:0; }
.klist-title{ font-family:Poppins, sans-serif; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; color:var(--k-ink); margin:0; line-height:1.05; }
.klist-crumb{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--k-ink-3); margin-top:1px; }
.klist-crumb a{ color:var(--k-ink-3); text-decoration:none; }
.klist-crumb a:hover{ color:var(--k-blue); }
.klist-crumb b{ color:var(--k-ink-2); font-weight:600; }
.klist-crumb span{ color:#C7CFDD; }

/* KPI row (uses <MetricCard>) */
.klist-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.klist-kpis .mcard{ height:64px; box-sizing:border-box; padding:8px 11px; border-radius:8px; box-shadow:none; min-width:0; }
.klist-kpis .mcard-top{ gap:9px; }
.klist-kpis .mcard-ic{ width:34px; height:34px; border-radius:8px; }
.klist-kpis .mcard-ic .mud-icon-root{ font-size:18px; }
.klist-kpis .mcard-lbl{ font-size:.68rem; }
.klist-kpis .mcard-val{ font-size:1.28rem; }

/* Unified white container */
.klist-card{ background:var(--k-surface); border:1px solid var(--k-border); border-radius:8px; box-shadow:none; overflow:hidden; }

/* Toolbar */
.klist-toolbar{ min-height:46px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 10px; border-bottom:1px solid var(--k-border-2); }
.klist-toolbar-l{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.klist-toolbar-r{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:280px; }
.klist-toolbar .mud-button-root{ text-transform:none; font-weight:600; font-size:.82rem; color:var(--k-ink-2); }
.klist-toolbar .klist-primary{ color:#fff; box-shadow:0 2px 8px rgba(37,99,255,.28); }
.klist-search{ flex:1 1 420px; max-width:560px; display:flex; align-items:center; gap:7px; background:var(--k-surface); border:1px solid var(--k-border);
  border-radius:8px; padding:6px 10px; min-width:260px; color:var(--k-ink-3); }
.klist-search .mud-icon-root{ font-size:17px; }
.klist-search input{ border:0; outline:0; background:transparent; font-size:.85rem; color:var(--k-ink); width:100%; font-family:inherit; }
.klist-filterbar{ min-height:48px; box-sizing:border-box; display:flex; align-items:flex-end; gap:12px; padding:5px 10px;
  border-bottom:1px solid var(--k-border-2); background:#F8FAFC; }
.klist-filterfield{ width:190px; }
.klist-filterfield > span, .klist-inactive > span{ display:block; margin-bottom:2px; color:var(--k-ink-3); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.035em; }
.klist-selectwrap{ position:relative; }
.klist-selectdefault{ position:absolute; left:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--k-ink-2); font-size:.78rem; }
.klist-filterfield .mud-input-control{ margin:0; }
.klist-filterfield .mud-input.mud-input-outlined .mud-input-outlined-border{ border-color:var(--k-border); border-radius:7px; background:#fff; }
.klist-inactive{ min-width:150px; }
.klist-inactive .mud-switch{ margin:0; }
.klist-inactive .mud-typography{ font-size:.76rem; }
.klist-filter-active{ align-self:center; }
.klist-clear{ margin-left:auto; align-self:center; }

/* Shared toolbar/filter utilities still used by Clientes (kept when Productos
   moved to .klist-filterbar). TODO(Codex): reconcile into the Design System. */
.klist-sep{ width:1px; height:22px; background:var(--k-border); margin:0 6px; }
.klist-filters{ padding:12px 14px; min-width:230px; display:flex; flex-direction:column; }

/* Badges (reusable status system) */
.kbadge{ display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
  border-radius:999px; padding:2px 9px; line-height:1.5; white-space:nowrap; }
.kbadge-blue{ background:var(--k-blue-050); color:var(--k-blue); }
.kbadge-green{ background:#E7F7EE; color:#0F9D58; }
.kbadge-red{ background:#FEF2F2; color:#DC2626; }
.kbadge-gray{ background:#F1F5F9; color:#64748B; }
.kbadge-amber{ background:#FDF1E3; color:#B26608; }
.kbadge-purple{ background:#F1EBFE; color:#6D28D9; }

/* Data grid look */
.klist-grid{ border:0 !important; box-shadow:none !important; }
.klist-grid .mud-table-container{ overflow-y:hidden; }
.klist-grid .mud-table-root{ }
.klist-grid.mud-table-dense .mud-table-head th{ height:34px; box-sizing:border-box; background:#F8FAFC; color:var(--k-ink-3); font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--k-border); padding:4px 12px; }
.klist-grid.mud-table-dense .mud-table-body td{ height:40px; box-sizing:border-box; font-size:.8rem; color:var(--k-ink); border-bottom:1px solid var(--k-border-2);
  padding:3px 12px; }
.klist-grid .mud-table-body tr:hover{ background:#F8FAFC; }
.klist-price{ font-weight:700; font-variant-numeric:tabular-nums; }

/* Product cell (thumb + name + department) */
.klist-prod{ display:flex; align-items:center; gap:8px; }
.klist-thumb{ position:relative; width:30px; height:30px; border-radius:7px; flex:0 0 auto; overflow:hidden;
  background:var(--k-ground); border:1px solid var(--k-border-2); display:flex; align-items:center; justify-content:center; }
.klist-thumb .mud-icon-root{ font-size:18px; color:#B4BECD; }
.klist-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.klist-av{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.78rem; }
/* ---- Nueva factura (wizard 2 pasos) ---- */
.inv-dialog .mud-dialog-content{ padding-top:6px; }
.inv-body{ transition:width .2s ease; }
.inv-body.b1{ width:620px; max-width:100%; }
.inv-body.b2{ width:1040px; max-width:100%; }
@media (max-width:1100px){ .inv-body.b2{ width:100%; } }
@media (max-width:640px){ .inv-body.b1{ width:100%; } }

/* Stepper */
.inv-steps{ display:flex; align-items:center; gap:12px; padding:10px 2px 2px; }
.inv-step{ display:flex; align-items:center; gap:8px; cursor:default; color:var(--k-ink-3); font-size:.86rem; font-weight:600; }
.inv-step.active, .inv-step.done{ color:var(--k-ink); cursor:pointer; }
.inv-step-n{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#E7EBF2; color:var(--k-ink-3); font-size:.78rem; font-weight:700; flex:0 0 auto; }
.inv-step.active .inv-step-n{ background:var(--k-blue); color:#fff; }
.inv-step.done .inv-step-n{ background:var(--k-blue); color:#fff; }
.inv-step-n .mud-icon-root{ font-size:15px; }
.inv-step-line{ flex:1 1 auto; height:2px; background:var(--k-border); border-radius:2px; max-width:120px; }
.inv-step-line.on{ background:var(--k-blue); }

/* Capture row */
.inv-cap{ display:flex; gap:12px; align-items:flex-start; }
.inv-cap .inv-c-code{ width:22%; }
.inv-cap .inv-c-prod{ width:38%; }
.inv-cap .inv-c-qty{ width:15%; }
.inv-cap .inv-c-price{ width:17%; }
.inv-cap .inv-c-add{ margin-top:4px; border-radius:11px; }
.inv-empty{ color:var(--k-ink-3); text-align:center; padding:16px; }

/* Resumen */
.inv-summary{ background:var(--k-ground); border:1px solid var(--k-border-2); }
.inv-sum-title{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--k-ink); margin-bottom:10px; }
.inv-sum-title .mud-icon-root{ color:var(--k-ink-3); }
.inv-sum-grid{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:flex-end; }
.inv-sum-item{ display:flex; flex-direction:column; gap:2px; }
.inv-sum-item > span{ font-size:.78rem; color:var(--k-ink-3); }
.inv-sum-item > b{ font-size:.98rem; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.inv-sum-item:first-child{ margin-right:auto; }
.inv-sum-item:first-child > span{ font-size:.9rem; color:var(--k-ink-2); font-weight:600; }
.inv-sum-total > span{ color:var(--k-ink-2); }
.inv-sum-total > b{ font-size:1.5rem; font-weight:700; color:var(--k-blue); letter-spacing:-.01em; }
.kprod-actions .mr-auto{ margin-right:auto; }

@media (max-width:700px){
  .inv-cap{ flex-wrap:wrap; }
  .inv-cap .inv-c-code, .inv-cap .inv-c-prod, .inv-cap .inv-c-qty, .inv-cap .inv-c-price{ width:100%; }
}

/* Invoice product picker dialog */
.ipick-list{ max-height:360px; overflow:auto; border:1px solid var(--k-border); border-radius:10px; }
.ipick-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border-bottom:1px solid var(--k-border-2); cursor:pointer; }
.ipick-row:last-child{ border-bottom:0; }
.ipick-row:hover{ background:var(--k-blue-050); }
.ipick-name{ font-weight:600; color:var(--k-ink); font-size:.9rem; }
.ipick-sub{ font-size:.76rem; color:var(--k-ink-3); }
.ipick-price{ font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.klist-prod-body{ min-width:0; }
.klist-prod-name{ font-weight:600; color:var(--k-ink); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.klist-prod-sub{ font-size:.66rem; color:var(--k-ink-3); line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Row actions */
.klist-actions{ display:inline-flex; align-items:center; gap:2px; }
.klist-actions .mud-icon-button{ width:30px; height:30px; padding:5px; color:var(--k-ink-3); border:1px solid var(--k-border); border-radius:7px; }
.klist-actions .mud-icon-button:hover{ color:var(--k-blue); background:var(--k-blue-050); }

/* Empty / loading states */
.klist-empty{ text-align:center; padding:44px 16px; color:var(--k-ink-3); }
.klist-empty > .mud-icon-root{ font-size:40px; color:#CBD5E1; }
.klist-empty-t{ font-weight:700; color:var(--k-ink); margin-top:10px; }
.klist-empty-s{ font-size:.86rem; color:var(--k-ink-3); margin-top:3px; }

/* Pager */
.klist-grid .mud-table-pagination{ min-height:42px; border-top:1px solid var(--k-border-2); }

/* Responsive */
@media (max-width:1200px){ .klist-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .klist-toolbar{ flex-wrap:wrap; }
  .klist-toolbar-r{ width:100%; justify-content:space-between; }
  .klist-search{ flex:1 1 auto; }
  .klist-filterbar{ flex-wrap:wrap; align-items:flex-end; }
}
@media (max-width:640px){ .klist-kpis{ grid-template-columns:1fr; } }

/* ============================================================
   KONTIA · Barra superior global (back-office)
   ============================================================ */
.ktopbar{ display:flex; align-items:center; justify-content:flex-end; gap:8px; height:46px;
  padding:0 14px; background:var(--k-surface); border-bottom:1px solid var(--k-border); position:sticky; top:0; z-index:20; }
.ktopbar .dash-search{ margin-right:auto; max-width:340px; }
.ktopbar .dash-search{ padding:5px 10px; min-width:220px; }
.ktopbar .dash-tool{ width:34px; height:34px; border-radius:8px; }
.ktopbar .dash-tool .mud-icon-root{ font-size:18px; }
.ktopbar .dash-avatar{ width:34px; height:34px; border-radius:8px; font-size:.78rem; }

/* MudMainContent reserva por defecto la altura de un MudAppBar. Kontia usa un
   TopBar propio dentro del main, por lo que ese offset debe ser cero. */
.mud-main-content.k-main{ padding-top:0; }
.k-main-body{ padding:10px 16px; }

/* Product detail (read-only view dialog) */
.pv-hero{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.pv-thumb{ position:relative; width:64px; height:64px; border-radius:12px; flex:0 0 auto; overflow:hidden;
  background:var(--k-ground); border:1px solid var(--k-border); display:flex; align-items:center; justify-content:center; }
.pv-thumb .mud-icon-root{ font-size:28px; color:#B4BECD; }
.pv-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pv-name{ font-weight:700; font-size:1.05rem; color:var(--k-ink); line-height:1.2; }
.pv-code{ font-size:.82rem; color:var(--k-ink-3); margin-top:2px; }
.pv-badges{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.pv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.pv-field{ display:flex; flex-direction:column; gap:2px; }
.pv-lbl{ font-size:.72rem; color:var(--k-ink-3); font-weight:600; letter-spacing:.02em; }
.pv-val{ font-size:.9rem; color:var(--k-ink); font-weight:500; }
.pv-prices{ display:flex; gap:10px; flex-wrap:wrap; }
.pv-price{ flex:1 1 120px; background:var(--k-ground); border:1px solid var(--k-border-2); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.pv-price-v{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--k-ink); }
.pv-desc{ font-size:.88rem; color:var(--k-ink-2); line-height:1.5; }
@media (max-width:520px){ .pv-grid{ grid-template-columns:1fr; } }

/* ============================================================
   KONTIA · Dashboard ERP v3 (denso, estilo escritorio)
   Paneles compactos con cabecera + tablas densas + gráficos.
   Solo datos reales. Reutiliza tokens --k-* y .mcard.
   ============================================================ */
.derp{ display:flex; flex-direction:column; gap:8px; max-width:1720px; margin:0 auto; }

/* Header */
.derp-head{ min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.derp-title{ font-family:Poppins, sans-serif; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; color:var(--k-ink); margin:0; line-height:1.05; }
.derp-period{ display:inline-flex; align-items:center; gap:8px; background:var(--k-surface); border:1px solid var(--k-border);
  border-radius:8px; padding:5px 10px; font-size:.75rem; color:var(--k-ink); box-shadow:none; white-space:nowrap; }
.derp-period .mud-icon-root{ font-size:16px; color:var(--k-ink-3); }
.derp-period-sep{ width:1px; height:15px; background:var(--k-border); }

/* KPI row (5 dense cards) */
.derp-kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.derp-kpis .mcard{ height:64px; box-sizing:border-box; padding:8px 11px; border-radius:8px; box-shadow:none; min-width:0; }
.derp-kpis .mcard-top{ gap:9px; }
.derp-kpis .mcard-ic{ width:34px; height:34px; border-radius:8px; }
.derp-kpis .mcard-ic .mud-icon-root{ font-size:18px; }
.derp-kpis .mcard-lbl{ font-size:.68rem; }
.derp-kpis .mcard-val{ font-size:1.28rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.derp-kpis .mcard-foot{ margin-top:4px; font-size:.68rem; min-height:14px; }

.ic-teal{ background:#E1FAF4; color:#0A9D86; }
.ic-red{ background:#FDEAEA; color:#DC2626; }

/* Alerts strip */
.derp-attention{ order:10; border:1px solid var(--k-border); border-radius:9px; background:var(--k-surface); overflow:hidden; }
.derp-attention-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; height:25px;
  padding:0 10px; border-bottom:1px solid var(--k-border-2); background:#F8FAFC; }
.derp-attention-h > span{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; color:var(--k-ink); text-transform:uppercase; letter-spacing:.035em; }
.derp-attention-h .mud-icon-root{ font-size:15px; color:#B26608; }
.derp-attention-h small{ font-size:.66rem; color:var(--k-ink-3); }
.derp-alerts{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.derp-attention .derp-alerts{ gap:0; }
.derp-alert{ display:flex; align-items:center; gap:9px; min-width:0; color:inherit; text-decoration:none; background:var(--k-surface);
  border:0; border-right:1px solid var(--k-border-2); border-left:3px solid var(--k-border); padding:5px 9px; transition:background .12s; }
.derp-alert:last-child{ border-right:0; }
.derp-alert:hover{ background:#F8FAFC; }
.derp-alert .mud-icon-root{ font-size:18px; flex:0 0 auto; }
.derp-alert .da-n{ font-size:.94rem; font-weight:700; color:var(--k-ink); line-height:1; font-variant-numeric:tabular-nums; }
.derp-alert .da-l{ font-size:.64rem; color:var(--k-ink-3); line-height:1.15; margin-top:1px; }
.derp-alert.sev-red{ border-left-color:#EF4444; } .derp-alert.sev-red .mud-icon-root{ color:#DC2626; }
.derp-alert.sev-amber{ border-left-color:#F59E0B; } .derp-alert.sev-amber .mud-icon-root{ color:#B26608; }
.derp-alert.sev-blue{ border-left-color:#2563FF; } .derp-alert.sev-blue .mud-icon-root{ color:#2563FF; }
.derp-alert.sev-teal{ border-left-color:#00D4B3; } .derp-alert.sev-teal .mud-icon-root{ color:#0A9D86; }
.derp-alert.sev-ok{ border-left-color:#22C55E; } .derp-alert.sev-ok .mud-icon-root{ color:#16A34A; }

/* Rows */
.derp-rowA{ height:206px; display:grid; grid-template-columns:minmax(0,1.9fr) minmax(320px,1fr); gap:8px; }
.derp-rowB{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }

/* Panel */
.dpanel{ background:var(--k-surface); border:1px solid var(--k-border); border-radius:9px; box-shadow:none;
  display:flex; flex-direction:column; overflow:hidden; }
.dpanel-h{ height:32px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 11px;
  border-bottom:1px solid var(--k-border-2); background:var(--k-ground); }
.dpanel-h > span:first-child{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.78rem; color:var(--k-ink); }
.dpanel-h .mud-icon-root{ font-size:15px; color:var(--k-blue); }
.dpanel-total{ font-size:.82rem; font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.dpanel-link{ font-size:.7rem; font-weight:600; color:var(--k-blue); text-decoration:none; }
.dpanel-link:hover{ text-decoration:underline; }
.dpanel-note{ font-size:.66rem; color:var(--k-ink-3); background:var(--k-surface); border:1px solid var(--k-border-2); border-radius:999px; padding:1px 7px; }
.dpanel-b{ padding:8px; flex:1 1 auto; min-width:0; }
.dpanel-b.p0{ padding:0; overflow-x:auto; }
.dpad{ padding:14px 16px; display:flex; flex-direction:column; gap:8px; }

/* Chart tweaks */
.derp-chart{ width:100% !important; }
.derp-chart .mud-chart{ width:100% !important; }

/* Donut + legend */
.dpie{ min-height:154px; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:center; }
.dpie-leg{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; flex:1 1 170px; min-width:160px; }
.dpie-leg li{ display:grid; grid-template-columns:9px minmax(58px,1fr) minmax(62px,auto) 38px; align-items:center; gap:5px; font-size:.69rem; }
.dpie-dot{ width:10px; height:10px; border-radius:3px; }
.dpie-lbl{ color:var(--k-ink-2); white-space:nowrap; }
.dpie-amt{ font-weight:700; color:var(--k-ink); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.dpie-pct{ color:var(--k-ink-3); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; white-space:nowrap; }

/* Dense tables */
.dtable{ width:100%; border-collapse:collapse; font-size:.74rem; }
.dtable thead th{ text-align:left; font-weight:600; font-size:.69rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--k-ink-3); height:27px; padding:4px 10px; border-bottom:1px solid var(--k-border); background:#F8FAFC; position:sticky; top:0; }
.dtable tbody td{ height:28px; box-sizing:border-box; padding:4px 10px; border-bottom:1px solid var(--k-border-2); color:var(--k-ink); vertical-align:middle; }
.dtable tbody tr:last-child td{ border-bottom:0; }
.dtable tbody tr:hover{ background:var(--k-blue-050); }
.dtable td.r, .dtable th.r{ text-align:right; font-variant-numeric:tabular-nums; }
.dtable td.c, .dtable th.c{ text-align:center; }
.dtable td.nowrap{ white-space:nowrap; }
.dtable td.muted{ color:var(--k-ink-3); }
.dtable td.ell{ max-width:1px; width:40%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Doc kind + rank + badges */
.dkind{ display:inline-block; font-size:.6rem; font-weight:700; padding:1px 5px; border-radius:4px; margin-right:4px; vertical-align:middle; }
.dkind.k-inv{ background:var(--k-blue-050); color:var(--k-blue); }
.dkind.k-note{ background:#E1FAF4; color:#0A9D86; }
.drank{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px;
  font-size:.75rem; font-weight:700; background:var(--k-ground); color:var(--k-ink-2); }
.drank.r1{ background:#FEF3C7; color:#B45309; } .drank.r2{ background:#E5E7EB; color:#4B5563; } .drank.r3{ background:#FDE7D3; color:#9A5B1E; }
.dbadge{ display:inline-block; font-size:.64rem; font-weight:700; padding:1px 7px; border-radius:999px; }
.dbadge.b-blue{ background:var(--k-blue-050); color:var(--k-blue); }
.dbadge.b-green{ background:#E7F7EE; color:#0F9D58; }
.dbadge.b-amber{ background:#FDF1E3; color:#B26608; }
.dbadge.b-teal{ background:#E1FAF4; color:#0A9D86; }
.dbadge.b-red{ background:#FDEAEA; color:#DC2626; }
.dbadge.b-gray{ background:var(--k-ground); color:var(--k-ink-3); }

/* Empty states */
.dempty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:16px 10px; color:var(--k-ink-3); text-align:center; }
.dempty .mud-icon-root{ font-size:25px; color:#C6D0DE; }
.dempty span{ font-size:.72rem; }

/* Responsive */
@media (max-width:1200px){
  .derp-kpis{ grid-template-columns:repeat(3,1fr); }
  .derp-alerts{ grid-template-columns:repeat(3,1fr); }
  .derp-rowA{ grid-template-columns:1fr; }
  .derp-rowB{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .derp-kpis{ grid-template-columns:repeat(2,1fr); }
  .derp-alerts{ grid-template-columns:repeat(2,1fr); }
  .derp-alert{ border-bottom:1px solid var(--k-border-2); }
  .derp-attention-h small{ display:none; }
}
@media (max-width:480px){
  .derp-kpis{ grid-template-columns:1fr; }
  .derp-alerts{ grid-template-columns:1fr; }
}