/* /Pages/Areas.razor.rz.scp.css */
/* ── Cabecera de página ──────────────────────────────────────────────────── */
.areas-header[b-jpt0ltt1sl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.areas-titulo[b-jpt0ltt1sl] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b2a38;
    margin: 0 0 0.15rem;
}

.areas-subtitulo[b-jpt0ltt1sl] {
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0;
}

.areas-toolbar[b-jpt0ltt1sl] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.areas-toggle[b-jpt0ltt1sl] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: #6c757d;
    cursor: pointer;
}

.areas-cargando[b-jpt0ltt1sl], .areas-vacio[b-jpt0ltt1sl] {
    text-align: center;
    color: #6c757d;
    padding: 2.5rem;
    font-style: italic;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.area-card[b-jpt0ltt1sl] {
    background: #fff;
    border: 1px solid #d8dde3;
    border-left: 4px solid #ced4da;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.15s;
}

.area-card:hover[b-jpt0ltt1sl] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.area-card.inactivo[b-jpt0ltt1sl] {
    opacity: 0.6;
    background: #fafafa;
}

/* Acento izquierdo por tipo */
.tipo-materiaprima[b-jpt0ltt1sl]        { border-left-color: #f59e0b; }
.tipo-herramientasconsumo[b-jpt0ltt1sl] { border-left-color: #8b5cf6; }
.tipo-productoenproceso[b-jpt0ltt1sl]   { border-left-color: #3b82f6; }
.tipo-productoterminado[b-jpt0ltt1sl]   { border-left-color: #22c55e; }

/* Layout interior de la card */
.area-header[b-jpt0ltt1sl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.area-info[b-jpt0ltt1sl] { flex: 1; min-width: 0; }

.area-title-row[b-jpt0ltt1sl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.area-codigo[b-jpt0ltt1sl] {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: #1b2a38;
    background: #f2f4f7;
    border: 1px solid #dee2e6;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.area-nombre[b-jpt0ltt1sl] {
    font-weight: 600;
    color: #1b2a38;
    font-size: 0.95rem;
}

.area-direccion[b-jpt0ltt1sl] {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: #6c757d;
}

.area-actions[b-jpt0ltt1sl] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-shrink: 0;
}

/* ── Badges de tipo ──────────────────────────────────────────────────────── */
.badge-tipo-materiaprima[b-jpt0ltt1sl]        { background: #fff8e1; color: #b45309; }
.badge-tipo-herramientasconsumo[b-jpt0ltt1sl] { background: #f3e8ff; color: #5a1e82; }
.badge-tipo-productoenproceso[b-jpt0ltt1sl]   { background: #cfe2ff; color: #084298; }
.badge-tipo-productoterminado[b-jpt0ltt1sl]   { background: #d1e7dd; color: #0a3622; }

/* ── Botón de ubicaciones ────────────────────────────────────────────────── */
.btn-ubic[b-jpt0ltt1sl] {
    background: #f2f4f7;
    color: #495057;
    border: 1px solid #ced4da;
    font-size: 0.78rem;
}

.btn-ubic:hover[b-jpt0ltt1sl]  { background: #e9ecef; }
.btn-ubic.active[b-jpt0ltt1sl] { background: #1b2a38; color: #fff; border-color: #1b2a38; }

/* ── Ubicaciones ─────────────────────────────────────────────────────────── */
.badge-ubic-activa[b-jpt0ltt1sl] { background: #d1e7dd; color: #0a3622; }

.ubic-add-row[b-jpt0ltt1sl] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #dee2e6;
}

/* ── Pie del modal ───────────────────────────────────────────────────────── */
.modal-footer-btns[b-jpt0ltt1sl] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* ── Wrapper de página con tema oscuro y variables ───────────────── */
.dash-page[b-3w8odkc5eg] {
    /* Variables del tema */
    --d-bg1:    #0d1117;
    --d-bg2:    #161b22;
    --d-bg3:    #21262d;
    --d-border: rgba(255,255,255,0.08);
    --d-text:   #e6edf3;
    --d-text2:  #7d8590;
    --d-amber:  #f59e0b;
    --d-blue:   #3b82f6;
    --d-green:  #22c55e;
    --d-red:    #ef4444;
    --d-orange: #f97316;
    --d-purple: #a78bfa;
    --d-teal:   #14b8a6;

    background: var(--d-bg1);
    color: var(--d-text);
    min-height: calc(100vh - 2.5rem);
    /* Salir del padding del .content para cubrir toda la zona */
    margin: -1.25rem -1.5rem;
    padding: 1.5rem 1.75rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.dash-topbar[b-3w8odkc5eg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--d-border);
}
.dash-title[b-3w8odkc5eg] { font-size: 22px; font-weight: 700; margin: 0; color: var(--d-text); }
.dash-sub[b-3w8odkc5eg]   { font-size: 12px; color: var(--d-text2); margin: 3px 0 0; }
.dash-refresh[b-3w8odkc5eg] {
    padding: 7px 16px; border-radius: 8px;
    border: 1px solid var(--d-border); background: var(--d-bg3);
    color: var(--d-text); font-size: 13px; cursor: pointer;
}
.dash-refresh:hover[b-3w8odkc5eg] { border-color: rgba(255,255,255,0.2); background: #2d333b; }

/* ── Loading / error ────────────────────────────────────────────── */
.dash-loading[b-3w8odkc5eg] {
    display: flex; align-items: center; gap: 12px;
    padding: 40px; color: var(--d-text2); font-size: 14px;
}
.dash-spinner[b-3w8odkc5eg] {
    width: 20px; height: 20px; border-radius: 50%;
    border: 3px solid var(--d-bg3); border-top-color: var(--d-amber);
    animation: spin-b-3w8odkc5eg .7s linear infinite;
}
@keyframes spin-b-3w8odkc5eg { to { transform: rotate(360deg); } }
.dash-error[b-3w8odkc5eg] {
    padding: 24px; color: var(--d-red); font-size: 14px; display: flex; gap: 10px; align-items: center;
}
.dash-error button[b-3w8odkc5eg] {
    padding: 4px 12px; border-radius: 6px; border: 1px solid var(--d-red);
    background: transparent; color: var(--d-red); cursor: pointer; font-size: 12px;
}

/* ── KPI Grid ─── (nivel Dashboard; los .kpi* internos están en KpiCard.razor.css) */
.kpi-grid[b-3w8odkc5eg] { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }

/* ── Layout rows ─────────────────────────────────────────────────── */
.row3[b-3w8odkc5eg] { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.row2[b-3w8odkc5eg] { display: grid; grid-template-columns: 1fr 1fr;  gap: 16px; margin-bottom: 20px; }

/* ── Panel ───────────────────────────────────────────────────────── */
.panel[b-3w8odkc5eg] {
    background: var(--d-bg2); border: 1px solid var(--d-border);
    border-radius: 10px; padding: 20px;
}
.panel-head[b-3w8odkc5eg] {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.panel-title[b-3w8odkc5eg] { font-size: 13px; font-weight: 600; color: var(--d-text); }
.panel-sub[b-3w8odkc5eg]   { font-size: 11px; color: var(--d-text2); }

/* ── Tags ────────────────────────────────────────────────────────── */
.tag[b-3w8odkc5eg] {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; display: inline-block;
}
.tag-amber[b-3w8odkc5eg]  { background: rgba(245,158,11,0.15);  color: var(--d-amber); }
.tag-green[b-3w8odkc5eg]  { background: rgba(34,197,94,0.15);   color: var(--d-green); }
.tag-red[b-3w8odkc5eg]    { background: rgba(239,68,68,0.15);   color: var(--d-red); }
.tag-blue[b-3w8odkc5eg]   { background: rgba(59,130,246,0.15);  color: var(--d-blue); }
.tag-teal[b-3w8odkc5eg]   { background: rgba(20,184,166,0.15);  color: var(--d-teal); }

/* ── Stock bars ──────────────────────────────────────────────────── */
.stock-row[b-3w8odkc5eg]  { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.stock-name[b-3w8odkc5eg] { font-size: 12px; width: 120px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--d-text); }
.stock-track[b-3w8odkc5eg] { flex: 1; height: 6px; background: var(--d-bg3); border-radius: 3px; overflow: hidden; }
.stock-fill[b-3w8odkc5eg]  { height: 100%; border-radius: 3px; background: var(--d-amber); transition: width 1.2s ease; }
.stock-num[b-3w8odkc5eg]   { font-size: 11px; color: var(--d-text2); width: 40px; text-align: right; }

/* ── PHVA ────────────────────────────────────────────────────────── */
.phva-grid[b-3w8odkc5eg] { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.phva-col[b-3w8odkc5eg]  { background: var(--d-bg3); border-radius: 8px; padding: 12px; }
.phva-head[b-3w8odkc5eg] { font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.phva-count[b-3w8odkc5eg] { font-size: 22px; font-weight: 700; }
.phva-label[b-3w8odkc5eg] { font-size: 10px; color: var(--d-text2); margin-top: 2px; }
.p-p .phva-head[b-3w8odkc5eg], .p-p .phva-count[b-3w8odkc5eg] { color: #3b82f6; }
.p-h .phva-head[b-3w8odkc5eg], .p-h .phva-count[b-3w8odkc5eg] { color: #f59e0b; }
.p-v .phva-head[b-3w8odkc5eg], .p-v .phva-count[b-3w8odkc5eg] { color: #14b8a6; }
.p-a .phva-head[b-3w8odkc5eg], .p-a .phva-count[b-3w8odkc5eg] { color: #22c55e; }

/* ── Alertas ─────────────────────────────────────────────────────── */
.alert-item[b-3w8odkc5eg]  { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--d-border); }
.alert-item:last-of-type[b-3w8odkc5eg] { border-bottom: 0; }
.alert-dot[b-3w8odkc5eg]   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-name[b-3w8odkc5eg]  { font-size: 12px; font-weight: 500; color: var(--d-text); }
.alert-code[b-3w8odkc5eg]  { font-size: 10px; color: var(--d-text2); }
.alert-stock[b-3w8odkc5eg] { font-size: 12px; font-weight: 600; }

/* ── Rings (::deep para alcanzar RingIndicador.razor) ────────────── */
.rings-row[b-3w8odkc5eg]  { display: flex; justify-content: space-around; }
[b-3w8odkc5eg] .ring-wrap  { display: flex; flex-direction: column; align-items: center; gap: 4px; }
[b-3w8odkc5eg] .ring-label { font-size: 11px; color: var(--d-text2); }

/* ── Tabla pedidos ───────────────────────────────────────────────── */
.mini-table[b-3w8odkc5eg] { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--d-text); }
.mini-table th[b-3w8odkc5eg] { color: var(--d-text2); font-weight: 500; text-align: left; padding: 0 0 8px; border-bottom: 1px solid var(--d-border); }
.mini-table td[b-3w8odkc5eg] { padding: 7px 0; border-bottom: 1px solid var(--d-border); }
.mini-table tr:last-child td[b-3w8odkc5eg] { border-bottom: 0; }
.pedido-num[b-3w8odkc5eg]  { color: var(--d-amber); font-weight: 600; }
.cell-muted[b-3w8odkc5eg]  { color: var(--d-text2); }

/* ── Procesos del día ────────────────────────────────────────────── */
.proc-grid[b-3w8odkc5eg]  { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.proc-stat[b-3w8odkc5eg]  { background: var(--d-bg3); border-radius: 8px; padding: 12px 8px; text-align: center; }
.proc-icon[b-3w8odkc5eg]  { font-size: 20px; display: block; margin-bottom: 6px; }
.proc-val[b-3w8odkc5eg]   { font-size: 20px; font-weight: 700; color: var(--d-text); }
.proc-label[b-3w8odkc5eg] { font-size: 10px; color: var(--d-text2); margin-top: 2px; line-height: 1.3; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kpi-grid[b-3w8odkc5eg] { grid-template-columns: repeat(2,1fr); }
    .row3[b-3w8odkc5eg], .row2[b-3w8odkc5eg] { grid-template-columns: 1fr; }
    .phva-grid[b-3w8odkc5eg]   { grid-template-columns: repeat(2,1fr); }
    .proc-grid[b-3w8odkc5eg]   { grid-template-columns: repeat(2,1fr); }
}
/* /Shared/KpiCard.razor.rz.scp.css */
/* Las variables --d-* se heredan en cascada desde .dash-page en Dashboard */

.kpi[b-eec742omoh] {
    background: var(--d-bg2, #161b22);
    border: 1px solid var(--d-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.kpi[b-eec742omoh]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}

.kpi-amber[b-eec742omoh]::before { background: var(--d-amber, #f59e0b); }
.kpi-green[b-eec742omoh]::before { background: var(--d-green, #22c55e); }
.kpi-red[b-eec742omoh]::before   { background: var(--d-red,   #ef4444); }
.kpi-blue[b-eec742omoh]::before  { background: var(--d-blue,  #3b82f6); }

.kpi-icon[b-eec742omoh]  { font-size: 22px; margin-bottom: 10px; }
.kpi-val[b-eec742omoh]   { font-size: 28px; font-weight: 700; line-height: 1; color: var(--d-text, #e6edf3); }
.kpi-label[b-eec742omoh] { font-size: 12px; color: var(--d-text2, #7d8590); margin-top: 4px; }
.kpi-trend[b-eec742omoh] { font-size: 11px; color: var(--d-text2, #7d8590); margin-top: 6px; }
.kpi-bar[b-eec742omoh]   { height: 3px; background: var(--d-bg3, #21262d); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.kpi-fill[b-eec742omoh]  { height: 100%; border-radius: 2px; transition: width 1s ease; }

.kpi-amber .kpi-fill[b-eec742omoh] { background: var(--d-amber, #f59e0b); }
.kpi-green .kpi-fill[b-eec742omoh] { background: var(--d-green, #22c55e); }
.kpi-red   .kpi-fill[b-eec742omoh] { background: var(--d-red,   #ef4444); }
.kpi-blue  .kpi-fill[b-eec742omoh] { background: var(--d-blue,  #3b82f6); }