/* TransportSyS · portal del cliente.
   Pensado para teléfono primero, pero usable en escritorio: el cliente
   empresarial carga pedidos múltiples desde la computadora. */

:root {
  --marca: #0d6efd;
  --fondo: #f5f6f8;
  --cab: #0f172a;
  --ok: #198754;
  --alerta: #dc3545;
  --aviso: #f59e0b;
  --borde: #e5e7eb;
  --tenue: #6b7280;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--fondo);
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

/* ---------- Cabecera ---------- */
.p-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--cab); color: #fff;
  padding: calc(env(safe-area-inset-top) + .65rem) .85rem .65rem;
}
.p-top-fila { display: flex; align-items: center; gap: .6rem; max-width: 60rem; margin: 0 auto; }
.p-top strong { display: block; font-size: 1rem; line-height: 1.2; }
.p-top small { color: #9ca3af; font-size: .78rem; }

.p-volver, .p-icono {
  background: rgba(255,255,255,.1); border: 0; color: #fff;
  width: 2.3rem; height: 2.3rem; border-radius: .55rem; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Contenido ---------- */
.p-main { max-width: 60rem; margin: 0 auto; padding: .85rem; }
.p-cargando { display: flex; justify-content: center; padding: 3rem 0; color: var(--tenue); }

.p-tarjeta {
  background: #fff; border: 1px solid var(--borde); border-radius: .7rem;
  padding: .85rem; margin-bottom: .7rem;
}
.p-tarjeta.clickable { cursor: pointer; }
.p-tarjeta.clickable:active { background: #fafafa; }

.p-et {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tenue); margin-bottom: .15rem;
}
.p-track { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 600; }
.p-tenue { color: var(--tenue); font-size: .85rem; }
.p-chico { font-size: .78rem; }

/* ---------- Tablero ---------- */
.p-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .85rem; }
@media (min-width: 40rem) { .p-kpis { grid-template-columns: repeat(4, 1fr); } }
.p-kpi {
  background: #fff; border: 1px solid var(--borde); border-radius: .7rem;
  padding: .8rem; text-align: left;
}
.p-kpi b { display: block; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p-kpi span { font-size: .76rem; color: var(--tenue); }
.p-kpi.alerta b { color: var(--alerta); }

/* ---------- Timeline de tracking ---------- */
.p-linea { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.p-linea::before {
  content: ""; position: absolute; left: .35rem; top: .4rem; bottom: .4rem;
  width: 2px; background: var(--borde);
}
.p-linea li { position: relative; padding: 0 0 1rem; }
.p-linea li::before {
  content: ""; position: absolute; left: -1.5rem; top: .3rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--borde);
}
.p-linea li.hecho::before { background: var(--ok); border-color: var(--ok); }
.p-linea li.excepcion::before { background: var(--alerta); border-color: var(--alerta); }
.p-linea li.actual::before { background: var(--marca); border-color: var(--marca); }
.p-linea b { display: block; font-size: .92rem; }

/* ---------- Conversación del reclamo ---------- */
.p-chat { display: flex; flex-direction: column; gap: .55rem; }
.p-msg { max-width: 85%; padding: .55rem .75rem; border-radius: .7rem; font-size: .9rem; }
.p-msg small { display: block; font-size: .7rem; opacity: .75; margin-top: .25rem; }
.p-msg.mio { align-self: flex-end; background: var(--marca); color: #fff; }
.p-msg.ellos { align-self: flex-start; background: #fff; border: 1px solid var(--borde); }
.p-msg.sistema {
  align-self: center; background: transparent; color: var(--tenue);
  font-size: .78rem; text-align: center; max-width: 100%;
}

/* ---------- Paradas del pedido múltiple ---------- */
.p-parada {
  background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--marca);
  border-radius: .55rem; padding: .75rem; margin-bottom: .6rem;
}
.p-parada-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.p-parada-cab strong { font-size: .9rem; }

.p-bulto { display: grid; grid-template-columns: 3rem 1fr; gap: .4rem; margin-bottom: .4rem; }
.p-medidas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }

/* ---------- Corte ---------- */
.p-corte {
  border-radius: .6rem; padding: .7rem .85rem; font-size: .85rem;
  border: 1px solid transparent; margin-bottom: .7rem;
}
.p-corte.hoy  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.p-corte.pasa { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ---------- Navegación inferior ---------- */
.p-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: #fff; border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.p-nav button {
  flex: 1; background: none; border: 0; padding: .5rem .25rem .55rem;
  color: var(--tenue); font-size: .68rem; display: flex; flex-direction: column;
  align-items: center; gap: .15rem;
}
.p-nav button i { font-size: 1.2rem; }
.p-nav button.activo { color: var(--marca); }
.p-nav .p-nav-mas i {
  background: var(--marca); color: #fff; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-top: -.5rem;
}
.p-nav .p-nav-mas.activo i { background: var(--cab); }

/* ---------- Hoja inferior ---------- */
.p-hoja {
  position: fixed; inset: 0; z-index: 50; background: rgba(15,23,42,.5);
  display: flex; align-items: flex-end;
}
.p-hoja-caja {
  background: #fff; width: 100%; max-height: 90vh; display: flex; flex-direction: column;
  border-radius: 1rem 1rem 0 0;
}
@media (min-width: 40rem) {
  .p-hoja { align-items: center; justify-content: center; }
  .p-hoja-caja { max-width: 32rem; border-radius: 1rem; }
}
.p-hoja-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--borde);
}
.p-hoja-cuerpo { padding: 1rem; overflow-y: auto; }

/* ---------- Avisos ---------- */
.p-aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 60;
  background: var(--cab); color: #fff; padding: .6rem 1rem;
  border-radius: 999px; font-size: .85rem; max-width: 90vw; text-align: center;
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.25);
}
.p-aviso.error { background: var(--alerta); }
.p-aviso.ok { background: var(--ok); }

/* ---------- Login ---------- */
.p-login { max-width: 22rem; margin: 2.5rem auto; }
.p-login h1 { font-size: 1.2rem; margin-bottom: .25rem; }

/* ---------- Desactualizado ---------- */
.p-viejo {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: .5rem; padding: .5rem .7rem; font-size: .8rem; margin-bottom: .7rem;
}

/* ---------- Vacíos ---------- */
.p-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--tenue); }
.p-vacio i { font-size: 2.2rem; display: block; margin-bottom: .6rem; opacity: .5; }