/* ============================================================================
   MOD-305 · PROVEEDORES — hoja de estilos.  4.3.316
   ----------------------------------------------------------------------------
   Notion × Linear × GitHub, que es el lenguaje de la casa: líneas de 1 px,
   jerarquía por tamaño y color, espacio generoso, sin sombras dramáticas ni
   degradados. Mismo molde que MOD-260 (Empresas / Contactos), que es la lista
   de referencia del sistema.

   TODO el color vive en variables y se remapea UNA vez al final, en el bloque
   de noche. Es la lección que dejó escrita 260: los hex sueltos por el archivo
   no los tocaba el remapeo, y la pantalla se quedaba blanca sobre el shell
   oscuro. Aquí no hay ni un hex fuera de `:root`.

   La primera versión de esta pantalla se pintaba con las clases genéricas
   `ibtn` / `finp` inyectadas desde el JS. Funcionaba y se veía de otro sistema.
   ========================================================================== */
:root{
    --pv-bg:#f7f8fa;
    --pv-surface:#fff;
    --pv-line:#e7e9ed;
    --pv-line-fuerte:#d9dde4;
    --pv-text:#172033;
    --pv-text-2:#4f5b70;
    --pv-muted:#8a94a6;
    --pv-hover:#fafbfd;
    --pv-th:#fafbfc;
    --pv-chip:#f1f3f5;
    --pv-azul:#2563eb;
    --pv-azul-fuerte:#1d4ed8;
    --pv-sobre-azul:#fff;
    --pv-verde:#16865c;
    --pv-verde-linea:#cfeadb;
    --pv-verde-suave:#edf9f3;
    --pv-rojo:#c24145;
    --pv-rojo-linea:#f1d3d5;
    --pv-rojo-suave:#fff1f1;
}

/* ── LA PÁGINA ──────────────────────────────────────────────────────────── */
#page-proveedores.pv-page{
    background:var(--pv-bg);
    color:var(--pv-text);
    font-family:var(--font);
    text-transform:none;
}
#page-proveedores.pv-page *{ box-sizing:border-box; text-transform:none; }
#page-proveedores .pv-wrap{ padding:2px 2px 48px; }

/* Cabecera de la página: el nombre grande y, debajo, qué es esto. */
#page-proveedores .pv-phead{ margin:2px 0 16px; }
#page-proveedores .pv-ptit{ font-size:20px; font-weight:680; letter-spacing:-.01em; line-height:1.2; }
#page-proveedores .pv-psub{ color:var(--pv-muted); font-size:12.5px; margin-top:4px; }

/* ── BARRA DE ACCIONES ──────────────────────────────────────────────────── */
#page-proveedores .pv-bar{
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
#page-proveedores .pv-btn{
    align-items:center;
    background:var(--pv-surface);
    border:1px solid var(--pv-line-fuerte);
    border-radius:8px;
    color:var(--pv-text-2);
    cursor:pointer;
    display:inline-flex;
    font-family:var(--font);
    font-size:12.5px;
    font-weight:600;
    gap:7px;
    height:36px;
    justify-content:center;
    padding:0 13px;
    white-space:nowrap;
}
#page-proveedores .pv-btn:hover{ background:var(--pv-bg); color:var(--pv-text); }
#page-proveedores .pv-btn.primary{
    background:var(--pv-azul);
    border-color:var(--pv-azul);
    color:var(--pv-sobre-azul);
}
#page-proveedores .pv-btn.primary:hover{ background:var(--pv-azul-fuerte); }
#page-proveedores .pv-btn.icon{ padding:0; width:36px; }
#page-proveedores .pv-btn.danger{ border-color:var(--pv-rojo-linea); color:var(--pv-rojo); }
#page-proveedores .pv-btn.danger:hover{ background:var(--pv-rojo-suave); color:var(--pv-rojo); }

/* Buscador: la lupa dentro de la caja, como en Notion. */
#page-proveedores .pv-busca{ flex:1 1 300px; max-width:420px; position:relative; }
#page-proveedores .pv-busca i{
    color:var(--pv-muted);
    font-size:12px;
    left:12px;
    pointer-events:none;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
#page-proveedores .pv-busca input{
    background:var(--pv-surface);
    border:1px solid var(--pv-line-fuerte);
    border-radius:8px;
    color:var(--pv-text);
    font-family:var(--font);
    font-size:13px;
    height:36px;
    padding:0 12px 0 32px;
    width:100%;
}
#page-proveedores .pv-busca input::placeholder{ color:var(--pv-muted); }
#page-proveedores .pv-busca input:focus{ border-color:var(--pv-azul); outline:none; }
#page-proveedores .pv-count{ color:var(--pv-muted); font-size:12px; margin-left:auto; white-space:nowrap; }

/* ── LA TABLA ───────────────────────────────────────────────────────────── */
#page-proveedores .pv-card{
    background:var(--pv-surface);
    border:1px solid var(--pv-line);
    border-radius:10px;
    overflow:hidden;
}
#page-proveedores .pv-tbl{ border-collapse:collapse; font-size:13px; width:100%; }
#page-proveedores .pv-tbl th{
    background:var(--pv-th);
    border-bottom:1px solid var(--pv-line);
    color:var(--pv-muted);
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    padding:0 14px;
    height:38px;
    text-align:left;
    text-transform:uppercase;
}
#page-proveedores .pv-tbl td{
    border-bottom:1px solid var(--pv-line);
    color:var(--pv-text-2);
    height:54px;
    padding:8px 14px;
    vertical-align:middle;
}
#page-proveedores .pv-tbl tbody tr:last-child td{ border-bottom:none; }
#page-proveedores .pv-tbl tbody tr{ cursor:pointer; }
#page-proveedores .pv-tbl tbody tr:hover td{ background:var(--pv-hover); }
#page-proveedores .pv-name{ color:var(--pv-text); font-size:13.5px; font-weight:620; }
#page-proveedores .pv-sub{ color:var(--pv-muted); font-size:11.5px; margin-top:2px; }
#page-proveedores .pv-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
#page-proveedores .pv-tot{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* Etiquetas: borde de 1 px y color medido, nunca rellenos saturados. */
#page-proveedores .pv-chip{
    background:var(--pv-surface);
    border:1px solid var(--pv-line-fuerte);
    border-radius:20px;
    color:var(--pv-text-2);
    display:inline-block;
    font-size:11px;
    font-weight:600;
    padding:2px 9px;
    white-space:nowrap;
}
#page-proveedores .pv-chip.on{ background:var(--pv-verde-suave); border-color:var(--pv-verde-linea); color:var(--pv-verde); }
#page-proveedores .pv-chip.off{ color:var(--pv-muted); }

/* Vacío: se explica, no se deja la pantalla en blanco. */
#page-proveedores .pv-empty{
    color:var(--pv-muted);
    font-size:13px;
    padding:56px 16px;
    text-align:center;
}
#page-proveedores .pv-empty i{ display:block; font-size:26px; margin-bottom:12px; opacity:.5; }
#page-proveedores .pv-empty b{ color:var(--pv-text-2); display:block; font-size:14px; font-weight:620; margin-bottom:5px; }

/* ── DETALLE ────────────────────────────────────────────────────────────── */
#page-proveedores .pv-head{
    align-items:flex-start;
    border-bottom:1px solid var(--pv-line);
    display:flex;
    gap:12px;
    margin-bottom:2px;
    padding:2px 0 16px;
}
#page-proveedores .pv-h-t{ font-size:20px; font-weight:680; letter-spacing:-.01em; line-height:1.25; }
#page-proveedores .pv-h-s{ color:var(--pv-muted); font-size:12.5px; margin-top:4px; }
#page-proveedores .pv-h-acts{ display:flex; flex-wrap:wrap; gap:7px; margin-left:auto; }

#page-proveedores .pv-tabs{
    border-bottom:1px solid var(--pv-line);
    display:flex;
    gap:2px;
    margin-bottom:18px;
    overflow-x:auto;
}
#page-proveedores .pv-tab{
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--pv-muted);
    cursor:pointer;
    font-family:var(--font);
    font-size:12.5px;
    font-weight:600;
    padding:10px 13px;
    white-space:nowrap;
}
#page-proveedores .pv-tab:hover{ color:var(--pv-text); }
#page-proveedores .pv-tab.on{ border-bottom-color:var(--pv-azul); color:var(--pv-text); }
#page-proveedores .pv-tab .pv-n{
    background:var(--pv-chip);
    border-radius:10px;
    color:var(--pv-muted);
    font-size:10.5px;
    margin-left:6px;
    padding:1px 6px;
}

#page-proveedores .pv-grid{ display:grid; gap:0 32px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
#page-proveedores .pv-row{ border-bottom:1px solid var(--pv-line); display:flex; font-size:13px; gap:14px; padding:10px 0; }
#page-proveedores .pv-row .k{ color:var(--pv-muted); flex:0 0 150px; font-size:11.5px; letter-spacing:.02em; padding-top:1px; }
#page-proveedores .pv-row .v{ color:var(--pv-text); flex:1; word-break:break-word; }
#page-proveedores .pv-row a{ color:var(--pv-azul); cursor:pointer; text-decoration:none; }
#page-proveedores .pv-row a:hover{ text-decoration:underline; }
#page-proveedores .pv-sec{
    color:var(--pv-muted);
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    margin:26px 0 8px;
    text-transform:uppercase;
}
#page-proveedores .pv-sec:first-child{ margin-top:4px; }

#page-proveedores .pv-file{
    align-items:center;
    background:var(--pv-surface);
    border:1px solid var(--pv-line);
    border-radius:9px;
    display:flex;
    font-size:13px;
    gap:12px;
    margin-bottom:8px;
    padding:12px 14px;
}
#page-proveedores .pv-file .nm{ color:var(--pv-text); flex:1; font-weight:560; word-break:break-all; }
#page-proveedores .pv-file .mt{ color:var(--pv-muted); font-size:11.5px; font-weight:400; margin-top:2px; }
#page-proveedores .pv-file a.pv-btn{ text-decoration:none; }
#page-proveedores .pv-nota{ color:var(--pv-muted); font-size:11.5px; margin-top:6px; }

/* ── NOCHE ──────────────────────────────────────────────────────────────── */
/* Sólo se remapean las variables. Si algún día alguien mete un hex a pelo
   arriba, este bloque no lo va a alcanzar y la pantalla se quedará blanca
   sobre el shell oscuro. Ya pasó en MOD-260. */
html[data-mode="noche"] #page-proveedores.pv-page{
    --pv-bg:transparent;
    --pv-surface:var(--bg2);
    --pv-line:var(--border);
    --pv-line-fuerte:var(--border);
    --pv-text:var(--txt);
    --pv-text-2:var(--txt);
    --pv-muted:var(--dim);
    --pv-hover:var(--bg3);
    --pv-th:var(--bg3);
    --pv-chip:var(--bg3);
    --pv-sobre-azul:#fff;
}