/* Puente de proveedores (proveedores.proher.app) con la línea de proher.app. Fuente: plataforma-phn/tema/puentes/proveedores.css.
   Se carga DESPUÉS de style.css: sus variables pasan a leer los tokens --phn-* del tema elegido en Personalizar.
   Aquí --verde es el verde de RELLENO y --verde-texto el de texto. */
:root:root {
  --fondo: var(--phn-bg);
  --campo: var(--phn-surface-2);
  --blanco: var(--phn-surface);
  --lateral: var(--phn-surface-nav);
  --tinta: var(--phn-text);
  --oscuro: var(--phn-text);
  --tinta-3: var(--phn-text-2);
  --linea: var(--phn-border);
  --verde: var(--phn-accent);
  --sobre-verde: var(--phn-on-accent);
  --verde-texto: var(--phn-accent-text);
  --verde-tinte: var(--phn-accent-soft);
  --rojo: var(--phn-danger-fg);
  --rojo-tinte: var(--phn-danger-bg);
  --ambar: var(--phn-warn-fg);
  --ambar-tinte: var(--phn-warn-bg);
  --radio: var(--phn-radius-card);
  --radio-lg: var(--phn-radius-card);
  --radio-sm: var(--phn-radius-field);
  --sombra: var(--phn-shadow-card);
  --fuente: var(--phn-font);
}
.btn { border-radius: calc(var(--phn-radius-card) - 6px); }
.btn--primario { min-height: 50px; }
.pestana.is-activa { color: var(--phn-accent-soft-text); }

/* ── Espacio (2026-11-04): menos aire, más filas a la vista; escala con Densidad de Personalizar ── */
.main { padding: calc(24px * var(--phn-space,1)); }
.lateral { flex-basis: 264px; gap: calc(20px * var(--phn-space,1)); padding: calc(20px * var(--phn-space,1)) calc(14px * var(--phn-space,1)); }
.vista__head { margin-bottom: calc(14px * var(--phn-space,1)); }
.vista__titulo { font-size: 30px; }
.tabla-caja { padding: calc(4px * var(--phn-space,1)) calc(18px * var(--phn-space,1)) calc(8px * var(--phn-space,1)); }
.tabla th { padding: calc(10px * var(--phn-space,1)) calc(10px * var(--phn-space,1)); }
.tabla td { padding: calc(9px * var(--phn-space,1)) calc(10px * var(--phn-space,1)); }
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla__vacia td { padding: calc(24px * var(--phn-space,1)); }
.filtros { margin-bottom: calc(14px * var(--phn-space,1)); padding: calc(12px * var(--phn-space,1)) calc(16px * var(--phn-space,1)); gap: calc(10px * var(--phn-space,1)); }
.empresa { margin-bottom: calc(24px * var(--phn-space,1)); }
.informe { padding: calc(18px * var(--phn-space,1)); }
.cotizacion__form { padding: calc(18px * var(--phn-space,1)) calc(18px * var(--phn-space,1)) calc(4px * var(--phn-space,1)); }
.visor__caja { padding: calc(20px * var(--phn-space,1)); }
.login { padding: calc(22px * var(--phn-space,1)); }
@media (max-width: 720px) {
  .main { padding: calc(16px * var(--phn-space,1)) calc(16px * var(--phn-space,1)) calc(76px + env(safe-area-inset-bottom, 0px)); }
  .vista__titulo { font-size: 26px; }
  .vista__head { margin-bottom: calc(12px * var(--phn-space,1)); }
  .tabla-caja { padding: calc(4px * var(--phn-space,1)) calc(14px * var(--phn-space,1)) calc(8px * var(--phn-space,1)); }
  .tarjeta__toque { min-height: 64px; padding: calc(12px * var(--phn-space,1)); }
  .tarjeta + .tarjeta { margin-top: calc(8px * var(--phn-space,1)); }
}
@media (min-width: 1024px) {
  .main { max-width: 1180px; padding: calc(28px * var(--phn-space,1)) calc(32px * var(--phn-space,1)) calc(40px * var(--phn-space,1)); }
  .chips { max-height: 320px; }
}
@media (min-width: 1500px) { .main { max-width: 1320px; } }

/* ══ Modo oscuro (2026-11-04): estilos Oscuro y Grafito ══ */
:root:root[data-modo="oscuro"] {
  color-scheme: dark;
  --verde-fuerte: color-mix(in srgb, var(--phn-accent) 85%, #000);
  --verde-suave: var(--phn-accent-soft);
  --tinta-2: color-mix(in srgb, var(--phn-text) 55%, var(--phn-text-2));
  --linea-2: var(--phn-border-strong);
  --sombra-alta: 0 0 0 1px var(--phn-border), 0 12px 32px rgba(0,0,0,.5);
}
/* Hovers y separadores grises claros */
[data-modo="oscuro"] .login--llave #btn-login:hover:not(:disabled) { background: var(--phn-border); }
[data-modo="oscuro"] .btn--corto:hover:not(.btn--primario):not(:disabled) { background: var(--phn-border); }
[data-modo="oscuro"] .chip:hover { background: var(--phn-border); }
[data-modo="oscuro"] .pestana:hover { background: var(--phn-neutral-bg); }
[data-modo="oscuro"] .tabla td { border-bottom-color: var(--phn-border); }
[data-modo="oscuro"] .tabla tbody tr:hover { background: var(--phn-surface-2); }
[data-modo="oscuro"] .tarjeta__toque:active { background: var(--phn-surface-2); }
[data-modo="oscuro"] .ficha__dato { border-top-color: var(--phn-border); }
[data-modo="oscuro"] .logo-campo { border-bottom-color: var(--phn-border); }
/* Marcas, velos y avisos */
[data-modo="oscuro"] .marca--salida { background: var(--phn-neutral-bg); }
[data-modo="oscuro"] .marca--baja { background: var(--phn-neutral-bg); }
[data-modo="oscuro"] .visor { background: rgba(0,0,0,.6); }
[data-modo="oscuro"] .toast.is-error { background: var(--phn-danger-solid); color: var(--phn-on-danger); }
/* Flecha de los desplegables en claro */
[data-modo="oscuro"] .campo__input--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A7B3AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
  [data-modo="oscuro"] .pestanas { background: color-mix(in srgb, var(--phn-surface-nav) 96%, transparent); }
}
/* Avatares de iniciales: app.js los pinta en tonos claros en línea */
[data-modo="oscuro"] .avatar--letras { background: var(--phn-neutral-bg) !important; color: var(--phn-neutral-fg) !important; }
/* Logos de proveedores: traen su propio fondo claro; se enmarcan para que no se vean como un hueco */
[data-modo="oscuro"] .logo-campo img, [data-modo="oscuro"] .avatar img { border-radius: 8px; }

/* ══ Unificación con el portal (2026-11-04): círculo de perfil, menú lateral y logo ══ */
.lateral__sesion { display: flex; align-items: center; gap: 10px; }
.pestana { min-height: 48px; border-radius: 14px; color: var(--phn-text); }
.pestana .icono { width: 22px; height: 22px; stroke-width: 2; color: var(--phn-text-2); }
.pestana:hover { background: var(--phn-neutral-bg); }
.pestana.is-activa { font-weight: 700; }
.pestana.is-activa .icono { color: var(--phn-accent-text); }
.lateral__marca { padding: 0 8px 18px; }
.lateral__logo { max-width: 150px; }
.lateral { padding: 24px 14px; }
.btn--corto:hover:not(.btn--primario):not(:disabled) { background: var(--phn-border); }
.vista__titulo { font-size: 2rem; }
@media (max-width: 720px) { .vista__titulo { font-size: 26px; } }