/* ==========================================================================
   PROVEEDORES Y ALIADOS
   Todo el color sale de las variables del tema (--txt, --panel, --border…).
   No hay ni un color fijo, así el modo claro y el oscuro salen solos y
   cualquier ajuste futuro de la paleta se aplica también aquí.
   ========================================================================== */

.pv-shell { display: grid; gap: 16px; min-width: 0; }
.pv-head { flex-wrap: wrap; gap: 10px; }
.pv-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pv-toolbar select, .pv-toolbar input { width: auto; }
/* Sin esto los botones tomaban el fondo por defecto del navegador (casi
   blanco) y en modo oscuro el texto claro quedaba invisible encima. */
.pv-toolbar button, .pv-items-head button {
  background: var(--panel2); color: var(--txt); border: 1px solid var(--border);
}
.pv-toolbar button:hover, .pv-items-head button:hover {
  background: var(--border); border-color: var(--title-color);
}
.pv-grow { flex: 1 1 220px; min-width: 0; }
.pv-nota { margin-bottom: 10px; padding: 8px 11px; border-left: 3px solid var(--cy);
  border-radius: 8px; background: color-mix(in srgb, var(--cy) 7%, var(--panel2)); }
.pv-vacio { padding: 18px; text-align: center; color: var(--mut); font-size: 12.5px; }

/* ---------- Panel de arriba */
.pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 4px; }
.pv-kpis-mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 10px; }
.pv-kpi { padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel2); min-width: 0; }
.pv-kpi span { display: block; color: var(--mut); font-size: 9.5px; text-transform: uppercase; letter-spacing: .35px; }
.pv-kpi b { font-size: 16px; word-break: break-word; }
.pv-kpi.is-money b { color: var(--ok); }

.pv-top { margin-top: 14px; }
.pv-top h4 { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 7px; }
.pv-bar { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 10px; align-items: center;
  padding: 5px 0; font-size: 12px; }
.pv-bar-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bar-riel { height: 8px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); overflow: hidden; }
.pv-bar-riel i { display: block; height: 100%; background: var(--cy); }
.pv-bar-val { color: var(--mut); font-size: 11px; white-space: nowrap; }
.pv-categorias { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-categorias > div { display: flex; flex-wrap: wrap; gap: 7px; }
.pv-categorias span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel2); color: var(--mut); font-size: 10.5px; }
.pv-categorias b { color: var(--txt); }

/* ---------- Fichas de proveedor y de aliado */
.pv-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 11px; }
.pv-card { padding: 12px 13px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--table-body); display: grid; gap: 8px; min-width: 0; }
.pv-card.is-off { opacity: .6; }
.pv-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.pv-card-tit { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-card-tit b { font-size: 14px; word-break: break-word; }
.pv-card-tit small { color: var(--mut); font-size: 10.5px; }
.pv-tipo { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--cy) 16%, transparent); color: var(--cy); text-transform: uppercase; }
.pv-tipo.is-vend { background: color-mix(in srgb, var(--mg) 16%, transparent); color: var(--mg); }
.pv-off { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--panel2); color: var(--mut); text-transform: uppercase; }
.pv-card-acc { display: flex; gap: 5px; flex-wrap: wrap; }
.pv-card-acc .btn-mini { padding: 4px 9px; font-size: 11px; }
.pv-del { color: #e11d48 !important; border-color: color-mix(in srgb, #e11d48 40%, var(--border)) !important; }
.pv-del:hover { color: #fb7185 !important; border-color: #fb7185 !important; }

/* Los datos de contacto usan el color de texto normal para leerse en ambos
   temas; en cian sobre fondo claro se pierden. */
.pv-card-datos { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; }
.pv-card-datos a, .pv-card-datos span { color: var(--txt); text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-card-datos a:hover { text-decoration: underline; }
.pv-card-notas { font-size: 11.5px; color: var(--mut); padding: 7px 9px;
  border: 1px dashed var(--border); border-radius: 9px; word-break: break-word; }
.pv-card-res { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--mut);
  padding-top: 7px; border-top: 1px solid var(--border); }
.pv-card-res b { color: var(--txt); }

/* ---------- Ficha e histórico documental del proveedor */
.pv-ficha-modal { width: min(920px, 96vw); }
.pv-ficha-cuerpo { display: grid; gap: 12px; min-height: 120px; }
.pv-ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.pv-ficha-datos > div { padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); min-width: 0; }
.pv-ficha-datos small { display: block; color: var(--mut); font-size: 9px; text-transform: uppercase; letter-spacing: .35px; }
.pv-ficha-datos b { display: block; margin-top: 3px; color: var(--txt); font-size: 12px; overflow-wrap: anywhere; }
.pv-ficha-resumen { display: flex; flex-wrap: wrap; gap: 7px; }
.pv-ficha-resumen span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel2); color: var(--mut); font-size: 10.5px; }
.pv-ficha-historial { display: grid; gap: 8px; }
.pv-ficha-historial h4 { color: var(--txt); font-size: 12px; margin: 2px 0; }
.pv-factura-card { padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--table-body); display: grid; gap: 7px; }
.pv-factura-card.is-credito { border-left: 4px solid var(--ok); }
.pv-factura-top, .pv-factura-pie { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: wrap; }
.pv-factura-top > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pv-factura-top b { font-size: 12px; color: var(--txt); }
.pv-factura-top small, .pv-factura-pie { color: var(--mut); font-size: 10.5px; }
.pv-factura-top strong { color: var(--txt); font-size: 14px; }
.pv-doc-tipo, .pv-doc-linea { color: var(--cy); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.pv-doc-linea { display: block; margin-top: 3px; }
.pv-factura-card p { margin: 0; color: var(--txt); font-size: 11px; overflow-wrap: anywhere; }
.pv-factura-card .pv-factura-nota { color: var(--mut); }
.pv-factura-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-factura-botones a { color: var(--txt); text-decoration: none; }
.pv-factura-pie i { color: var(--mut); font-style: normal; }
.pv-factura-actual { margin-top: 6px; min-height: 34px; padding: 7px 9px; border: 1px dashed var(--border); border-radius: 9px; color: var(--mut); font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.pv-pdf-modal { width: min(1060px, 97vw); height: min(88vh, 920px); display: flex; flex-direction: column; overflow: hidden; }
.pv-pdf-head-actions { display: flex; align-items: center; gap: 7px; }
.pv-pdf-download { padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel2); color: var(--txt); text-decoration: none; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pv-pdf-frame { width: 100%; flex: 1 1 auto; min-height: 420px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); }

/* ---------- Tabla de compras */
.pv-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pv-table th { text-align: left; padding: 7px 8px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .35px; color: var(--mut); background: var(--table-head); border-bottom: 1px solid var(--border); }
.pv-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pv-table tr:last-child td { border-bottom: 0; }
.pv-num { text-align: right; white-space: nowrap; }
.pv-sub { display: block; color: var(--mut); font-size: 10px; margin-top: 2px; }
.pv-items-res { display: block; color: var(--txt); word-break: break-word; }
.pv-exento { font-style: normal; color: var(--mut); font-size: 10.5px; }
.pv-acc { white-space: nowrap; }
.pv-acc .btn-mini { padding: 3px 8px; font-size: 11px; }

/* ---------- Cuadros */
.pv-modal { width: 620px; max-width: 94vw; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-span2 { grid-column: 1 / -1; }
.pv-link-row { display: flex; gap: 8px; align-items: stretch; }
.pv-link-row input { flex: 1; min-width: 0; }
.pv-link-btn { flex: none; white-space: nowrap; padding: 9px 13px; font-size: 12.5px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; color: var(--txt); }
.pv-link-btn:hover:not(:disabled) { border-color: var(--title-color); }
.pv-link-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Renglones de la compra */
.pv-items { margin-top: 12px; padding: 11px 12px; border: 1px dashed var(--border);
  border-radius: 12px; background: var(--panel2); }
.pv-items-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-items-head b { font-size: 12px; color: var(--txt); }
.pv-item { display: grid; grid-template-columns: minmax(0, 1fr) 74px 118px 34px; gap: 6px;
  margin-top: 7px; align-items: center; }
.pv-item input { width: 100%; min-width: 0; }
.pv-item-pre { text-align: right; }
.pv-item-del { padding: 7px; font-size: 12px; background: transparent; border: 1px solid var(--border);
  border-radius: 9px; color: var(--mut); }
.pv-item-del:hover { color: #fb7185; border-color: #fb7185; transform: none; box-shadow: none; }

.pv-totales { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.pv-iva { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); }
.pv-iva input[type=number] { width: 68px; }
.pv-iva input[type=checkbox] { width: auto; }
.pv-tot-lineas { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mut); }
.pv-tot-lineas b { color: var(--txt); margin-left: 4px; }
.pv-tot-final b { color: var(--ok); font-size: 15px; }

/* ---------- Celular */
@media (max-width: 760px) {
  .pv-lista { grid-template-columns: 1fr; }
  .pv-toolbar { width: 100%; }
  .pv-toolbar select, .pv-toolbar input, .pv-toolbar button { width: 100%; }
  .pv-grow { flex: 1 1 100%; }
  .pv-grid { grid-template-columns: 1fr; }
  .pv-span2 { grid-column: auto; }
  .pv-link-row { flex-wrap: wrap; }
  .pv-link-btn { width: 100%; }
  .pv-bar { grid-template-columns: 1fr; gap: 3px; }
  .pv-bar-val { white-space: normal; }
  /* Los renglones de la compra pasan a dos filas: el título arriba y
     cantidad, precio y papelera abajo. Con cuatro columnas no caben. */
  .pv-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .pv-item-tit { grid-column: 1 / -1; }
  .pv-totales { flex-direction: column; align-items: stretch; }
  .pv-tot-lineas { justify-content: space-between; }
  /* La tabla de compras se convierte en tarjetas: en celular una tabla de
     siete columnas obliga a desplazarse de lado para leer una sola fila. */
  .pv-table thead { display: none; }
  .pv-table, .pv-table tbody, .pv-table tr, .pv-table td { display: block; width: 100%; }
  .pv-table tr { margin-bottom: 9px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--table-body); padding: 4px 2px; }
  .pv-table td { border-bottom: 1px solid var(--border); display: flex; justify-content: space-between;
    gap: 12px; text-align: right; }
  .pv-table td:last-child { border-bottom: 0; }
  .pv-table td::before { content: attr(data-t); color: var(--mut); font-size: 10px;
    text-transform: uppercase; letter-spacing: .3px; text-align: left; flex: none; }
  .pv-table td:not([data-t])::before { content: ''; }
  .pv-items-res, .pv-sub { text-align: right; }
  .pv-acc { justify-content: flex-end; }
  .pv-ficha-datos { grid-template-columns: 1fr; }
  .pv-factura-top, .pv-factura-pie { align-items: flex-start; }
  .pv-factura-botones { width: 100%; }
  .pv-factura-botones .btn-mini { flex: 1 1 auto; text-align: center; }
  .pv-pdf-modal { width: 96vw; height: 88vh; }
  .pv-pdf-modal .lead-modal-head { align-items: flex-start; }
  .pv-pdf-head-actions { flex-direction: column-reverse; align-items: flex-end; }
  .pv-pdf-download { font-size: 9.5px; padding: 6px 8px; }
  .pv-pdf-frame { min-height: 56vh; }
}