/* ============================================================================
   Acomee · Kit de componentes
   ----------------------------------------------------------------------------
   Base compartida por la tienda y los paneles. Extraído del prototipo aprobado
   el 30-jul-2026 (color de marca AZUL #14448f, confirmado por el cliente).

   Reglas del sistema:
   · El azul de marca es SOLO acción principal y acentos. Nunca peligro.
   · El peligro usa un rojo distinto y más brillante (#d92d20).
   · Cada estado se distingue por FORMA + ÍCONO + COLOR, para que siga siendo
     legible en escala de grises y para daltónicos (~8% de los hombres).
   · Prefijo .acm-k-* para no chocar con lo existente (.acm-* y .acm-adm-*).

   Cómo usarlo:  <link rel="stylesheet" href="assets/css/kit.css">  ANTES de
   styles.css, para que lo existente pueda sobrescribir durante la transición.
   ========================================================================== */

:root {
  /* ---- Color semántico ------------------------------------------------- */
  --k-marca:        #14448f;   /* acción principal, enlaces, acentos */
  --k-marca-hover:  #0f3670;
  --k-marca-suave:  #eaf0fa;   /* fondos de selección/activo */
  --k-marca-borde:  #c3d4ee;

  --k-ok:           #0f7b46;   /* completado, entregado, pagado */
  --k-ok-bg:        #e8f5ee;
  --k-ok-borde:     #bfe3cf;
  --k-ok-texto:     #0d5e36;

  --k-pend:         #e0a248;   /* requiere acción del usuario */
  --k-pend-bg:      #fdf3e0;
  --k-pend-texto:   #8a4b00;

  --k-error:        #d92d20;   /* crítico. NO es el color de marca */
  --k-error-oscuro: #b42318;
  --k-error-bg:     #fdecea;
  --k-error-borde:  #f3c6c1;

  --k-neutro:       #7b8798;   /* informativo, en curso, sin urgencia */
  --k-neutro-bg:    #eef1f5;
  --k-neutro-borde: #cfd6e0;
  --k-neutro-texto: #3d4a5c;

  /* ---- Tinta y superficies --------------------------------------------- */
  --k-ink:     #0b0e14;
  --k-ink-2:   #3d4a5c;
  --k-ink-3:   #5f6675;
  --k-ink-4:   #8b91a0;   /* apoyo decorativo. Para TEXTO que se lee, usar --k-ink-4-txt */
  --k-ink-4-txt: #646b78; /* mismo gris, subido a 5:1 sobre fondo claro (WCAG AA) */
  --k-linea:   #e4e7ec;
  --k-linea-2: #d5d8de;
  --k-fondo:   #eceef2;   /* fondo de página */
  --k-papel:   #ffffff;   /* tarjetas, tablas */
  --k-papel-2: #f6f7f9;   /* encabezados de tabla, zonas suaves */

  /* ---- Tipografía ------------------------------------------------------ */
  --k-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Espaciado y forma ----------------------------------------------- */
  --k-r-sm: 4px;
  --k-r:    8px;
  --k-r-lg: 12px;
  --k-r-full: 999px;
  --k-sombra:    0 1px 2px rgba(11,14,20,.06);
  --k-sombra-lg: 0 4px 16px rgba(11,14,20,.10);
}

/* ============================================================================
   1. PASTILLAS DE ESTADO
   Forma + ícono + color. En escala de grises siguen siendo distinguibles:
   crítico = relleno oscuro y esquinas rectas · pendiente = borde grueso
   en proceso = gris suave · entregado = tinte claro · cancelado = punteado
   ========================================================================== */
.acm-k-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--k-r-full);
  font-family: var(--k-sans); font-size: 11px; font-weight: 600;
  white-space: nowrap; border: 1px solid transparent;
}
.acm-k-pill__i {                      /* el ícono de la pastilla */
  width: 13px; height: 13px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; line-height: 1; flex: none;
}

/* Crítico — el único con esquinas rectas y relleno sólido: grita */
.acm-k-pill--crit {
  background: var(--k-error); color: #fff;
  border-color: var(--k-error-oscuro); border-radius: var(--k-r-sm);
  font-weight: 700; letter-spacing: .1px;
}
.acm-k-pill--crit .acm-k-pill__i {
  background: #fff; color: var(--k-error-oscuro); border-radius: 2px;
}

/* Pendiente — borde grueso: se nota sin gritar */
.acm-k-pill--pend {
  background: var(--k-pend-bg); color: var(--k-pend-texto);
  border: 1.5px solid var(--k-pend); padding: 2.5px 8px; font-weight: 650;
}
.acm-k-pill--pend .acm-k-pill__i { background: var(--k-pend); color: #fff; }

/* En proceso — neutro, no pide nada */
.acm-k-pill--work {
  background: var(--k-neutro-bg); color: var(--k-neutro-texto);
  border-color: var(--k-neutro-borde);
}
.acm-k-pill--work .acm-k-pill__i { background: var(--k-neutro); color: #fff; font-size: 9px; font-weight: 700; }

/* Resuelto — tinte claro, se calla */
.acm-k-pill--ok {
  background: var(--k-ok-bg); color: var(--k-ok-texto); border-color: var(--k-ok-borde);
}
.acm-k-pill--ok .acm-k-pill__i { background: var(--k-ok); color: #fff; }

/* Cancelado — punteado: existe pero está fuera de juego.
   Es información de estado que hay que poder LEER, así que usa el gris con
   contraste AA, no el decorativo. */
.acm-k-pill--off {
  background: var(--k-papel-2); color: var(--k-ink-4-txt);
  border: 1px dashed var(--k-linea-2);
}
.acm-k-pill--off .acm-k-pill__i { background: var(--k-ink-4-txt); color: #fff; }

/* ============================================================================
   2. BOTONES
   Jerarquía: primario (azul) → secundario (contorno) → terciario (texto)
   → peligro (rojo, contorno) → deshabilitado.
   ========================================================================== */
.acm-k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--k-sans); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--k-r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  min-height: 44px;                    /* área táctil mínima accesible */
  transition: background .15s, border-color .15s, color .15s;
}
.acm-k-btn--sm { padding: 7px 13px; font-size: 13px; min-height: 36px; }

.acm-k-btn--primary   { background: var(--k-marca); color: #fff; }
.acm-k-btn--primary:hover:not(:disabled) { background: var(--k-marca-hover); }

.acm-k-btn--secondary { background: var(--k-papel); color: var(--k-ink); border-color: var(--k-linea-2); }
.acm-k-btn--secondary:hover:not(:disabled) { border-color: var(--k-ink-4); }

.acm-k-btn--ghost     { background: transparent; color: var(--k-marca); padding-left: 8px; padding-right: 8px; }
.acm-k-btn--ghost:hover:not(:disabled) { background: var(--k-marca-suave); }

/* Peligro: contorno, no relleno — hay que querer apretarlo */
.acm-k-btn--danger    { background: var(--k-papel); color: var(--k-error); border-color: var(--k-error-borde); }
.acm-k-btn--danger:hover:not(:disabled) { background: var(--k-error-bg); border-color: var(--k-error); }

.acm-k-btn:disabled, .acm-k-btn[aria-disabled="true"] {
  background: var(--k-papel-2); color: var(--k-ink-4);
  border-color: transparent; cursor: not-allowed;
}

/* ============================================================================
   3. TABLAS — el componente más usado de los paneles
   ========================================================================== */
.acm-k-tabla-wrap {
  background: var(--k-papel); border: 1px solid var(--k-linea);
  border-radius: var(--k-r-lg); overflow: hidden;
}
.acm-k-tabla-wrap--scroll { overflow-x: auto; }   /* solo si de verdad no cabe */

.acm-k-tabla { width: 100%; border-collapse: collapse; font-family: var(--k-sans); font-size: 14px; }
.acm-k-tabla thead th {
  position: sticky; top: 0; z-index: 1;           /* encabezado fijo al scrollear */
  background: var(--k-papel-2); text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-ink-3); padding: 11px 16px; border-bottom: 1px solid var(--k-linea);
}
.acm-k-tabla td { padding: 13px 16px; border-bottom: 1px solid var(--k-linea); vertical-align: middle; color: var(--k-ink-2); }
.acm-k-tabla tbody tr:last-child td { border-bottom: none; }
.acm-k-tabla tbody tr:hover { background: var(--k-papel-2); }

.acm-k-tabla .num  { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--k-mono); color: var(--k-ink); }
.acm-k-tabla .mono { font-family: var(--k-mono); font-size: 13px; color: var(--k-ink); }
.acm-k-tabla .acciones { text-align: right; white-space: nowrap; }

/* ============================================================================
   4. ALERTAS — dicen qué pasó y cómo arreglarlo
   ========================================================================== */
.acm-k-alerta {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--k-r);
  font-family: var(--k-sans); font-size: 14px; line-height: 1.5;
  border: 1px solid transparent;
}
.acm-k-alerta__i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.acm-k-alerta--error { background: var(--k-error-bg);  border-color: var(--k-error-borde); color: #8f1b15; }
.acm-k-alerta--error .acm-k-alerta__i { background: var(--k-error); }
.acm-k-alerta--ok    { background: var(--k-ok-bg);     border-color: var(--k-ok-borde);    color: var(--k-ok-texto); }
.acm-k-alerta--ok .acm-k-alerta__i    { background: var(--k-ok); }
.acm-k-alerta--pend  { background: var(--k-pend-bg);   border-color: var(--k-pend);        color: var(--k-pend-texto); }
.acm-k-alerta--pend .acm-k-alerta__i  { background: var(--k-pend); }
.acm-k-alerta--info  { background: var(--k-marca-suave); border-color: var(--k-marca-borde); color: var(--k-marca-hover); }
.acm-k-alerta--info .acm-k-alerta__i  { background: var(--k-marca); }

/* ============================================================================
   5. FORMULARIOS
   ========================================================================== */
.acm-k-campo { display: flex; flex-direction: column; gap: 6px; font-family: var(--k-sans); }
.acm-k-campo__lbl { font-size: 13px; font-weight: 600; color: var(--k-ink); }
.acm-k-campo__lbl span { font-weight: 400; color: var(--k-ink-4); }   /* aclaración: "· sin IVA" */
.acm-k-campo__ayuda { font-size: 12.5px; color: var(--k-ink-4-txt); }
.acm-k-campo__error { font-size: 12.5px; color: var(--k-error); font-weight: 600; }

.acm-k-input, .acm-k-select, .acm-k-textarea {
  font-family: var(--k-sans); font-size: 14px; color: var(--k-ink);
  background: var(--k-papel); border: 1px solid var(--k-linea-2);
  border-radius: var(--k-r); padding: 10px 13px; min-height: 44px; width: 100%;
}
.acm-k-textarea { min-height: 90px; resize: vertical; }
.acm-k-input:hover, .acm-k-select:hover, .acm-k-textarea:hover { border-color: var(--k-ink-4); }
.acm-k-campo--error .acm-k-input,
.acm-k-campo--error .acm-k-select,
.acm-k-campo--error .acm-k-textarea { border-color: var(--k-error); }
.acm-k-input--mono { font-family: var(--k-mono); }   /* claves y números de parte */

/* ============================================================================
   6. ESTADOS VACÍO / CARGANDO — obligatorios en cada lista
   ========================================================================== */
.acm-k-vacio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 9px; padding: 56px 24px; font-family: var(--k-sans);
}
.acm-k-vacio__i { width: 46px; height: 46px; border-radius: 50%; background: var(--k-papel-2); display: grid; place-items: center; color: var(--k-ink-4); margin-bottom: 3px; }
.acm-k-vacio__t { font-size: 17px; font-weight: 700; color: var(--k-ink); }
.acm-k-vacio__d { font-size: 14px; color: var(--k-ink-3); max-width: 46ch; }
.acm-k-vacio__acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 7px; }

/* Esqueleto de carga: mejor que un spinner en blanco */
.acm-k-skel { background: linear-gradient(90deg, var(--k-papel-2) 25%, #eceef2 50%, var(--k-papel-2) 75%);
  background-size: 200% 100%; animation: acm-k-shimmer 1.4s linear infinite;
  border-radius: var(--k-r-sm); height: 14px; }
.acm-k-skel--linea { height: 14px; margin: 5px 0; }
.acm-k-skel--fila  { height: 44px; margin: 0; border-radius: 0; }
@keyframes acm-k-shimmer { to { background-position: -200% 0; } }

/* ============================================================================
   7. TARJETAS Y PANELES
   ========================================================================== */
.acm-k-card { background: var(--k-papel); border: 1px solid var(--k-linea); border-radius: var(--k-r-lg); }
.acm-k-card__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--k-linea); }
.acm-k-card__t { font-family: var(--k-sans); font-size: 16px; font-weight: 700; color: var(--k-ink); }
.acm-k-card__sub { font-size: 13px; color: var(--k-ink-4-txt); }
.acm-k-card__body { padding: 20px; }
.acm-k-card__spacer { margin-left: auto; }

/* Tarjeta de pendiente del dashboard: la barra superior marca la urgencia */
.acm-k-pendiente { background: var(--k-papel); border: 1px solid var(--k-linea); border-radius: var(--k-r-lg); border-top: 3px solid var(--k-neutro); padding: 17px 19px; }
.acm-k-pendiente--crit { border-top-color: var(--k-error); }
.acm-k-pendiente--pend { border-top-color: var(--k-pend); }
.acm-k-pendiente--info { border-top-color: var(--k-neutro); }
.acm-k-pendiente__n { font-family: var(--k-sans); font-size: 32px; font-weight: 800; color: var(--k-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.acm-k-pendiente__k { font-size: 13px; color: var(--k-ink-3); }
.acm-k-pendiente__d { font-size: 13px; color: var(--k-ink-3); margin-top: 7px; line-height: 1.45; }

/* ============================================================================
   8. UTILIDADES
   ========================================================================== */
.acm-k-mono { font-family: var(--k-mono); }
.acm-k-num  { font-variant-numeric: tabular-nums; }
.acm-k-muted{ color: var(--k-ink-4-txt); }
.acm-k-sr   { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================================
   9. ACCESIBILIDAD — transversal, no negociable
   ========================================================================== */
.acm-k-btn:focus-visible, .acm-k-input:focus-visible, .acm-k-select:focus-visible,
.acm-k-textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--k-marca); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .acm-k-skel { animation: none; background: var(--k-papel-2); }
  .acm-k-btn  { transition: none; }
}

/* ============================================================================
   10. MÓVIL — la tabla se vuelve tarjetas apiladas
   Marca la tabla con .acm-k-tabla--cards y pon data-lbl="Columna" en cada td.
   ========================================================================== */
@media (max-width: 720px) {
  .acm-k-tabla--cards thead { display: none; }
  .acm-k-tabla--cards tr {
    display: block; background: var(--k-papel);
    border: 1px solid var(--k-linea); border-radius: var(--k-r); margin-bottom: 10px; padding: 6px 0;
  }
  /* La celda envuelve: si el valor trae un segundo renglón (hora, empresa),
     baja completo en vez de apretarse contra la etiqueta. */
  .acm-k-tabla--cards td { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 14px; border: none; padding: 8px 15px; text-align: right; }
  .acm-k-tabla--cards td > div { flex: 0 0 100%; }   /* solo los renglones de apoyo, no pastillas ni botones */
  .acm-k-tabla--cards td::before {
    content: attr(data-lbl); font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--k-ink-4); text-align: left; flex: none; margin-right: auto;
  }
  .acm-k-tabla--cards td.acciones { justify-content: flex-end; }
  .acm-k-tabla--cards td.acciones::before { content: none; }
}

/* ============================================================================
   11. DASHBOARD DE PENDIENTES (admin/index.php)
   Layout propio del tablero. Los componentes salen de las secciones de arriba.
   ========================================================================== */
.acm-adm-dash { display: flex; flex-direction: column; gap: 18px; font-family: var(--k-sans); }

.acm-adm-dash__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.acm-adm-dash__head h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--k-ink); }
.acm-adm-dash__fecha { font-size: 13px; color: var(--k-ink-4-txt); }
.acm-adm-dash__resumen { margin: -8px 0 4px; font-size: 15px; line-height: 1.55; color: var(--k-ink-2); max-width: 78ch; }
.acm-adm-dash__resumen strong { color: var(--k-ink); }

.acm-adm-dash__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acm-adm-dash__link {
  display: inline-block; margin-top: 11px; font-size: 13.5px; font-weight: 700;
  color: var(--k-marca); text-decoration: none;
}
.acm-adm-dash__link:hover { text-decoration: underline; }
.acm-k-card__head .acm-adm-dash__link { margin-top: 0; }

.acm-adm-dash__cola .acm-k-tabla thead th { background: var(--k-papel); }
.acm-adm-dash__dias { font-size: 12.5px; }

.acm-adm-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 20px; }
.acm-adm-dash__stats b {
  display: block; font-size: 22px; font-weight: 800; color: var(--k-ink);
  font-variant-numeric: tabular-nums; font-family: var(--k-mono); letter-spacing: -.02em;
}
.acm-adm-dash__stats span { font-size: 12.5px; color: var(--k-ink-4-txt); }

@media (max-width: 1100px) { .acm-adm-dash__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  {
  .acm-adm-dash__cards, .acm-adm-dash__stats { grid-template-columns: 1fr; }
  .acm-adm-dash__head h1 { font-size: 22px; }
  /* El encabezado de tarjeta se apila: título, subtítulo y enlace en su renglón */
  .acm-k-card__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .acm-k-card__spacer { margin-left: 0; margin-top: 4px; }
}

/* ============================================================================
   12. PEDIDOS (admin/pedidos.php) — listado y ficha
   El listado responde "¿cuál atiendo?"; la ficha responde "¿qué hago con éste?".
   ========================================================================== */
.acm-adm-ped { display: flex; flex-direction: column; gap: 16px; font-family: var(--k-sans); }

/* --- Filtros del listado: pestañas con conteo, no un <select> escondido --- */
.acm-adm-ped__filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acm-adm-ped__chips   { display: flex; gap: 7px; flex-wrap: wrap; }
.acm-adm-ped__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--k-r-full);
  border: 1px solid var(--k-linea-2); background: var(--k-papel);
  font-size: 13.5px; font-weight: 600; color: var(--k-ink-2); text-decoration: none;
  min-height: 38px;
}
.acm-adm-ped__chip:hover { border-color: var(--k-ink-4); }
.acm-adm-ped__chip.is-on { background: var(--k-marca); border-color: var(--k-marca); color: #fff; }
.acm-adm-ped__chip b {
  font-family: var(--k-mono); font-size: 12px; font-weight: 700;
  background: var(--k-papel-2); color: var(--k-ink-3);
  padding: 1px 7px; border-radius: var(--k-r-full);
}
.acm-adm-ped__chip.is-on b { background: rgba(255,255,255,.22); color: #fff; }
/* El chip de un estado vacío se ve apagado, pero sigue siendo clicable */
.acm-adm-ped__chip.is-cero { color: var(--k-ink-4-txt); }

.acm-adm-ped__buscar { display: flex; gap: 8px; margin-left: auto; }
.acm-adm-ped__buscar .acm-k-input { min-width: 230px; }

/* --- Ficha: encabezado --- */
.acm-adm-ped__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acm-adm-ped__head h1 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--k-ink); font-family: var(--k-mono); }
.acm-adm-ped__meta  { font-size: 13.5px; color: var(--k-ink-4-txt); }
.acm-adm-ped__total { margin-left: auto; text-align: right; }
.acm-adm-ped__total b { display: block; font-family: var(--k-mono); font-size: 25px; font-weight: 800; color: var(--k-ink); letter-spacing: -.02em; }
.acm-adm-ped__total span { font-size: 12px; color: var(--k-ink-4-txt); }

/* --- Ficha: banda del siguiente paso. Una sola acción, arriba de todo. --- */
.acm-adm-ped__paso { border-left: 4px solid var(--k-marca); }
.acm-adm-ped__paso--crit { border-left-color: var(--k-error); }
.acm-adm-ped__paso--pend { border-left-color: var(--k-pend); }
.acm-adm-ped__paso--ok   { border-left-color: var(--k-ok); }
.acm-adm-ped__paso .acm-k-card__body { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.acm-adm-ped__paso-txt { flex: 1 1 300px; min-width: 0; }
.acm-adm-ped__paso-txt h2 { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; color: var(--k-ink); }
.acm-adm-ped__paso-txt p  { margin: 0; font-size: 14px; line-height: 1.55; color: var(--k-ink-3); }
.acm-adm-ped__paso-form { flex: 0 1 340px; display: flex; flex-direction: column; gap: 10px; }

/* --- Ficha: rejilla principal --- */
.acm-adm-ped__grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 16px; align-items: start; }
.acm-adm-ped__col  { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.acm-adm-ped__par  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Pares dato/valor: el valor manda, la etiqueta es apoyo */
.acm-adm-ped__dl { margin: 0; display: flex; flex-direction: column; gap: 13px; }
.acm-adm-ped__dl dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--k-ink-4-txt); }
.acm-adm-ped__dl dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--k-ink); word-break: break-word; }
.acm-adm-ped__dl dd.vacio { color: var(--k-ink-4-txt); }
.acm-adm-ped__dl dd small { display: block; font-size: 12.5px; color: var(--k-ink-4-txt); }

/* Totales: el renglón final se separa del resto */
.acm-adm-ped__tot { width: 100%; border-collapse: collapse; font-size: 14px; }
.acm-adm-ped__tot td { padding: 7px 0; color: var(--k-ink-3); }
.acm-adm-ped__tot td + td { text-align: right; font-family: var(--k-mono); color: var(--k-ink); font-variant-numeric: tabular-nums; }
.acm-adm-ped__tot tr.fin td { border-top: 1px solid var(--k-linea); padding-top: 11px; font-weight: 800; color: var(--k-ink); font-size: 16px; }

@media (max-width: 1000px) {
  .acm-adm-ped__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .acm-adm-ped__par { grid-template-columns: 1fr; }
  .acm-adm-ped__buscar { margin-left: 0; width: 100%; }
  .acm-adm-ped__buscar .acm-k-input { min-width: 0; flex: 1; }
  .acm-adm-ped__total { margin-left: 0; text-align: left; }
  .acm-adm-ped__head h1 { font-size: 20px; }
}

/* ============================================================================
   13. CATÁLOGO (admin/productos.php) — barra de búsqueda y paginador
   Reutiliza las pestañas y la tabla de la sección 12.
   ========================================================================== */
.acm-adm-prod__barra { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* Los controles del kit son width:100% por defecto (pensados para formularios
   en columna); aquí comparten renglón, así que se les da base propia. */
.acm-adm-prod__barra .acm-k-input  { flex: 1 1 260px; min-width: 0; width: auto; }
.acm-adm-prod__barra .acm-k-select { flex: 0 1 210px; min-width: 0; width: auto; }
.acm-adm-prod__cuenta { margin-left: auto; font-size: 13px; color: var(--k-ink-4-txt); white-space: nowrap; }
.acm-adm-prod__cuenta b { font-family: var(--k-mono); color: var(--k-ink); font-weight: 700; }

/* Paginador: además de los números, dice en qué página vas. Con 165 mil
   páginas posibles, "3 de 165,278" es la única referencia útil. */
.acm-adm-prod__pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--k-sans); }
.acm-adm-prod__pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; padding: 0 11px;
  border: 1px solid var(--k-linea-2); border-radius: var(--k-r);
  background: var(--k-papel); color: var(--k-ink-2);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.acm-adm-prod__pager a:hover { border-color: var(--k-ink-4); }
.acm-adm-prod__pager a.is-active { background: var(--k-marca); border-color: var(--k-marca); color: #fff; }
.acm-adm-prod__pager .es-hueco { color: var(--k-ink-4); padding: 0 2px; }
.acm-adm-prod__pager-pos { margin-left: auto; font-size: 13px; color: var(--k-ink-4-txt); }

@media (max-width: 720px) {
  .acm-adm-prod__cuenta, .acm-adm-prod__pager-pos { margin-left: 0; width: 100%; }
  .acm-adm-prod__barra .acm-k-select { flex: 1 1 auto; }
}

/* ============================================================================
   14. PANEL DEL CLIENTE (cuenta.php)
   Mismas tarjetas de pendiente del admin, pero contando lo que le toca a ÉL.
   ========================================================================== */
.acm-cta-resumen {
  font-family: var(--k-sans); font-size: 15px; line-height: 1.55;
  color: var(--k-ink-2); margin: 0 0 14px; max-width: 78ch;
}
.acm-cta-resumen strong { color: var(--k-ink); }

.acm-cta-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.acm-cta-link {
  display: inline-block; margin-top: 10px; font-family: var(--k-sans);
  font-size: 13.5px; font-weight: 700; color: var(--k-marca); text-decoration: none;
}
.acm-cta-link:hover { text-decoration: underline; }

/* Sin pendiente el número es un guion: se apaga para no leerse como dato */
.acm-cta-cards .acm-k-pendiente--info .acm-k-pendiente__n { color: var(--k-ink-4-txt); }

@media (max-width: 1100px) { .acm-cta-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .acm-cta-cards { grid-template-columns: 1fr; } }

/* ============================================================================
   15. PORTAL DE PROVEEDORES (proveedor/*)
   El portal tiene su propio CSS local; esto es lo que necesita del kit.
   ========================================================================== */
.acm-prov-resumen {
  font-family: var(--k-sans); font-size: 15px; line-height: 1.55;
  color: var(--k-ink-2); margin: 14px 0 16px; max-width: 76ch;
}
.acm-prov-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.acm-prov-link {
  display: inline-block; margin-top: 10px; font-family: var(--k-sans);
  font-size: 13.5px; font-weight: 700; color: var(--k-marca); text-decoration: none;
}
.acm-prov-link:hover { text-decoration: underline; }
.acm-prov-cards .acm-k-pendiente--info .acm-k-pendiente__n { color: var(--k-ink-4-txt); }
/* Las cifras de dinero son largas: bajan de tamaño para no partirse en dos */
.acm-prov-cards .acm-k-pendiente__n { font-size: 26px; }

/* Respuesta del proveedor a una línea del pedido */
.acm-prov-linea { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; max-width: 430px; }
.acm-prov-linea input { font-size: 13px; padding: 8px 10px; }
.acm-prov-linea__btns { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1100px) { .acm-prov-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .acm-prov-cards { grid-template-columns: 1fr; } }

/* ============================================================================
   16. HILO DE CONVERSACIÓN DEL CHAT (admin/ia.php)
   El criterio de F3.18 pide poder leer lo que el cliente le preguntó al bot.
   Se distingue quién habla por posición y color, como en cualquier mensajería.
   ========================================================================== */
.acm-ia-hilo { display: flex; flex-direction: column; gap: 14px; font-family: var(--k-sans); }

.acm-ia-msg { max-width: 78%; }
.acm-ia-msg__quien {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--k-ink-4-txt); margin-bottom: 5px; display: flex; gap: 8px; align-items: baseline;
}
.acm-ia-msg__quien span { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.acm-ia-msg__txt {
  font-size: 14px; line-height: 1.55; color: var(--k-ink);
  padding: 11px 14px; border-radius: var(--k-r-lg); border: 1px solid var(--k-linea);
  background: var(--k-papel); word-break: break-word;
}

/* El cliente a la derecha, el bot a la izquierda: se distingue de un vistazo
   quién preguntó qué sin tener que leer la etiqueta. */
.acm-ia-msg--user { margin-left: auto; }
.acm-ia-msg--user .acm-ia-msg__quien { justify-content: flex-end; }
.acm-ia-msg--user .acm-ia-msg__txt {
  background: var(--k-marca-suave); border-color: var(--k-marca-borde); color: var(--k-marca-hover);
}
.acm-ia-msg--assistant .acm-ia-msg__txt { background: var(--k-papel-2); }

/* La salida de herramienta es JSON de depuración: ocupa poco y viene plegada */
.acm-ia-msg--herramienta { max-width: 100%; }
.acm-ia-msg--herramienta details {
  border: 1px dashed var(--k-linea-2); border-radius: var(--k-r); background: var(--k-papel-2);
}
.acm-ia-msg--herramienta summary {
  cursor: pointer; padding: 8px 12px; font-size: 12.5px; color: var(--k-ink-4-txt); font-weight: 600;
}
.acm-ia-msg--herramienta pre {
  margin: 0; padding: 0 12px 12px; font-family: var(--k-mono); font-size: 11.5px;
  color: var(--k-ink-3); white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto;
}

@media (max-width: 720px) { .acm-ia-msg { max-width: 100%; } }