/* =============================================================================
   Silitech CRM — capa de marca sobre el Design System OASYS.

   Carga DESPUES de theme.css y oasys.css. Hace tres cosas:
     1. Repinta los tokens de marca al verde de silitechsa.com (#2E7D32
        principal, #8BC34A acento).
     2. Arma el shell de la app (sidebar + topbar + contenido).
     3. Agrega las piezas que el DS no trae y este prototipo necesita: la hoja
        de "Nuevo pedido" a pantalla completa, el stepper de cantidad y la
        barra de meta.

   Decision de forma: el formulario de pedido NO es un drawer angosto. El
   asesor lo llena con el cliente al telefono, en 30-60 segundos, muchas veces
   desde el celular. Campos de 46px, una sola columna, cuatro preguntas
   numeradas y el total siempre visible abajo. Menos precision de puntero y
   menos lectura que un drawer lateral de 400px.
   ============================================================================= */

:root {
  /* ---- Marca Silitech: verde de silitechsa.com ---- */
  --brand: #2E7D32;
  --brand-h: #256428;
  --brand-txt: #256428;
  --brand-sub: #E8F5E9;
  --brand-sub-bd: #C3E2C6;
  --brand-solid: #2E7D32;
  --teal: #7CB342;

  --grad: linear-gradient(135deg, #1B5E20 0%, #2E7D32 58%, #8BC34A 100%);
  --grad-btn: linear-gradient(100deg, #1B5E20 0%, #2E7D32 60%, #6BAB3A 100%);
  --primary-grad: linear-gradient(180deg, #388E3C, #2E7D32);
  --primary-sh: rgba(46, 125, 50, .6);
  --acc-glow: rgba(46, 125, 50, .35);
  --ring: rgba(46, 125, 50, .3);
  --bd-acc: rgba(46, 125, 50, .4);
  --primary: #2E7D32;

  --chart-1: #2E7D32;
  --chart-2: #8BC34A;
  --chart-3: #1B5E20;
}

.dark {
  --brand: #66BB6A;
  --brand-h: #81C784;
  --brand-txt: #A5D6A7;
  --brand-sub: rgba(102, 187, 106, .15);
  --brand-sub-bd: rgba(102, 187, 106, .32);
  --teal: #9CCC65;

  --acc-glow: rgba(102, 187, 106, .5);
  --ring: rgba(102, 187, 106, .42);
  --bd-acc: rgba(102, 187, 106, .42);
  --primary: #388E3C;
}

/* -----------------------------------------------------------------------------
   Shell de la aplicacion
   -------------------------------------------------------------------------- */

body {
  background: var(--bg-deep);
  color: var(--tx);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  min-height: 100vh;
}

.app-shell { display: flex; min-height: 100vh; }

.app-side {
  width: var(--sidebar-width);
  flex: none;
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--sidebar-border);
}
.app-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--grad-btn);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -.02em;
}
.app-brand-t { font-size: 14px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.app-brand-s { font-size: 11px; color: var(--tx3); margin-top: 1px; }

.app-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx3); padding: 12px 10px 5px;
}
.nav-i {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--tx2);
  text-decoration: none; transition: var(--transition-base);
}
.nav-i:hover { background: var(--sidebar-accent); color: var(--tx); }
.nav-i svg { width: 18px; height: 18px; flex: none; }
.nav-i.on { background: var(--brand-sub); color: var(--brand-txt); font-weight: 600; }
.nav-i .nav-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--hover); color: var(--tx2);
  padding: 1px 7px; border-radius: 999px;
}
.nav-i.on .nav-count { background: var(--brand); color: #fff; }

.app-user {
  border-top: 1px solid var(--sidebar-border);
  padding: 12px; display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--grad-btn); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.app-user-n { font-size: 13px; font-weight: 600; line-height: 1.2; }
.app-user-r { font-size: 11px; color: var(--tx3); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-top {
  height: 58px; flex: none;
  border-bottom: 1px solid var(--bd);
  background: var(--glass);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; gap: 14px;
}
.app-body { padding: 22px; max-width: 1400px; width: 100%; }

@media (max-width: 900px) {
  .app-side { position: fixed; left: -100%; z-index: 70; transition: left var(--dur-med) var(--ease-out); }
  .app-side.open { left: 0; box-shadow: var(--sh-lg); }
  .app-body { padding: 15px; }
  .app-top { padding: 0 14px; }
}

/* -----------------------------------------------------------------------------
   Hoja de "Nuevo pedido" — pantalla completa, una columna, campos grandes
   -------------------------------------------------------------------------- */

.sheet-wrap {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 8, 14, .5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  animation: fade var(--dur-med) var(--ease-out);
}
.sheet-wrap[hidden] { display: none; }

.sheet {
  width: 100%; max-width: 720px; max-height: 100%;
  background: var(--card);
  border: 1px solid var(--bd-2);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pop var(--dur-med) var(--ease-out);
}
.sheet-h {
  padding: 18px 24px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex: none;
}
.sheet-t { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.sheet-s { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.sheet-b { padding: 6px 24px 22px; overflow-y: auto; flex: 1; }
.sheet-f {
  flex: none; padding: 14px 24px;
  background: var(--panel); border-top: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

@media (max-width: 700px) {
  .sheet-wrap { padding: 0; }
  .sheet { max-width: 100%; height: 100%; border-radius: 0; border: 0; }
  .sheet-b { padding: 4px 16px 20px; }
  .sheet-h, .sheet-f { padding-left: 16px; padding-right: 16px; }
}

/* --- Wizard: un paso a la vez ------------------------------------------- */

.sheet-prog { height: 3px; background: var(--bar-2); flex: none; }
.sheet-prog > span {
  display: block; height: 100%; background: var(--grad-btn);
  transition: width var(--dur-slow) var(--ease-out);
}
.sheet-paso { display: none; padding: 22px 0 6px; }
.sheet-paso.on { display: block; }
.paso-t { font-size: 20px; font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; }
.paso-s { font-size: 13.5px; color: var(--tx2); margin-bottom: 18px; }
.paso-cnt { font-size: 12px; font-weight: 600; color: var(--tx3); }

/* Campos grandes: 48px de alto, texto de 15px. */
.sheet .label { font-size: 13px; font-weight: 600; color: var(--tx2); }
.sheet .input { height: 48px; font-size: 15px; padding: 0 13px; border-radius: 10px; }
.sheet textarea.input { height: auto; padding: 12px 13px; line-height: 1.5; }
.sheet .field { gap: 7px; }

.campos { display: flex; flex-direction: column; gap: 15px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .par { grid-template-columns: 1fr; } }

/* Selector grande de opcion unica: botones, nunca un desplegable. */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--bd-2); border-radius: 10px;
  background: var(--card); color: var(--tx2);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: var(--transition-base);
}
.opt:hover { border-color: var(--brand); color: var(--tx); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt.on { border-color: var(--brand); background: var(--brand-sub); color: var(--brand-txt); }
.opt svg { width: 18px; height: 18px; flex: none; }

/* --- Paso 2: elegir producto tocando una tarjeta ------------------------- */

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.pick {
  text-align: left; cursor: pointer; position: relative;
  border: 1px solid var(--bd-2); border-radius: 12px;
  background: var(--card); color: var(--tx);
  padding: 14px 15px; font: inherit;
  display: flex; flex-direction: column; gap: 3px;
  transition: var(--transition-base);
}
.pick:hover { border-color: var(--brand); transform: translateY(-1px); }
.pick.on { border-color: var(--brand); background: var(--brand-sub); box-shadow: 0 0 0 1px var(--brand); }
.pick-n { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.pick-p { font-size: 12.5px; color: var(--tx2); }
.pick-pr {
  font-size: 15px; font-weight: 800; margin-top: 5px;
  font-variant-numeric: tabular-nums; color: var(--brand-txt);
}
.pick-tic {
  position: absolute; top: 11px; right: 11px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: none; align-items: center; justify-content: center;
}
.pick-tic svg { width: 13px; height: 13px; stroke-width: 3.2; }
.pick.on .pick-tic { display: flex; }

/* Cantidad: aparece dentro de la tarjeta solo cuando ya se eligio. */
.pick-cant { display: none; margin-top: 11px; }
.pick.on .pick-cant { display: block; }

.stepper { display: flex; align-items: center; }
.stepper button {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--bd-2); background: var(--card);
  color: var(--tx); font: inherit; font-size: 21px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-base);
}
.stepper button:first-child { border-radius: 10px 0 0 10px; }
.stepper button:last-child { border-radius: 0 10px 10px 0; }
.stepper button:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.stepper input {
  width: 100%; min-width: 0; height: 44px; text-align: center;
  border: 1px solid var(--bd-2); border-left: 0; border-right: 0;
  background: var(--card); color: var(--tx);
  font: inherit; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; border-color: var(--brand); }

/* Resumen de lo elegido, al pie del paso 2. */
.resumen { margin-top: 16px; border-top: 1px solid var(--bd); padding-top: 14px; }
.resumen-l {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding: 5px 0; color: var(--tx2);
}
.resumen-l b { color: var(--tx); font-variant-numeric: tabular-nums; }

/* Total pegado abajo, siempre visible. */
.sheet-total-l { font-size: 12px; color: var(--tx2); font-weight: 600; }
.sheet-total-v {
  font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* -----------------------------------------------------------------------------
   Piezas propias del prototipo
   -------------------------------------------------------------------------- */

/* Barra de avance de meta */
.meta-bar { height: 9px; border-radius: 999px; background: var(--bar-2); overflow: hidden; }
.meta-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--grad-btn);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Numeros y codigos: siempre monoespaciados y tabulares */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

.sec-t {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx3);
}

/* Acciones inline de una fila de tabla */
.row-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bd-2);
  background: var(--card); color: var(--tx2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition-base); text-decoration: none;
}
.icon-btn:hover { background: var(--hover); color: var(--tx); border-color: var(--tx3); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn.wa:hover { background: var(--ok-sub); color: var(--ok); border-color: var(--ok); }
.icon-btn.tel:hover { background: var(--brand-sub); color: var(--brand-txt); border-color: var(--brand); }

/* Cabecera y toolbar de un card de lista */
.card-h {
  padding: 14px 18px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-h-t { font-size: 14.5px; font-weight: 700; }

.toolbar {
  padding: 12px 18px; border-bottom: 1px solid var(--bd);
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
}
.toolbar .input { max-width: 270px; }

.tbl-scroll-x { overflow-x: auto; }

/* Detalle expandible de un pedido en la bandeja del digitador */
.fila-detalle > td { background: var(--panel); padding: 0 !important; }
.fila-detalle[hidden] { display: none; }
.detalle-box { padding: 18px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
@media (max-width: 900px) { .detalle-box { grid-template-columns: 1fr; } }

.kv { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.kv > div { display: flex; gap: 10px; }
.kv .k { color: var(--tx3); min-width: 118px; flex: none; font-weight: 600; }
.kv .v { color: var(--tx); }

.msg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.vacio { padding: 40px 20px; text-align: center; color: var(--tx2); font-size: 13.5px; }

/* -----------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

/* El logotipo trae el claim en gris oscuro: sobre el tema oscuro desaparece.
   En vez de recortarlo, se le da un chip blanco (patron habitual de marca). */
.dark .logo-img {
  background: #fff;
  padding: 5px 8px;
  border-radius: 9px;
}

/* -----------------------------------------------------------------------------
   Boton flotante de "Nuevo pedido" (movil)
   El asesor coloca pedidos desde el celular: la accion principal no puede
   depender de abrir el menu lateral.
   -------------------------------------------------------------------------- */

.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  height: 54px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--grad-btn); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 28px -6px var(--acc-glow);
  display: none; align-items: center; gap: 9px; cursor: pointer;
}
.fab svg { width: 19px; height: 19px; }
@media (max-width: 900px) {
  .fab { display: inline-flex; }
  .app-top .btn-brand { display: none; }
}

/* El <form> es el contenedor flex de la hoja (no un `display:contents`, que
   deja el form fuera del arbol de accesibilidad en algunos navegadores). */
.sheet-form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }

/* =============================================================================
   Componentes de las pantallas orientadas a tarea
   ============================================================================= */

/* --- Filtros: chips con conteo, en vez de desplegables ------------------- */

.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--bd-2); background: var(--card);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tx2);
  text-decoration: none; cursor: pointer; transition: var(--transition-base);
}
.fchip:hover { border-color: var(--brand); color: var(--tx); }
.fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fchip .n {
  font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--hover); color: var(--tx2);
}
.fchip.on .n { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- Tarjeta de meta: UN numero, no cuatro ------------------------------ */

.meta-card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.meta-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.meta-v { font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.meta-de { font-size: 13.5px; color: var(--tx2); margin-top: 5px; }
.meta-pct { font-size: 15px; font-weight: 800; color: var(--brand-txt); font-variant-numeric: tabular-nums; }
.meta-bar { height: 10px; border-radius: 999px; background: var(--bar-2); overflow: hidden; }
.meta-bar > span {
  display: block; height: 100%; border-radius: 999px; background: var(--grad-btn);
  transition: width var(--dur-slow) var(--ease-out);
}
.meta-pie {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--bd);
}
.meta-pie-i .k { font-size: 11.5px; color: var(--tx3); font-weight: 600; }
.meta-pie-i .v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* --- Cola de trabajo: a quien llamar y por que --------------------------- */

.tareas { display: flex; flex-direction: column; }
.tarea {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-bottom: 1px solid var(--bd);
  transition: background var(--dur-1);
}
.tarea:last-child { border-bottom: 0; }
.tarea:hover { background: var(--hover); }
.tarea-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); color: var(--tx2);
}
.tarea-ic svg { width: 19px; height: 19px; }
.tarea.alta .tarea-ic { background: var(--brand-sub); color: var(--brand-txt); }
.tarea.media .tarea-ic { background: var(--warn-sub); color: var(--warn); }
.tarea-b { flex: 1; min-width: 0; }
.tarea-n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.tarea-m { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.tarea-d {
  font-size: 13px; color: var(--tx3); margin-top: 4px; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tarea-a { display: flex; gap: 8px; align-items: center; flex: none; }
@media (max-width: 640px) {
  .tarea { flex-wrap: wrap; }
  .tarea-a { width: 100%; padding-left: 54px; }
  .tarea-a .btn { flex: 1; }
}

/* --- Tarjeta de lead: una conversacion, no una fila --------------------- */

.leads-lista { display: flex; flex-direction: column; gap: 12px; }
.lead {
  border: 1px solid var(--bd); border-radius: 14px; background: var(--card);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.lead-top { display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px 0; }
.lead-ic {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-sub); color: var(--brand-txt);
}
.lead-ic svg { width: 19px; height: 19px; }
.lead-n { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.lead-meta { font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.lead-msg {
  margin: 12px 18px 0; padding: 12px 14px;
  background: var(--panel); border-radius: 11px;
  font-size: 13.5px; color: var(--tx); line-height: 1.5;
}
.lead-msg::before { content: "“"; color: var(--tx3); }
.lead-msg::after { content: "”"; color: var(--tx3); }
.lead-acc {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 15px 18px; margin-top: 14px;
  border-top: 1px solid var(--bd); background: var(--card-2);
}
.lead-acc .btn-brand { min-width: 132px; }

/* La pregunta que cierra el ciclo de la llamada. */
.resultado { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; width: 100%; }
.resultado-q { font-size: 13.5px; font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) {
  .lead-acc .btn, .resultado .btn { flex: 1; }
  .resultado-q { width: 100%; margin-bottom: 4px; }
}

/* --- Tarjeta de pedido en la bandeja del digitador ---------------------- */

.peds { display: flex; flex-direction: column; gap: 12px; }
.ped {
  border: 1px solid var(--bd); border-radius: 14px; background: var(--card);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.ped-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 15px 18px; flex-wrap: wrap;
}
.ped-id { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ped-sub { font-size: 12.5px; color: var(--tx3); margin-top: 2px; }
.ped-monto { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ped-cuerpo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0 18px 15px; font-size: 13px;
}
@media (max-width: 700px) { .ped-cuerpo { grid-template-columns: 1fr; } }
.ped-campo .k { font-size: 11.5px; color: var(--tx3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ped-campo .v { margin-top: 3px; line-height: 1.45; }
.ped-items { display: flex; flex-direction: column; gap: 3px; }
.ped-item { display: flex; gap: 8px; }
.ped-item .c { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 26px; }
.ped-acc {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--bd); background: var(--card-2);
}
.ped-acc .btn-brand { min-width: 168px; }
@media (max-width: 640px) { .ped-acc .btn { flex: 1; } }

/* Formulario que se despliega para la accion secundaria (guia / factura). */
.acc-form { width: 100%; padding-top: 13px; border-top: 1px dashed var(--bd); }
.acc-form[hidden] { display: none; }
.acc-form .fila { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; }
.acc-form .field { flex: 1; min-width: 150px; }
.acc-form .input { height: 44px; font-size: 14.5px; }

/* --- Encabezado de seccion con conteo ----------------------------------- */

.sec-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 26px 0 12px;
}
.sec-h-t { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.sec-h-s { font-size: 13px; color: var(--tx2); }