/* =====================================================================
   PICKANTES · tienda · empresas (vistas/empresa.js)
   Cotizaciones, Mi empresa y el botón del carrito para cuentas empresa.
   Usa las variables de :root de styles.css.
   ===================================================================== */

.cta-cotizar { display: block; width: 100%; height: 44px; margin-top: 8px; background: #fff; color: var(--tinta);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font-size: 14.5px; font-weight: 700; cursor: pointer; }
.cta-cotizar:hover { border-color: var(--tinta); }
.cta-cotizar:disabled { color: var(--gris); cursor: wait; }

.cot-nueva { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cot-nueva input, .cot-nueva select { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); background: #fff; font: inherit; font-size: 14px; }
.cot-nueva select { flex: 0 1 160px; }
.cot-nueva .agregar { width: auto; height: 44px; padding: 0 20px; flex: 0 0 auto; }

/* Que una tabla ancha se desplace adentro de su caja y no estire toda la página en el celular. */
.cuenta > * { min-width: 0; }

.cot-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.cot-filtros a { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--linea); background: #fff; font-size: 13px; color: var(--tinta-70); }
.cot-filtros a[aria-current="true"] { background: var(--naranja-claro); border-color: var(--naranja); color: var(--naranja-osc); font-weight: 700; }
.cot-filtros .check { margin-left: auto; }
.cot-fila { grid-template-columns: minmax(0, 1fr) auto; }

.cot-tabla { overflow-x: auto; margin: 0 -4px; }
.cot-tabla table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cot-tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris);
  padding: 8px 6px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.cot-tabla td { padding: 9px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.cot-tabla td small { display: block; color: var(--gris); font-size: 12px; margin-top: 2px; }
.cot-tabla .num { text-align: right; white-space: nowrap; }
.cot-tabla__falta td { background: #fff7ed; }
.cot-tabla__inactivo td { color: var(--gris); }
.cot-tabla select { height: 32px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; font: inherit; font-size: 13px; }

.cot-cant { display: inline-flex; align-items: center; gap: 4px; }
.cot-cant button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: #fff; cursor: pointer; }
.cot-cant input { width: 46px; height: 28px; text-align: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font: inherit; }

.cot-totales { margin: 14px 0 0 auto; max-width: 360px; font-size: 14px; }
.cot-totales div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.cot-totales__desc { color: var(--naranja-osc); font-weight: 600; }
.cot-totales__total { font-size: 19px; font-weight: 800; border-top: 1px solid var(--linea-fuerte); margin-top: 6px; padding-top: 10px !important; }
.cot-entrega { margin-top: 14px; padding: 10px 14px; background: var(--naranja-claro); border-radius: var(--radio); font-size: 14px; }

.cot-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cot-acciones .agregar { width: auto; padding: 0 18px; }

.cot-buscar { position: relative; }
.cot-buscar input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); font: inherit; }
.cot-buscar__lista { position: absolute; z-index: 5; left: 0; right: 0; top: 48px; background: #fff; border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); max-height: 340px; overflow: auto; }
.cot-buscar__lista button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid var(--linea); text-align: left; cursor: pointer; font: inherit; }
.cot-buscar__lista button:hover { background: var(--papel); }
.cot-buscar__lista img { width: 40px; height: 32px; object-fit: cover; border-radius: 4px; }
.cot-buscar__lista small { display: block; color: var(--gris); font-size: 12px; }
.cot-buscar__lista b { color: var(--naranja-osc); font-size: 13px; }

.cot-sub { font-size: 15px; margin: 18px 0 8px; }
.cot-invitacion { font-size: 13.5px; padding: 4px 0; }
.cot-enlace { display: block; width: 100%; margin: 8px 0 4px; height: 36px; padding: 0 10px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio); font: inherit; font-size: 12.5px; background: #fff; }

@media (max-width: 640px) {
  .cot-filtros .check { margin-left: 0; width: 100%; }
  .cot-fila { grid-template-columns: 1fr; }
  .cot-totales { max-width: none; }
}

/* Campo de entrega que no corresponde a la opción elegida: se ve, pero gris y sin poder tocarlo. */
.campo--apagado { opacity: .45; }
.campo--apagado input, .campo--apagado select { cursor: not-allowed; background: var(--papel); }

/* Mi empresa: cabecera con el logo y datos sólo de lectura para quien no es administrador. */
.emp-cab { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.emp-cab__texto { min-width: 0; flex: 1; }
.emp-cab__texto h2 { margin-bottom: 4px; }
.emp-cab__acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.emp-cab__ayuda { font-size: 12.5px; color: var(--gris); margin: 8px 0 0; }
.emp-logo__caja { width: 200px; height: 88px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 10px; flex: 0 0 auto; }
.emp-logo__caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emp-logo__caja span { color: var(--gris); font-size: 13px; }
.emp-logo__subir { display: inline-flex; align-items: center; width: auto; height: 40px; padding: 0 18px; cursor: pointer; }
@media (max-width: 640px) { .emp-cab { flex-direction: column; } .emp-logo__caja { width: 100%; max-width: 260px; } }
.campos--lectura input:disabled, .campos--lectura select:disabled { background: var(--papel); color: var(--tinta-70); border-color: var(--linea);
  cursor: default; opacity: 1; -webkit-text-fill-color: var(--tinta-70); }
.campos--lectura label { color: var(--gris); }

/* Logo de la empresa en la cabecera (en lugar del muñequito) y en el menú de Mi cuenta. */
.cabecera__logo-empresa { height: 26px; max-width: 72px; object-fit: contain; border-radius: 4px; }
.cuenta__quien--empresa img { max-width: 150px; max-height: 44px; object-fit: contain; margin-bottom: 6px; }
.cuenta__quien--empresa em { font-style: normal; font-size: 13px; color: var(--tinta-70); margin-top: 2px; }

/* Mis compras › pagar una OC aceptada y comprobantes de transferencia (vistas/pago-compra.js). */
.pago-oc__medios { display: grid; gap: 8px; margin: 10px 0; }
.pago-comprobantes { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 4px; }
.pago-comprobantes li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pago-comprobantes__subir { display: inline-flex; align-items: center; width: auto; padding: 0 18px; margin-top: 10px; cursor: pointer; }
#pagar-oc .campos { grid-template-columns: 1fr; }
#pagar-oc select, #pagar-oc input:not([type=radio]) { width: 100%; max-width: 100%; box-sizing: border-box; }

/* =====================================================================
   PickPro (vistas/pickpro.js): con una cuenta de empresa, o en las pantallas
   de PickPro, el sitio va con fondo oscuro. Si además hay un tema de rubro
   (moda, repuestos) manda el del rubro.
   Muchas reglas de styles.css usan #fff fijo: acá van sus versiones oscuras.
   ===================================================================== */
body[data-pickpro]:not([data-tema]) {
  color-scheme: dark;
  --pp-rojo: #e41e26;
  --pp-marino: #0f2952;
  --naranja: #ef3340;
  --naranja-osc: #ff6b74;
  --naranja-claro: rgba(239, 51, 64, .16);
  --pizarra: #9fb0c8;
  --pizarra-osc: #c7d3e3;
  --tinta: #e8ecf4;
  --tinta-70: #b4bdcc;
  --gris: #8f9ab0;
  --papel: #0b1220;
  --tarjeta: #121b2e;
  --linea: #22304a;
  --linea-fuerte: #34445f;
  --ok: #4ade80;
  --ok-claro: rgba(74, 222, 128, .14);
  --alerta: #fbbf24;
  --pp-elevado: #18233a;
}
body[data-pickpro]:not([data-tema]) .cabecera { background: #0d1628; }
body[data-pickpro]:not([data-tema]) .rubros { background: #0d1628; }
body[data-pickpro]:not([data-tema]) .pie { background: #070c17; border-top: 1px solid var(--linea); }
body[data-pickpro]:not([data-tema]) .aviso, body[data-pickpro]:not([data-tema]) .saltar { background: var(--pp-elevado); color: var(--tinta); border: 1px solid var(--linea-fuerte); }

body[data-pickpro]:not([data-tema]) .agregar { background: var(--pp-elevado); color: var(--tinta); border: 1px solid var(--linea-fuerte); }
body[data-pickpro]:not([data-tema]) .agregar:hover { background: var(--naranja); border-color: var(--naranja); color: #fff; }
body[data-pickpro]:not([data-tema]) .agregar--naranja { background: var(--naranja); border-color: var(--naranja); color: #fff; }
body[data-pickpro]:not([data-tema]) .agregar--naranja:hover { background: #c8161e; border-color: #c8161e; }
body[data-pickpro]:not([data-tema]) .agregar--claro,
body[data-pickpro]:not([data-tema]) .agregar--claro:hover { background: transparent; color: var(--tinta); border-color: var(--linea-fuerte); }
body[data-pickpro]:not([data-tema]) .agregar--claro:hover { border-color: var(--tinta-70); }
body[data-pickpro]:not([data-tema]) .agregar--peligro { background: transparent; color: #fca5a5; border-color: #7f1d1d; }
body[data-pickpro]:not([data-tema]) .agregar:disabled { background: var(--tarjeta); color: var(--gris); border-color: var(--linea); }
body[data-pickpro]:not([data-tema]) .paginador button[aria-current="true"],
body[data-pickpro]:not([data-tema]) .talle-opcion[aria-pressed="true"],
body[data-pickpro]:not([data-tema]) .publico-barra__opcion[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); color: #fff; }
body[data-pickpro]:not([data-tema]) .publico-barra__opcion { background: var(--tarjeta); }
body[data-pickpro]:not([data-tema]) .cta-checkout { color: #fff; }

body[data-pickpro]:not([data-tema]) .buscador input:focus,
body[data-pickpro]:not([data-tema]) .campo input:focus,
body[data-pickpro]:not([data-tema]) .campo select:focus,
body[data-pickpro]:not([data-tema]) .campo textarea:focus { background: var(--pp-elevado); }
body[data-pickpro]:not([data-tema]) .campo input, body[data-pickpro]:not([data-tema]) .campo select,
body[data-pickpro]:not([data-tema]) .campo textarea, body[data-pickpro]:not([data-tema]) .buscador input { color: var(--tinta); }
body[data-pickpro]:not([data-tema]) .esqueleto { background: linear-gradient(90deg, #141e33 25%, #1c2840 50%, #141e33 75%); background-size: 200% 100%; }
body[data-pickpro]:not([data-tema]) .tarjeta__rapida { background: rgba(18, 27, 46, .95); }
body[data-pickpro]:not([data-tema]) .tarjeta__imagen { background: #fff; }
body[data-pickpro]:not([data-tema]) .pastilla--sin { background: var(--pp-elevado); }
body[data-pickpro]:not([data-tema]) .pastilla--local { background: rgba(159, 176, 200, .14); }
body[data-pickpro]:not([data-tema]) .sug-item img { background: #fff; }
body[data-pickpro]:not([data-tema]) .zoom { background: var(--papel); }
body[data-pickpro]:not([data-tema]) .hero__flecha:hover { background: var(--tarjeta); }

/* Contraste en modo PickPro: lo que en la tienda tiene fondo blanco o crema fijo pasa a un azul
   oscuro del tema, así el texto claro se lee (Mis compras, Cotizaciones, avisos). */
body[data-pickpro]:not([data-tema]) .compra__cab { background: var(--pp-elevado); }
body[data-pickpro]:not([data-tema]) .caja-prueba { background: rgba(251, 191, 36, .1); border-color: #a16207; color: var(--tinta); }
body[data-pickpro]:not([data-tema]) .agregar--peligro:hover { background: rgba(127, 29, 29, .35); color: #fecaca; }
body[data-pickpro]:not([data-tema]) .carrito-btn__contador { color: #c8161e; }
body[data-pickpro]:not([data-tema]) .barra { background: var(--linea-fuerte); }
body[data-pickpro]:not([data-tema]) .linea-tiempo b { background: var(--tarjeta); }
body[data-pickpro]:not([data-tema]) .linea-tiempo li[data-hecho="true"] b { background: var(--naranja); }
/* Pastillas de estado: color sólido oscurecido y letras claras, en vez de color sobre fondo transparente. */
body[data-pickpro]:not([data-tema]) .pastilla--estado { background: color-mix(in srgb, var(--c) 70%, #0b1220); color: #fff; }

/* Cotizaciones y Mi empresa (las reglas de arriba de este archivo con #fff). */
body[data-pickpro]:not([data-tema]) .cot-filtros a,
body[data-pickpro]:not([data-tema]) .cot-tabla select,
body[data-pickpro]:not([data-tema]) .cot-cant button,
body[data-pickpro]:not([data-tema]) .cot-buscar__lista { background: var(--tarjeta); color: var(--tinta); }
body[data-pickpro]:not([data-tema]) .cot-nueva input, body[data-pickpro]:not([data-tema]) .cot-nueva select,
body[data-pickpro]:not([data-tema]) .cot-buscar input, body[data-pickpro]:not([data-tema]) .cot-cant input,
body[data-pickpro]:not([data-tema]) .cot-enlace { background: var(--papel); color: var(--tinta); }
body[data-pickpro]:not([data-tema]) .cot-tabla__falta td { background: rgba(251, 191, 36, .08); }
body[data-pickpro]:not([data-tema]) .emp-logo__caja { background: #fff; }
body[data-pickpro]:not([data-tema]) .cabecera__logo-empresa { background: #fff; padding: 2px; }

/* Cabecera en modo PickPro: el logo en blanco con el nombre al lado. */
.marca__pickpro { display: grid; line-height: 1; color: var(--tinta); }
.marca__pickpro b { font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.marca__pickpro small { font-size: 11px; color: var(--gris); letter-spacing: .02em; margin-top: 3px; }
@media (max-width: 640px) { .marca__pickpro small { display: none; } .marca__pickpro b { font-size: 18px; } }
.rubro-link--pickpro { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; margin-left: auto; }
.rubro-link--pickpro img { width: 16px; height: 16px; }

/* ---------------------------------------------------------- landing */
.pp { margin-bottom: -50px; }
.pp-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(228, 30, 38, .22), transparent 60%),
  linear-gradient(180deg, #0f2952 0%, #0b1220 100%); color: #e8ecf4; padding: 56px 0 64px; }
.pp-hero__fila { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.pp-hero__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pp-hero__marca span { display: grid; line-height: 1; }
.pp-hero__marca b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.pp-hero__marca small { font-size: 12.5px; color: #9fb0c8; margin-top: 4px; }
.pp-hero h1 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -.035em; max-width: 18ch; }
.pp-hero__bajada { margin-top: 16px; font-size: 17px; line-height: 1.55; color: #c7d3e3; max-width: 56ch; }
.pp-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pp-boton { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: var(--radio); background: #e41e26;
  color: #fff; font-weight: 700; font-size: 15px; }
.pp-boton:hover { background: #c8161e; }
.pp-boton--claro { background: transparent; border: 1px solid rgba(232, 236, 244, .4); }
.pp-boton--claro:hover { background: rgba(232, 236, 244, .08); }
.pp-doc { background: #fff; color: #1b2433; border-radius: 14px; padding: 20px 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  transform: rotate(1.5deg); font-size: 14px; }
.pp-doc__cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid #0f2952; }
.pp-doc__cab span { margin-left: auto; font-size: 12px; color: #e41e26; font-weight: 700; }
.pp-doc__fila, .pp-doc__total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #e6e9ef; }
.pp-doc__fila span { color: #4a5568; }
.pp-doc__total { border-bottom: 0; font-size: 17px; font-weight: 800; padding-top: 12px; }
.pp-doc__pie { display: flex; gap: 8px; margin-top: 10px; }
.pp-chip { display: inline-flex; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: #e8eef8; color: #0f2952; }
.pp-chip--ok { background: #e7f6ec; color: #15803d; }
.pp-seccion { padding: 56px 0 8px; }
.pp-titulo { font-size: 28px; letter-spacing: -.03em; margin-bottom: 22px; }
.pp-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pp-beneficio { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 22px; }
.pp-beneficio svg { color: var(--naranja); margin-bottom: 14px; }
.pp-beneficio h3 { font-size: 17px; margin-bottom: 6px; }
.pp-beneficio p { color: var(--tinta-70); font-size: 14.5px; line-height: 1.55; }
.pp-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: none; }
.pp-pasos li { position: relative; padding: 20px 20px 22px; border-top: 3px solid var(--naranja); background: var(--tarjeta); border-radius: 0 0 var(--radio-g) var(--radio-g); }
.pp-pasos b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--naranja-claro);
  color: var(--naranja-osc); font-weight: 800; margin-bottom: 12px; }
.pp-pasos h3 { font-size: 16px; margin-bottom: 4px; }
.pp-pasos p { color: var(--tinta-70); font-size: 14px; }
.pp-preguntas { max-width: 760px; }
.pp-preguntas details { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.pp-preguntas summary { cursor: pointer; font-weight: 700; font-size: 15.5px; }
.pp-preguntas details p { margin-top: 8px; color: var(--tinta-70); line-height: 1.6; }
.pp-final { margin-top: 56px; padding: 56px 0 72px; text-align: center; background: linear-gradient(180deg, transparent, rgba(15, 41, 82, .55)); }
.pp-final h2 { font-size: 30px; letter-spacing: -.03em; }
.pp-final .pp-hero__ctas { justify-content: center; }
@media (max-width: 860px) {
  .pp-hero { padding: 36px 0 44px; }
  .pp-hero__fila { grid-template-columns: 1fr; gap: 32px; }
  .pp-doc { transform: none; }
}

/* ---------------------------------------------- cotización en dólares, aprobaciones, pago */
.cot-totales__pesos { font-size: 13px; color: var(--tinta-70); justify-content: flex-end !important; text-align: right; }
.cot-aprobar { color: var(--tinta); margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--alerta); border-radius: var(--radio);
  background: rgba(251, 191, 36, .1); font-size: 14px; }
.cot-aprobar h3 { font-size: 15px; margin-bottom: 4px; }
.cot-aprobar__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.cot-aprobar__acciones .agregar { width: auto; margin-top: 0; padding: 0 18px; }
.cot-aprobar__acciones input { flex: 1 1 220px; height: 40px; padding: 0 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font: inherit; }
.cot-pago { display: grid; gap: 8px; margin: 4px 0 6px; padding: 0; border: 0; min-width: 0; }
.cot-pago legend { font-size: 13px; font-weight: 600; color: var(--tinta-70); margin-bottom: 6px; padding: 0; }
.pago-oc__usd { margin: 8px 0 4px; padding: 10px 14px; background: var(--naranja-claro); border-radius: var(--radio); font-size: 14px; }
.pago-factura h2 { margin-bottom: 10px; }
.pago-factura .agregar { width: auto; padding: 0 18px; }
.opcion[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Mi empresa › cuenta corriente */
.emp-credito { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.emp-credito > div { padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.emp-credito span { display: block; font-size: 12px; color: var(--gris); }
.emp-credito strong { font-size: 18px; }
body[data-pickpro]:not([data-tema]) .hero__cta { background: #0b1220; color: #fff; }
body[data-pickpro]:not([data-tema]) .hero__placa[data-claro="true"] .hero__cta { background: #0f2952; color: #fff; }