/* =====================================================================
   HISTORIAL
   Sigue los tokens de app.css: ni un color suelto. Sólo lo que la pantalla
   de Pedidos no tenía — el panel rojo de los que deben, las tarjetas de la
   papelera y el detalle de adentro del modal.
   Se lee igual en compu y en teléfono: cero scroll de lado.
   ===================================================================== */

.hi-nota{margin:0 0 12px;font-size:13.5px;color:var(--mut)}
.hi-sub2{font-family:Oswald,sans-serif;font-size:12.5px;font-weight:600;color:var(--steel);
      text-transform:uppercase;letter-spacing:.06em;margin:20px 0 8px}
.hi-sub2:first-child{margin-top:0}

/* ---------- Quién es el pedido (se reusa en las tres listas) ---------- */
.hi-quien{min-width:0}
.hi-quien b{display:block;font-weight:700;font-size:15px;line-height:1.25}
.hi-quien small{display:block;font-size:13px;color:var(--mut);margin-top:1px}

/* ---------- Panel rojo: deben material ---------- */
/* Va hasta arriba y se ve de lejos: es lo primero que Jorge busca al entrar. */
.hi-deben{background:var(--danger-bg);border:1px solid #f0cfcf;border-radius:var(--r-card);
      padding:14px 16px;margin-bottom:16px}
.hi-deben header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hi-deben h3{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;color:var(--danger);
      text-transform:uppercase;letter-spacing:.04em}
.hi-deb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
      padding:10px 0;border-top:1px solid #f0cfcf}
.hi-deb .hi-quien{flex:1 1 240px}
.hi-falta{flex:0 0 auto;font-size:13.5px;color:var(--danger);font-weight:600;white-space:nowrap}
.hi-falta b{font-family:Oswald,sans-serif;font-size:16px}
.hi-falta small{display:block;font-size:12px;font-weight:400;color:var(--mut)}
.hi-deb .acc{margin-left:auto}

/* ---------- La lista de entregados ---------- */
/* La raya roja del renglón: mismo lenguaje que el ATRASADO de Pedidos. */
tbody tr.fila.debe td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.hi-cerrado{font-size:11.5px;font-weight:700;color:var(--warn);margin-top:2px}
.acc button.mal{border-color:#f0cfcf;background:var(--danger-bg);color:var(--danger)}
.acc button.mal:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------- Papelera ---------- */
.hi-bor{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:10px}
.hi-bor .hi-quien{flex:1 1 240px}
.hi-borro{font-size:13px;color:var(--mut);white-space:nowrap}
.hi-borro b{color:var(--ink)}
.hi-borro small{display:block;font-size:12px;color:var(--gris)}
.hi-vence{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      padding:4px 10px;border-radius:var(--r-pill);background:#f1f2f5;color:var(--gris);white-space:nowrap}
.hi-vence.urge{background:var(--danger-bg);color:var(--danger)}
.hi-bor .acc{margin-left:auto}

/* ---------- Detalle (dentro del modal) ---------- */
.hi-det-cab b{font-size:17px}
.hi-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* Renglones y no tabla: en teléfono app.css acuesta cualquier celda, y una
   tabla aquí adentro se desarmaría justo donde más se necesita leer. */
.hi-mats{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.hi-mat{display:flex;align-items:baseline;gap:10px;padding:9px 12px;border-top:1px solid #f0f2f6;font-size:14px}
.hi-mat:first-child{border-top:0}
.hi-mat span{flex:1;min-width:0}
.hi-mat span small{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.hi-mat span small.mal{color:var(--danger);font-weight:600}
.hi-mat em{flex:0 0 92px;text-align:right;font-style:normal;font-weight:700;white-space:nowrap}
.hi-mat.cab{background:#f7f8fb;font-family:Oswald,sans-serif;font-size:11.5px;font-weight:500;
      text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.hi-mat.cab em{font-weight:500}
.hi-mat.debe{background:var(--danger-bg)}

.hi-sal{border:1px solid var(--line);border-radius:var(--r-panel);padding:11px 13px;margin-bottom:10px}
.hi-sal-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.hi-sal-cab b{font-family:Oswald,sans-serif;font-size:14.5px;color:var(--steel)}
.hi-sal-cab span{font-size:13px;color:var(--mut)}
.hi-sal-l{display:flex;gap:10px;justify-content:space-between;font-size:13.5px;padding:3px 0}
.hi-sal-l em{font-style:normal;font-weight:700;white-space:nowrap}
.hi-sal-por{margin-top:7px;padding-top:7px;border-top:1px solid #f0f2f6;font-size:12px;color:var(--gris)}

.hi-autoria{display:grid;gap:10px}
.hi-autoria div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.hi-autoria span{flex:0 0 108px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
      color:var(--mut);font-weight:700}
.hi-autoria em{font-style:normal;color:var(--mut);margin-left:auto}

/* ---------- Teléfono ---------- */
@media (max-width:640px){
  .hi-deb,.hi-bor{align-items:flex-start}
  .hi-deb .acc,.hi-bor .acc{margin-left:0;width:100%}
  .hi-deb .acc button,.hi-bor .acc button{flex:1}
  .hi-falta{white-space:normal}
  .hi-mat em{flex:0 0 74px}
  .hi-autoria em{margin-left:0;width:100%}
}