/* Sistema de diseño — Ruta Tortillero
   Tokens compartidos por todas las pantallas. Rejilla de 4px, radios 10/16,
   escala tipográfica 11/13/15/17/22, sombras de 2 niveles. */

:root {
  --rojo:    #7A1220;   /* marca principal */
  --rojo-2:  #9E1B2E;
  --maiz:    #E8A33D;   /* acento */
  --verde:   #1B6F3A;   /* acción: registrar cliente */
  --verde-2: #22854A;
  --azul:    #0B4FA8;   /* acción: navegar */
  --azul-2:  #0F62CE;
  --tinta:   #14181C;
  --gris:    #5B6670;
  --gris-2:  #8A949E;
  --fondo:   #F4F6F8;
  --linea:   #E1E6EB;
  --blanco:  #FFFFFF;

  --r:    16px;
  --r-sm: 10px;
  --sh-1: 0 1px 2px rgba(16,24,32,.06), 0 2px 8px rgba(16,24,32,.06);
  --sh-2: 0 4px 16px rgba(16,24,32,.12);
  --tap:  66px;   /* alto mínimo de botón primario */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* ---------- estructura ---------- */
.app {
  display: flex; flex-direction: column;
  height: 100vh;        /* respaldo para WebView viejo */
  height: 100dvh;
  overflow: hidden;
}
.scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- cabecera con logo ---------- */
.hdr {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-2) 100%);
  color: #fff;
  padding: calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
}
.hdr-row { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px; background: #fff; padding: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  object-fit: contain;
}
.hdr-txt { min-width: 0; flex: 1 1 auto; }
.hdr-name {
  font-size: 15px; font-weight: 800; letter-spacing: .2px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-sub {
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.82);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 5px 10px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rec { width: 8px; height: 8px; border-radius: 50%; background: #FF5A5A;
       box-shadow: 0 0 0 3px rgba(255,90,90,.28); }

/* ---------- tarjetas ---------- */
.card {
  background: var(--blanco); border-radius: var(--r);
  box-shadow: var(--sh-1); border: 1px solid var(--linea);
}

/* ---------- botones ---------- */
.btn {
  border: 0; font-family: inherit; color: #fff; cursor: pointer;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  gap: 10px; text-align: left; padding: 0 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.16), var(--sh-1);
}
.btn:active { transform: translateY(1px); }
.btn-verde { background: linear-gradient(180deg, var(--verde-2), var(--verde)); }
.btn-azul  { background: linear-gradient(180deg, var(--azul-2),  var(--azul));  }
.btn-llano {
  background: var(--blanco); color: var(--rojo);
  border: 1.5px solid var(--rojo); box-shadow: none; font-weight: 800;
}
.btn .ico { font-size: 21px; line-height: 1; flex: 0 0 auto; }
.btn .lbl { display: block; font-size: 17px; font-weight: 800; letter-spacing: .4px; line-height: 1.05; }
.btn .sub { display: block; font-size: 11px; font-weight: 600; opacity: .92; margin-top: 2px; }

/* ---------- campos ---------- */
.field { display: block; margin-bottom: 14px; }
.field > .etq {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  color: var(--gris); text-transform: uppercase; margin-bottom: 6px;
}
.inp {
  width: 100%; height: 48px; border-radius: var(--r-sm);
  border: 1.5px solid var(--linea); background: var(--blanco);
  padding: 0 12px; font-size: 15px; font-family: inherit; color: var(--tinta);
}
.inp:focus { outline: none; border-color: var(--rojo-2); box-shadow: 0 0 0 3px rgba(158,27,46,.12); }

/* ---------- barra inferior fija ---------- */
.bar {
  flex: 0 0 auto; background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  display: flex; gap: 12px;
  box-shadow: 0 -2px 12px rgba(16,24,32,.06);
}
.bar .btn { flex: 1 1 0; min-height: var(--tap); }