:root{
  /* Color de fondo general. */
  --bg:#eef2f7;

  /* Color de tarjetas. */
  --card:#ffffff;

  /* Color principal de texto. */
  --text:#111827;

  /* Color secundario. */
  --muted:#6b7280;

  /* Color principal de botones. */
  --primary:#2563eb;

  /* Verde para acciones positivas. */
  --success:#16a34a;

  /* Rojo para fallos o eliminar. */
  --danger:#dc2626;

  /* Amarillo para advertencias. */
  --warning:#f59e0b;

  /* Bordes suaves. */
  --border:#e5e7eb;

  /* Fondo suave para estadísticas. */
  --soft:#f9fafb;
}

/* Elimina cálculo raro de tamaños. */
*{box-sizing:border-box}

/* Estilo general del cuerpo. */
body{
  margin:0;
  background:var(--bg);
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
}

/* Contenedor móvil central. */
.app{
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  padding:16px;
  background:#f3f6fb;
}

/* Tarjeta visual. */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

/* Títulos sin margen superior. */
h1,h2,h3{margin:0 0 10px}

/* Texto secundario. */
.muted{
  color:var(--muted);
  font-size:14px;
}

/* Texto pequeño. */
.mini{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

/* Etiquetas de formulario. */
label{
  display:block;
  font-size:13px;
  font-weight:800;
  margin:12px 0 6px;
}

/* Campos móviles grandes. */
input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:13px;
  font-size:15px;
  background:white;
}

/* Textarea cómoda. */
textarea{
  min-height:72px;
  resize:vertical;
}

/* Botones tipo app. */
button,.btn{
  display:block;
  width:100%;
  border:none;
  border-radius:16px;
  padding:15px;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
}

/* Botón principal. */
.primary{background:var(--primary);color:white}

/* Botón positivo. */
.success{background:var(--success);color:white}

/* Botón de peligro. */
.danger{background:var(--danger);color:white}

/* Botón de advertencia. */
.warning{background:var(--warning);color:white}

/* Botón oscuro. */
.dark{background:#111827;color:white}

/* Botón claro. */
.light{
  background:#f3f4f6;
  color:#111827;
  border:1px solid var(--border);
}

/* Separación entre acciones. */
.actions{
  display:grid;
  gap:10px;
}

/* Grilla de estadísticas. */
.stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

/* Tarjeta estadística. */
.stat{
  background:var(--soft);
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}

/* Número destacado en estadística. */
.stat strong{
  display:block;
  font-size:22px;
  margin-bottom:3px;
}

/* Descripción de estadística. */
.stat span{
  font-size:13px;
  color:var(--muted);
}

/* Caja informativa. */
.note{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
  border-radius:14px;
  padding:10px;
  font-size:13px;
  line-height:1.35;
  margin:10px 0;
}

/* Caja de advertencia. */
.warn{
  background:#fef3c7;
  border:1px solid #fcd34d;
  color:#92400e;
  border-radius:14px;
  padding:10px;
  font-size:13px;
  line-height:1.35;
  margin:10px 0;
}

/* Tablas móviles. */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:13px;
}

/* Celdas. */
th,td{
  text-align:left;
  border-bottom:1px solid var(--border);
  padding:9px 4px;
  vertical-align:top;
}

/* Encabezado de tabla. */
th{
  color:var(--muted);
  font-size:12px;
}

/* Navegación inferior móvil. */
.nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  position:sticky;
  bottom:0;
  background:#f3f6fb;
  border-top:1px solid var(--border);
  padding:8px 0 0;
  margin-top:14px;
}

/* Links de navegación inferior. */
.nav a{
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 4px;
  text-align:center;
  text-decoration:none;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

/* Vista previa de imagen. */
.preview{
  width:100%;
  min-height:150px;
  border:2px dashed #cbd5e1;
  border-radius:18px;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  text-align:center;
  padding:14px;
  margin-top:10px;
}

/* Imagen dentro de preview. */
.preview img{
  max-width:100%;
  border-radius:14px;
}

/* Etiqueta tipo badge. */
.badge{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#dbeafe;
  color:#1d4ed8;
}


/* Nombre de marca PackRoute. */
.brand-name{
  font-weight:900;
  font-size:24px;
  letter-spacing:-0.5px;
}

/* Resalta la palabra Route en azul si se usa con span. */
.brand-name span{
  color:var(--primary);
}